Mari kita bincangkan tentang cara menambah dan menggunakan berbilang kursor dalam VSCode

Artikel ini akan membincangkan tentang pengeditan berbilang kursor yang menarik dan praktikal VSCode, dan memperkenalkan cara menambah dan menggunakan berbilang kursor saya harap ia akan membantu semua orang.

Jika anda ingin menyatakan ciri VSCode yang telah meningkatkan kecekapan pengekodan, penyuntingan berbilang kursor pastinya salah satu daripadanya. Penyuntingan berbilang kursor membolehkan kami mengelak daripada mengulangi operasi teks yang sama Arahan pemprosesan teks yang dibina dalam VSCode dan disediakan oleh sambungan pihak ketiga boleh meningkatkan fleksibiliti penyuntingan berbilang kursor. Saya berharap dengan membaca artikel ini, saya dapat mengajar pembaca cara fleksibel menggunakan penyuntingan berbilang kursor dalam penyuntingan harian. [Pembelajaran yang disyorkan: "tutorial pengenalan vscode"]

Garis kandungan:

• Cara menambah berbilang kursor
• Gerakkan kursor
• Pilih teks
• Padam teks
• Arahan pemprosesan teks
• Contoh praktikal berbilang kursor
• Pilihan yang lebih baik selain penyuntingan berbilang kursor

Cara menambah berbilang kursor

Kaedah umum

Tekan dan tahan kekunci ⌥, kemudian gerakkan kursor ke mana-mana yang anda mahu tambah kursor dan klik terus Kursor akan ditambah.

Tambah kekunci pintasan kursor

Kekunci pintasan berkaitan kursor dalam VSCode semuanya mempunyai kekunci ⌥

Kita boleh membuka jadual kekunci pintasan VSCode melalui gabungan kekunci pintasan ⌘ K,⌘ S Mencari cursor semua Untuk kekunci pintasan yang berkaitan dengan kursor, cari add cursor untuk melihat kekunci pintasan yang berkaitan dengan 添加光标:

Tambah kursor dalam lajur yang sama:

• ⌘ ⌥ ↓: Tambahkan kursor ke baris seterusnya dan lajur yang sama
• ⌘ ⌥ ↑: Tambahkan kursor pada lajur yang sama dalam baris sebelumnya

Tambah pilihan

Pelbagai pilihan boleh wujud dalam editor VSCode pada masa yang sama Kursor juga boleh mempunyai berbilang pilihan pada masa yang sama. Kebanyakan arahan untuk menambah pilihan dalam VSCode juga akan menambah kursor apabila menambah pilihan. Oleh itu, kita boleh menggunakan kekunci pintasan untuk menambah pilihan untuk menambah berbilang kursor.

Yang biasa digunakan ialah:

• ⌘ D: Tambahkan pilihan pada padanan seterusnya yang ditemui, jika terdapat berbilang padanan, Tambah satu lagi
• ⌘ ⇧ L: Tambahkan pilihan pada semua yang ditemui padanan

Walaupun dua kekunci pintasan di atas merujuk pada padanan yang ditemui, ia sebenarnya tidak akan mengembangkan kotak carian apabila digunakan.

Arahan yang disediakan oleh VSCode selalunya memenuhi simetri Contohnya, ⌘ D adalah untuk menambah pilihan pada yang seterusnya untuk mencari padanan, kemudian terdapat satu. kebarangkalian tinggi bahawa akan ada Perintah ini menambah pilihan pada padanan yang ditemui sebelum ini.

Jika teks yang ingin dicari lebih rumit, kita boleh terus membuka carian dahulu dan menggunakan fungsi 大小写忽略, 匹配整个单词, 正则 yang disediakan dalam kotak carian untuk mencarinya Untuk teks yang kompleks, gunakan ⌘ ⇧ L untuk memilih semua.

Jika sudah ada pilihan , kita boleh menggunakan kekunci pintasan ⌥ ⇧ Saya untuk menambah kursor pada penghujung semua baris dalam pilihan. Jika anda ingin mengalihkan kursor ke permulaan baris pada masa ini, hanya masukkan kekunci Home.

Contoh berikut ialah memilih berbilang baris dahulu, kemudian tambah kursor pada penghujung semua baris dan tukar antara muka TypeScript untuk menggunakan koma untuk memisahkan atribut:

Pergerakan kursor

Jelas sekali anda tidak boleh menggunakan tetikus untuk meletakkan kedudukan semasa mengedit berbilang kursor, yang memerlukan kami menggunakan kekunci untuk bergerak. Empat anak panah paling asas ialah atas, bawah, kiri dan kanan, dan kekunci Rumah dan Tamat tidak perlu dinyatakan. Di samping itu, ia biasanya digunakan untuk memindahkan satu perkataan atau sebahagian daripada perkataan pada satu masa.

