🏂🏽 💯 👨🏿‍🤝‍👨🏼 Pekerjaan profesional di VS Code: 4 tips 🤕 🦌 🙎

VS Code adalah salah satu editor kode paling populer saat ini. Pendekatan bijaksana untuk menggunakan editor ini dapat meningkatkan produktivitas programmer secara signifikan. Artikel ini memberikan beberapa tip untuk penggunaan profesional VS Code. Semoga tips ini bermanfaat.

1. Menggunakan banyak kursor

Mungkin saja seorang programmer perlu memasukkan teks yang sama di beberapa tempat pada waktu yang sama.

Misalnya, dalam kode berikut, Anda menambahkan atribut class=«odd»ke elemen pertama, ketiga, dan kelima <li>. Dan untuk elemen kedua, keempat dan keenam Anda perlu menambahkan atribut class=«even».

<ul>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
</ul>

Beginilah seharusnya editor di editor.

Kode di editor

Bagaimana mengatasi masalah ini? Saya biasa melakukannya seperti ini: Saya memasukkan sesuatu seperti teksclass=«odd»di satu tempat dan kemudian menyalinnya ke clipboard dan menempelkannya di mana pun saya membutuhkannya. Namun, setelah saya mempelajari tentang kemampuan untuk bekerja dengan banyak kursor di VS Code, saya berhenti melakukan itu. Ini sangat meningkatkan efisiensi pekerjaan saya.

Secara khusus, kita berbicara tentang yang berikut ini. Untuk menambahkan beberapa kursor ke teks, Anda perlu menahan tombolAltpada keyboard (di macOS - tombolOption) dan mengklik tempat kursor akan muncul. Setelah itu, semua yang masuk dari keyboard akan muncul secara bersamaan di mana pun ada kursornya.

Menggunakan beberapa kursor

Izinkan saya mengingatkan Anda bahwa kita berbicara tentang pintasan keyboard berikut:

Windows: Alt+ .
MacOS: Option+ .

2. Mengganti nama entitas dan perintah Ubah Nama Simbol

Sekarang mari pelajari trik sederhana lainnya.

Saat memasukkan kode atau teks dokumen, Anda mungkin mengalami kesalahan dalam ejaan kata. Atau mungkin Anda perlu menerapkan konvensi penamaan entitas baru dalam kode Anda. Dalam situasi seperti ini, penting untuk memproses banyak baris pada saat yang bersamaan.

Bayangkan kita memiliki kode yang mirip dengan yang di bawah ini. Kita perlu mengganti semua kejadian foodengan bar. Bagaimana cara melakukannya?

function foo(){
  // ...
}
foo();
foo();
foo();

Jika Anda mengubah setiap baris secara manual, pendekatan ini memiliki beberapa kelemahan:

Terlalu banyak pekerjaan manual.
Kemungkinan kesalahan yang tinggi.

Untuk mengatasi masalah ini, Anda dapat menggunakan perintah menu konteks Rename Symbol.

Menggunakan

perintah menu Ubah Nama Simbol Menu ini dipanggil saat Anda mengklik kanan pada teks yang dipilih. Cara lain untuk menjalankan perintah ini adalah dengan menekan F2setelah memilih teks yang akan diedit.

3. Pindahkan baris yang dipilih ke atas dan ke bawah

Terkadang Anda perlu memindahkan beberapa jenis kode program atau teks biasa ke atas atau ke bawah dalam dokumen. Masalah ini bisa diselesaikan seperti ini:

Pilih teksnya.
Di Windows, kami akan menggunakan pintasan keyboard Alt+ untuk memindahkan teks ke atas. Untuk memindahkan teks ke bawah, gunakan pintasan keyboard Alt+ .
Di macOS, kuncinya Altadalah kunci Options.

Seperti inilah kelihatannya.

Memindahkan teks ke atas dan ke bawah

Dengan pendekatan ini, Anda dapat dengan cepat dan mudah mengubah urutan teks.

4. Cuplikan

Saat kami menulis kode, kami terus-menerus harus memasukkan konstruksi berulang yang sama dari keyboard.

Misalnya, file HTML5 selalu berisi struktur dokumen dasar berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

Dan saat menulis untuk loop di JavaScript, kami selalu memasukkan potongan kode berikut:

for(let i = 0; i < ; i++){
  
}

Masih banyak lagi contoh serupa. Jika Anda harus memasukkan potongan kode ini secara manual, melakukannya kapan pun Anda membutuhkannya, itu akan sangat tidak efisien.

Untungnya, VS Code memberi kita mekanisme penyelesaian otomatis yang dapat dikonfigurasi. Seperti inilah kelihatannya.

Pelengkapan Otomatis

Mari kita bicara tentang cara mengatur Kode VS dan mendapatkan apa yang ditunjukkan pada gambar sebelumnya.

▍Membuat file konfigurasi

Untuk menyiapkan pelengkapan otomatis di VS Code, Anda harus membuat file konfigurasi yang sesuai terlebih dahulu. Editor membaca file ini menggunakan mekanisme yang sesuai. Untuk membuat file ini, Anda perlu masuk ke menu, seperti yang ditunjukkan pada gambar berikut Code > Preferences > User Snippets.

Perintah Menu Cuplikan Pengguna

Panel berikut akan muncul.

Panel untuk bekerja dengan cuplikan

Di sini Anda dapat memilih file konfigurasi yang ada dan mengeditnya. Anda juga dapat membuat file konfigurasi baru di sini. Kami akan melakukan itu.

Memilih perintah di siniNew Global Snippets fileakan membuat file konfigurasi yang tersedia secara global. Jika Anda memilih perintah tampilanNew Snippets file for 'test', file akan dibuat yang tersedia secara lokal di ruang kerja saat ini.