Anda boleh melihat kekunci pintasan yang berkaitan dengan menggerakkan kursor dengan mencari cursor right, cursor end dan seumpamanya:

Pergerakan peringkat perkataan sangat biasa digunakan:

• ⌥ →: Gerakkan kursor ke kanan ke hujung perkataan seterusnya
• ^ ⌥ →: Gerakkan kursor ke kanan ke bahagian seterusnya perkataan, bonggol, awal dan akhir perkataan adalah semuanya titik henti

Seperti yang dinyatakan sebelum ini, reka bentuk simetri arahan VSCode, ⌥ → bergerak ke kanan untuk penghujung perkataan seterusnya, kemudian ⌥ ← ialah untuk mengalihkan permulaan perkataan sebelumnya ke kiri.

Dan ini juga mengesahkan perkara yang kami katakan sebelum ini, kekunci pintasan yang berkaitan dengan kursor adalah semua ⌥. Oleh itu, apabila kami menyesuaikan kekunci pintasan, sebaiknya masukkan kekunci pintasan yang berkaitan dengan kursor dengan ⌥. Sebagai contoh, anda boleh mentakrifkan ⌥ J untuk beralih ke perubahan git sebelumnya, dan kemudian reka bentuk simetri ⌥ K untuk beralih ke perubahan git seterusnya di. Mudah diingat dan dicari.

Sesetengah pengguna Mac mungkin merasakan kursor bergerak terlalu perlahan Ini boleh dilaraskan dalam 设置 -> 键盘 untuk menjadikan kursor bergerak lebih lancar:

Seret peluncur
• untuk menetapkan jumlah masa menunggu sebelum aksara mula berulang. 重复前延迟
Seret peluncur
• untuk menetapkan kadar pengulangan aksara. 按键重复

Adalah disyorkan untuk meningkatkan

kelajuan 按键重复 lebih pantas supaya pergerakan kursor akan menjadi lebih pantas dan lancar.

Teks yang dipilih

Semasa pengeditan berbilang kursor, operasi yang paling biasa ialah mengalih, memilih, memadam, memasukkan, dsb.

Kekunci pintasan untuk menggerakkan kursor tambah

⇧ ialah kekunci pintasan untuk memilih kawasan bergerak

Jom senaraikan beberapa contoh Sahkan peraturan ini:

• → menggerakkan satu aksara ke kanan, ⇧ → boleh memilih aksara seterusnya
↑
• ialah untuk bergerak ke atas satu baris, ⇧ ↑ ialah untuk memilih satu baris ke atas
⌥
• → ialah bergerak ke kanan ke hujung perkataan, ⇧ ⌥ → ialah untuk memilih kedudukan semasa daripada kursor ke hujung perkataan seterusnya
^
• ⌥ → bergerak terus ke bahagian seterusnya perkataan, ⇧ ^ ⌥ → adalah untuk memilih sebahagian daripada perkataan di sebelah kanan

Terdapat arahan pemilihan yang perlu diperkenalkan secara berasingan ialah

. Kami tahu bahawa kekunci pintasan

boleh memilih perkataan, tetapi jika anda ingin memilih rentetan, ia tidak akan berfungsi pada masa ini, anda boleh menggunakan pemilihan pintar untuk mencapainya. smart selectcmd D

^
• ⇧ →: Kembangkan julat pilihan
^
• ⇧ ←: Kurangkan julat pilihan

Baru-baru ini antfu telah menulis sambungan yang menggunakan dwiklik untuk memilih teks secara bijak , walaupun ia serupa dengan pengeditan berbilang kursor tidak mengapa, tetapi pembaca yang berminat boleh mengalaminya:

vscode-smart-clicks. Padam teks

Kekunci pintasan untuk menggerakkan kursor ditambah kekunci

⌫

ialah kekunci pintasan untuk memadam kawasan bergerak kursor ke kiri , add On fn ⌫ ialah kekunci pintasan untuk kanan untuk memadamkan kawasan pergerakan kursor pada Mac

⌘

→ mewakili kunci , ⌘ End← mewakili kunci , fn ⌫ mewakili kunci Home peraturan ini menjadi biasa kepada semua aplikasi. Delete

⌥

• ⌫: Padam kiri ke permulaan perkataan ^
• ⌥ ⌫: Padamkan sebahagian perkataan di sebelah kiri Oleh kerana ruang belakang itu sendiri adalah arah, tidak perlu memadankan kekunci arah dengan kekunci pintasan.

Arahan pemprosesan teks

Semasa pengeditan berbilang kursor, kami boleh menggunakan arahan yang disediakan oleh VSCode atau sambungan pihak ketiga untuk memasukkan teks tertentu dengan pantas atau menukar teks yang dipilih kepada teks tertentu.

VSCode mempunyai ciri terbina dalam berikut dengan mengambil perkataan

sebagai contoh, hasil penukaran ialah:

letterCaseUbah kepada Huruf Besar:

<.>Ubah kepada Huruf Kecil:
• LETTERCASE
Ubah kepada Sarung Tajuk:
• lettercase
Ubah kepada Sarung Ular:
• LetterCase
• Cari letter_case untuk mencari semua arahan penukaran teks



Untuk memberikan contoh praktikal, sebagai contoh, kita perlu menukar sekumpulan pemalar yang asalnya bekas unta kecil kepada semua huruf besar:



Selain daripada arahan pemprosesan teks terbina dalam VSCode, anda juga boleh menggunakan pemalam pihak ketiga Kami mengesyorkan di sini: Alat Kuasa Teks. Sebab untuk dicadangkan: Penyelenggaraan aktif dan fungsi yang kaya.

Terdapat banyak fungsi Pembaca boleh menyemak halaman utama sambungan untuk mengetahui lebih lanjut mengenainya. Saya fikir jika anda tidak mempunyai semangat penerokaan dan keupayaan untuk melambung, anda mungkin tidak akan dapat membaca artikel ini. Saya hanya akan menunjukkan fungsi memasukkan nombor di sini:



Pembaca berkebolehan juga boleh menulis sambungan VSCode mereka sendiri untuk melaksanakan lebih banyak arahan pemprosesan teks seperti sisipan, penukaran dan juga pemadaman . Perlu diingatkan bahawa semua pilihan mesti diproses semasa pelaksanaan Contohnya, sambungan VSCode pengarang VSCode FE Helper melaksanakan sambungan untuk menjamak perkataan yang dipilih seperti berikut. Kodnya sangat mudah. Anda boleh perhatikan bahawa semua pilihan dilalui, jadi apabila memanggil arahan ini semasa pengeditan berbilang kursor, semua pilihan boleh diproses:

import { TextEditor } from 'vscode';

export default async function plur(editor: TextEditor): Promise<void> {
  const { default: pluralize } = await import(&#39;pluralize&#39;);
  editor.edit((editorBuilder) => {
    const { document, selections } = editor;
    for (const selection of selections) {
      const word = document.getText(selection);
      const pluralizedWord = pluralize(word);
      editorBuilder.replace(selection, pluralizedWord);
    }
  });
}



Contoh praktikal berbilang kursor

Seterusnya saya akan menunjukkan beberapa contoh cara saya biasanya menggunakan berbilang kursor. Bagi mereka yang tidak biasa dengan penyuntingan berbilang kursor, ia mungkin kelihatan agak rumit, tetapi jika anda mempraktikkannya sendiri dan mempraktikkannya, anda sepatutnya baik-baik saja. Saya sering menggunakan pengeditan berbilang kursor semasa membangun, tetapi ia tidak selancar yang ditunjukkan dalam artikel, dan langkah-langkahnya mungkin tidak minimum, tetapi ia masih lebih cekap daripada penyuntingan berulang. Saya sering melakukan kesilapan semasa menaip, tetapi tidak mengapa kerana saya boleh menarik baliknya.

Ganti var

Seperti yang kita semua tahu, apabila anda belajar ctrl c, ctrl v, anda sudah menjadi pengaturcara junior. Apabila anda bukan sahaja boleh menyalin kod tetapi juga mengubah suai kod orang lain, maka anda sudah menjadi pengaturcara yang matang. Mempelajari pengeditan berbilang kursor boleh meningkatkan kecekapan mengubah suai kod.

Apabila kami menyalin sekeping kod JS daripada stackoverflow, mungkin terdapat banyak vars di dalamnya. Kami boleh menggunakan pengeditan berbilang kursor untuk menggantikan semua vars dengan let.

Langkah:

• Letakkan kursor pada var

• ⌘ ⇧ L, untuk memilih semua var

• Input biarkan



pasang Berbilang pakej nod

Kadangkala apabila saya membuka projek baharu, saya perlu memasang banyak pemalam eslint. Pendekatan awal saya adalah untuk menyalin nama pakej satu demi satu daripada package.json projek sebelumnya, yang terlalu menyusahkan. Sesetengah orang berkata, mengapa tidak anda hanya menyalin nama pakej dan nombor versi ke package.json projek baharu Sebab utama untuk tidak berbuat demikian ialah nombor versi pakej projek sebelumnya tidak semestinya yang terkini, dan projek baharu perlu memasang versi terkini.

Langkah:

• Buka package.json dan tetapkan kursor kepada nama pakej pertama

• ⌘ Alt ↓Tambahkan berbilang kursor pada berbilang nama pakej

• ^ ⇧ →, gunakan smart select untuk memilih nama pakej dan ⌘ CSalin

• ⌘ N, buat fail sementara, ⌘ V dan tampalkannya di atas

• dan tetapkan kursor ke baris kedua Pada permulaan baris, ⌘ Alt ↓Tambahkan berbilang kursor pada lajur yang sama di bawah

• Mula-mula⌫, kemudian taip ruang untuk menyalin keseluruhan teks ke terminal



Faktor semula laluan penghala tindak balas kepada penghitungan

Kod asal:

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route index element={<Home />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/collection" element={<Collection />} />
        <Route path="/notFound" element={<NotFound />} />
      </Routes>
    </HashRouter>
  );
}