Kami akan membuat file lokal.

Setelah memilih perintah,New Snippets file for 'test'sistem akan menanyakan nama file.

Memasukkan nama

file baru Kami telah membuat file konfigurasi, tetapi sejauh ini kosong.

File konfigurasi kosong baru

Demi kenyamanan Anda, saya telah merekam seluruh proses yang dijelaskan di atas dan menyajikannya di sini sebagai file gif animasi.

Membuat file konfigurasi baru

▍Membuat cuplikan

File konfigurasi menyimpan data dalam format JSON. Berikut adalah contoh isinya.

Isi dari file konfigurasi

Ini sama, tetapi dalam teks biasa:

{
 "html5 autocomplete": {
  "prefix": "html5",
  "body": [
   "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "  <title></title>",
      "</head>",
      "<body>",
      "</body>",
      "</html>"
  ]
 }
}

Pertama, mari kita lihat lapangannya «html5 autocomplete». Arti dari field ini hanya untuk menginformasikan programmer tentang tujuan dari potongan tersebut. Anda dapat menambahkan apapun di sini.

Mari kita cari tahu sekarang dengan bidangnya «prefix»: «html5». Ini dimaksudkan untuk mendeskripsikan singkatan yang kita tetapkan, yang diperluas oleh editor menjadi sebuah fragmen kode. Saat kita memasukkan teks di editor html5, editor secara otomatis menggantinya dengan apa yang ditentukan di elemen «body».

Elemen«body»: […]berisi kode yang harus dimasukkan editor ke dalam dokumen sebagai ganti awalan yang kita masukkan. Karena kode ini dapat terdiri dari banyak baris, bidang ini diwakili oleh larik. Setiap elemen dalam array adalah satu baris kode. Jika kita "menerjemahkan" konstruksi yang baru saja kita pertimbangkan ke dalam bahasa kode-HTML biasa, maka ternyata setara dengan berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

Sekarang kita memiliki file konfigurasi sederhana yang kita inginkan, mari kita uji.

Menguji file konfigurasi

▍ Cuplikan cakupan

Kami memastikan bahwa file konfigurasi kami mengizinkan penyelesaian otomatis. Tetapi itu memiliki satu kelemahan. Faktanya adalah bahwa konstruksi yang diwakili oleh awalan html5hanya digunakan dalam file HTML. Kami tidak membutuhkan konstruksi ini di file JavaScript.

Dalam kasus seperti itu, kemampuan untuk menentukan cakupan cuplikan sangat berguna. Yaitu, kita berbicara tentang bidang «scope»: «html»yang perlu ditambahkan ke deskripsi potongan.

Membatasi ruang lingkup cuplikan ke file HTML.

Mari coba sistem kita lagi. Mari kita coba awalanhtml5di file HTML dan di file JS.

Menguji cuplikan di file HTML dan JS

Dalam file JS, seperti yang Anda lihat, masukanhtml5tidak menghasilkan sesuatu yang istimewa. Dan inilah yang kita butuhkan.

▍Kursor

Mari kita coba pelengkapan otomatis pada file yang baru kita buat lagi. Mari kita lihat lebih dekat. Apakah ada kekurangan di dalamnya?

Investigasi penyelesaian otomatis input Anda

dapat melihat bahwa setelah memasukkan satu blok kode ke editor, kursor secara otomatis memasuki akhir blok ini. Namun blok kode yang secara otomatis dimasukkan ke dalam dokumen tersebut hanyalah sebuah blanko yang masih perlu dikerjakan. Secara khusus, Anda perlu memasukkan konten tag <title>.

Mekanisme pelengkapan otomatis kami akan jauh lebih nyaman jika kursor diposisikan secara otomatis di antara bagian pembuka dan penutup tag <title>.

Untuk melakukan ini, kita dapat menggunakan konstruksi khusus di file konfigurasi $0. Seperti inilah kelihatannya.

Mengatur lokasi kursor

Sekarang, setelah kode ada di dokumen, kursor secara otomatis diposisikan di tempatnya di file konfigurasi$0.

Kursor diposisikan di lokasi yang diinginkan

▍ Contoh

Sekarang, untuk memperkuat apa yang baru saja kita pelajari, mari kita lihat contoh baru.

Kami foriingin konstruksi berikut muncul secara otomatis setelah memasukkan teks dalam file JavaScript atau TypeScript :

for(let i = 0; i < ; i++){
}

Dan juga - sehingga kursor akan secara otomatis diposisikan setelahnya i <.

Anda belum perlu melihat solusi untuk masalah ini. Cobalah untuk menyelesaikannya sendiri.

Secara umum, solusi untuk masalah ini dapat diwakili oleh file konfigurasi berikut:

{
 "for-i loop": {
    "prefix": "fori",
    "scope": "javascript, typescript",
    "body": [
      "for(let i = 0; i < $0; i++){",
      "}"
    ]
 }
}

Berikut demo nya.

Menggunakan potongan fori Snippet

digunakan dengan cara ini. Saya telah berbicara banyak tentang ini karena cuplikan adalah salah satu fitur favorit saya dari VS Code. Saya pikir ini akan berguna juga untuk Anda. Sebelumnya, ketika saya menemukan potongan kode duplikat, saya harus menyalinnya dari file yang sudah memilikinya. Ini adalah proses yang lambat dan rawan kesalahan. Dan sekarang, berkat kemampuan untuk memformat fragmen kode seperti cuplikan, tugas memasukkan fragmen kode berulang menjadi jauh lebih mudah.

Fitur apa yang dimiliki VS Code untuk membantu Anda dalam pekerjaan sehari-hari?

Pekerjaan profesional di VS Code: 4 tips