Bina semula laluan rentetan asal menjadi jenis penghitungan:

export function App() {
  return (
    <HashRouter>
      <Routes>
        <Route index element={<Home />} />
        <Route path={RoutePath.Settings} element={<Settings />} />
        <Route path={RoutePath.Collection} element={<Collection />} />
        <Route path={RoutePath.NotFound} element={<NotFound />} />
      </Routes>
    </HashRouter>
  );
}

enum RoutePath {
  Settings = &#39;/settings&#39;,
  Collection = &#39;/collection&#39;,
  NotFound = &#39;/notFound&#39;,
}

Pilih contoh ini terutamanya kerana arahan pemprosesan teks digunakan semasa operasi . Mari kita atasi masalah kes kerana terdapat terlalu banyak langkah, mari kita tonton demonstrasi animasi:



实现 LetterMapper 类型

在我 TypeScript 类型体操实例解析 这篇文章中有实现过一个将字符串字面量类型中所有字符转换成大写的类型：

type LetterMapper = {
  a: 'A';
  b: 'B';
  c: 'C';
  d: 'D';
  e: 'E';
  f: 'F';
  g: 'G';
  h: 'H';
  i: 'I';
  j: 'J';
  k: 'K';
  l: 'L';
  m: 'M';
  n: 'N';
  o: 'O';
  p: 'P';
  q: 'Q';
  r: 'R';
  s: 'S';
  t: 'T';
  u: 'U';
  v: 'V';
  w: 'W';
  x: 'X';
  y: 'Y';
  z: 'Z';
};

type CapitalFirstLetter<S extends string> = S extends `${infer First}${infer Rest}`
  ? First extends keyof LetterMapper
    ? `${LetterMapper[First]}${Rest}`
    : S
  : S;

这个 LetterMapper 类型手敲会觉得很浪费光阴，让我们用多光标编辑酷炫的实现它：



多光标编辑之外的选择

VSCode 作为编辑器界的新生代王者，集百家之众长，除了多光标编辑还有很多可以提高编码和重构效率的特性。例如：

• F2 重命名符号，批量替换变量名可以的话就不要用多光标编辑
• Snippets，曾经在 twitter 看到有人发帖说写了一下午的 react 组件，结果人家一个 snippet 就整完了
• Code Actions On Save，在保存文件的时候自动添加缺失的 imports，格式化， lint 的 auto fix 等
• Auto fix 和 fix all，如果你用了自动保存就不能用 Code Actions On Save 了，不过你可以手动调用自动修复和修复所有
• 各种格式化扩展，例如使用 prettier 格式化代码风格，JS/TS Import/Export Sorter 格式化 imports

等等。作为一个 VSCode 老玩家，我都觉得 VSCode 还有很多使用的功能特性地方我没探索到。众所周知，折腾编辑器，折腾 shell，折腾系统，是程序员的三大乐趣。充满未知才会有趣，才能让我们热此不疲，让我们每一次发现新大陆的时候感叹自己以前的无知。

总结

多光标编辑是 VSCode 一个非常实用的特性，熟练掌握光标的移动，选中，删除和一些常用的文本处理命令可以让我们使用多光标编辑时更加得心应手。VSCode 的快捷键设计有它的一套自己的设计哲学，理解它不但有助于我们记忆快捷键，也便于在快捷键表中搜索。在我们自定义快捷键或者编写扩展的提供默认快捷键的时候也应该要参考这套哲学。当你觉得对下前编码重构的效率不满意时，不妨折腾下编辑器，也许能够带给你意外的惊喜。

本文完。

更多关于VSCode的相关知识，请访问：vscode教程！！

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menambah dan menggunakan berbilang kursor dalam VSCode. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!