27 alat VS Code yang mengagumkan untuk pengembang JavaScript modern

Visual Studio Code (juga dikenal sebagai VS Code dan VSCode) adalah editor kode lintas platform yang hemat biaya namun kuat yang dirancang sebagai aplikasi desktop. Menurut penulis materi, terjemahan yang kami terbitkan hari ini, VS Code mendukung banyak alat pengembangan - seperti TypeScript dan debugger Chrome. Ini, serta fakta bahwa sejumlah besar ekstensi open source telah ditulis untuknya, menjadikan VS Code editor yang sangat populer dan dicintai oleh banyak orang.



Jika Anda ingin menambahkan sesuatu yang baru ke gudang programmer-JavaScript Anda - penulis materi berharap Anda akan menemukan sesuatu di sini yang berguna bagi Anda. Tidak semua dari dua puluh tujuh alat yang diulas di sini dimaksudkan hanya untuk pengembangan JS. Tetapi semuanya dapat berhasil diterapkan oleh mereka yang menulis dalam JavaScript.

1. Cuplikan Proyek

Ekstensi Cuplikan Proyek , favorit saya sepanjang masa, didasarkan pada alat Cuplikan Pengguna yang tertanam dalam VS Code.

Jika Anda tidak terbiasa dengan fitur Kode VS standar ini, maka ketahuilah bahwa itu memungkinkan pengguna untuk merancang fragmen kode mereka sendiri dalam bentuk yang disebut snippet. Ini dilakukan untuk menggunakannya kembali dalam proyek mereka. Apa yang dimaksud dengan menggunakan kembali?

Pertimbangkan sebuah contoh. Misalkan Anda menemukan bahwa Anda sering harus menulis kode boilerplate yang sama. Sebagai contoh - ini:

import { useReducer } from 'react' const initialState = {   // } const reducer = (state, action) => {   switch (action.type) {     default:       return state   } } const useSomeHook = () => {   const [state, dispatch] = useReducer(reducer, initialState)   return {     ...state,   } } export default useSomeHook 

Kode serupa dapat dikeluarkan dalam bentuk cuplikan. Akibatnya, alih-alih memasukkan semua ini dari keyboard (atau menyalin dari suatu tempat), Anda hanya perlu memasukkan awalan yang disebut, setelah itu kode yang sesuai dengan awalan ini akan muncul di editor.

Jika Anda, dalam Kode VS, buka File > Preferences > User Snippets , maka Anda dapat secara opsional membuat New Global Snippets File global baru dengan memilih New Global Snippets File .

Misalnya, untuk membuat file snippet baru untuk Bereaksi proyek yang menggunakan TypeScript, Anda dapat memilih New Global Snippets File dan mengatur nama file sebagai typescriptreact.json . File .json baru dibuat akan dibuka di editor, di mana dimungkinkan untuk menggambarkan cuplikan.

Buat cuplikan berdasarkan fragmen kode di atas. Untuk melakukan ini, file typescriptreact.json harus dikonversi ke yang berikut:

 {  "const initialState = {}; const reducer = (state, action)": {    "prefix": "rsr",    "body": [      "const initialState = {",      " //$1",      "}",      "",      "const reducer = (state, action) => {",      " switch (action.type) {",      "  default:",      "   return state",      " }",      "}"    ]  } } 

Sekarang file memiliki deskripsi potongan, Anda dapat membuat file TypeScript baru dengan ekstensi .tsx dan masukkan awalan rsr di dalamnya. Ini akan menyebabkan popup dengan deskripsi snippet. Menekan Tab menyelesaikan prosedur untuk memasukkan potongan ke file. Itu akan diwakili oleh kode berikut:

 const initialState = {  // } const reducer = (state, action) => {  switch (action.type) {    default:      return state  } } 

Beberapa ketidaknyamanan menggunakan cuplikan global adalah bahwa mereka tersedia untuk semua proyek yang Anda kembangkan (namun, dalam beberapa kasus, untuk cuplikan tujuan umum, ini, sebaliknya, nyaman). Tetapi beberapa proyek dapat dikonfigurasi dengan cara khusus. Akibatnya, jika apa yang digunakan dalam proyek seperti itu tidak diperlukan di semua proyek, file snipet global mungkin bukan solusi terbaik untuk masalah pemrosesan fragmen kode yang dapat digunakan kembali.

Misalkan suatu proyek menggunakan struktur folder khusus. Untuk menyederhanakan pekerjaan pada proyek ini, sesuatu yang mirip dengan kode berikut dapat disiapkan dalam file typescriptreact.json :

 {  "import Link from components/common/Link": {    "prefix": "gcl",    "body": "import Link from 'components/common/Link'"  },  "border test": {    "prefix": "b1",    "body": "border: '1px solid red',"  },  "border test2": {    "prefix": "b2",    "body": "border: '1px solid green',"  },  "border test3": {    "prefix": "b3",    "body": "border: '1px solid magenta',"  } } 

Perhatikan potongan pertama. Mungkin cocok untuk proyek dengan folder dan struktur file tertentu. Tetapi bagaimana jika kita sedang mengerjakan proyek lain di mana komponen Link terletak di sepanjang jalur seperti components/Link ?

Lihatlah cuplikan lainnya. Mereka menggunakan tanda kutip tunggal. Penggunaannya mengarah ke tampilan struktur seperti border: '1px solid red' dalam kode.

Konstruksi seperti itu dapat digunakan dengan sempurna dalam JavaScript. Tetapi bagaimana jika kita menggunakan perpustakaan komponen-gaya sebagai alat untuk menata proyek? Dalam hal ini, sintaksis seperti itu tidak cocok untuk kita. Memang, komponen yang ditata menggunakan konstruksi CSS biasa!

Faktanya, di sini ekstensi Cuplikan Proyek datang untuk membantu kami.

Ekstensi ini memungkinkan Anda untuk membuat cuplikan yang beroperasi di tingkat proyek atau ruang kerja. Cuplikan seperti itu tidak bertentangan dengan cuplikan yang dibuat untuk proyek lain dan tidak mengganggu bekerja dengan mereka. Sangat nyaman.

2. Komentar yang Lebih Baik

Jika Anda suka menulis komentar dalam kode Anda, maka Anda mungkin dihadapkan pada kenyataan bahwa kadang-kadang tidak mudah untuk menemukan komentar yang ditulis sekali dahulu. Alasannya mungkin karena kode ini dapat bertambah sedikit.

Menggunakan ekstensi Komentar yang Lebih Baik , Anda dapat menyorot komentar dalam berbagai warna.


Menggunakan Ekstensi Komentar yang Lebih Baik

Sekarang, antara lain, jika Anda mengerjakan kode dalam tim, akan lebih mudah bagi Anda untuk menarik perhatian pengembang lain terhadap komentar penting yang dimulai dengan ! atau ? .

3. Bracket Pair Colorizer

Ketika saya kebetulan melihat tangkapan layar untuk pertama kalinya dengan hasil ekstensi Bracket Pair Colorizer , menjadi jelas bagi saya bahwa ekstensi ini harus muncul di kotak alat saya.

Pemrograman adalah hasrat saya, dan menyoroti tanda kurung adalah sesuatu yang pasti membantu saya lebih menikmati kegiatan ini.


Menggunakan Ekstensi Colorizer Bracket Pair

4. Tema Material

Tema Material, diperkenalkan oleh ekstensi Theme Material , adalah fenomena muluk yang sekarang tersedia untuk para penggemar VS Code. Penggunaannya memungkinkan Anda membawa kode ke formulir berikut.


Membuat kode menggunakan tema Material

Ini harus menjadi salah satu topik terbaik yang ada.

5. @ typescript-eslint / parser

Jika Anda menulis dalam TypeScript, Anda mungkin harus mempertimbangkan untuk mengalihkan konfigurasi TSLint Anda ke typescript-eslint. Faktanya adalah bahwa, menurut beberapa laporan , dukungan TSLint Palantir akan dihentikan setelah beberapa waktu. Alih-alih TSLint, typescript-eslint akan digunakan di sana.

Proyek secara bertahap beralih ke menggunakan paket @ typescript-eslint / parser dan paket terkait. Hal ini dilakukan sebagai upaya untuk mempersiapkan perubahan di masa depan dalam ekosistem pengembangan TS. Jika Anda suka Prettier , maka Anda dapat menggunakan alat ini, menggunakan sebagian besar aturan ESLint.

6. Stylelint

Stylelint adalah alat yang selalu digunakan dalam proyek saya. Ini benar karena beberapa alasan:

• Ini membantu untuk menghindari kesalahan.
• Ini mempromosikan konvensi penataan ketika menulis CSS.
• Ini bekerja dengan baik dengan Prettier.
• Ini mendukung CSS / SCSS / Sass / Kurang.
• Ini mendukung plugin yang dibuat oleh komunitas pengembang.

7. Markdownlint + mendokumentasikan

Saya tidak tahu bagaimana pengembang lain membuat catatan selama sesi brainstorming, tapi saya suka membuat catatan dalam format penurunan harga . Ini adalah format yang sederhana dan nyaman. Ada banyak alat yang tersedia untuk membantu Anda menulis teks penurunan harga. Di antara alat-alat ini, markdownlint dapat dicatat.

Ini adalah ekstensi Kode VS, yang merupakan linter yang membantu memverifikasi gaya dalam file .md . Ini juga mendukung pemformatan teks menggunakan Prettier.

Selain itu, saya biasanya menggunakan dokumen di semua proyek saya. Alat ini mendukung format Penurunan harga dan fitur berguna lainnya.

8. Sorotan TODO

Saya memiliki kebiasaan menulis catatan langsung dalam kode tentang apa yang perlu dilakukan dalam proyek. Akibatnya, saya tertarik dengan ekstensi seperti TODO Highlight . Ekstensi ini membantu Anda bekerja dengan catatan TODO.

9. Biaya Impor

Perpanjangan Biaya Impor termasuk dalam kategori alat yang kemanfaatannya dapat dirasakan saat pertama kali digunakan. Namun, setelah menggunakan alat serupa untuk beberapa waktu, mungkin ternyata tidak perlu lagi. Faktanya adalah bahwa seiring waktu, pengembang sudah tahu persis informasi apa yang akan memberikan alat seperti itu. Namun, saya masih menyarankan menggunakan ekstensi ini untuk sementara waktu. Mungkin itu akan menguntungkan Anda.

10. Sorot Tag Pencocokan

Terkadang pencarian untuk bagian penutup dari tag tertentu dapat berubah menjadi tugas yang sulit. Dalam kasus seperti itu, ekstensi Tag Pencocokan Sorotan mungkin berguna.


Menggunakan Ekstensi Tag Pencocokan Sorotan

11. vscode-spotify

Terkadang saya bosan dengan kenyataan bahwa dalam proses bekerja di VS Code saya harus terus-menerus beralih ke pemutar musik untuk beralih trek, dan kemudian kembali ke bisnis saya lagi.

Ekstensi vscode-spotify , yang memungkinkan Anda untuk mengontrol pemain Spotify langsung dari VS Code, membantu saya memecahkan masalah ini.

Berkat ekstensi ini, Anda dapat melihat informasi tentang lagu yang diputar di bilah status editor. Anda dapat menggunakan tombol cepat untuk mengganti rekaman; Spotify juga dapat dikontrol dari tombol VS Code menggunakan tombol.

12. GraphQL untuk VSCode

Teknologi GraphQL semakin populer, contoh-contoh aplikasinya dapat dilihat di hampir semua sudut pengembangan JavaScript. Oleh karena itu, banyak kemungkinan besar yang berguna untuk menemukan ekstensi GraphQL untuk VSCode .

Ekstensi ini mendukung penyorotan, linting, penyelesaian kode GraphQL.

Saya banyak menggunakan Gatsby, jadi saya harus membaca kode GraphQL setiap hari. Ekstensi GraphQL untuk VSCode membantu saya dalam hal ini.

13. Indent-Rainbow

Ekstensi Indent-Rainbow mirip dengan ekstensi Tag Pencocokan Sorotan yang dijelaskan di atas. Jika terkadang tidak mudah bagi Anda untuk memahami lekukan, ekstensi ini akan membantu Anda mengatasi masalah dengan meningkatkan keterbacaan kode. Berikut ini adalah contoh penggunaannya.


Menggunakan Ekstensi Indent-Rainbow

14. Sorotan Warna

Sorotan Warna adalah salah satu ekstensi yang saya tanyakan: "Di mana Anda menemukannya?". Ekstensi ini membantu dalam bekerja dengan warna. Seperti di bawah ini.


Menggunakan Color Highlight Extension

15. Pemilih Warna

Color Picker adalah ekstensi untuk VS Code yang menawarkan pengguna antarmuka grafis untuk membantu Anda memilih warna untuk digunakan dalam CSS.

16. SISA Klien

Ketika saya memiliki kesempatan untuk mencoba ekstensi REST Client untuk pertama kalinya, tampaknya bagi saya tidak terlalu berguna. Itu tidak bisa dibandingkan dengan sesuatu seperti Postman .

Namun secara bertahap ternyata ekspansi ini memiliki dampak positif yang sangat besar pada pekerjaan saya. Terutama ketika saya perlu menguji API tertentu.

Saat bekerja dengannya, cukup, misalnya, untuk membuat file baru di mana hanya akan ada satu baris:

 https://google.com 

Untuk menjalankan permintaan HTTP GET di alamat ini, pilih saja, pergi ke bilah perintah ( CTRL + SHIFT + P ), dan pilih Rest Client: Send Request perintah Rest Client: Send Request . Setelah itu, tab baru akan dibuka, di mana segera informasi tentang permintaan dan respons akan muncul. Ini sangat membantu.


Menggunakan REST Client Extension

Ekstensi ini juga memungkinkan Anda mengonfigurasi parameter atau data untuk permintaan POST. Ini dilakukan hanya dengan beberapa baris kode:

 POST https://test.someapi.com/v1/account/user/login/ Content-Type: application/json { "email": "someemail@gmail.com", "password": 1 } 

Konstruksi seperti itu akan mengarah pada permintaan POST dengan parameter { "email": "someemail@gmail.com", "password": 1 } .

Dan ini, pada kenyataannya, hanya deskripsi yang sangat singkat tentang kemungkinan perluasan ini.

17. Pengaturan Sinkronisasi

Saya benar-benar tidak suka, ketika mengatur tempat kerja baru, untuk membuat daftar ekstensi yang saya gunakan, kemudian menyimpannya di sesuatu seperti Evernote , lalu secara manual mengembalikan semuanya.

Saya dapat mengotomatiskan proses ini menggunakan ekstensi Pengaturan Sync .

Untuk menggunakannya, Anda hanya perlu memiliki akun gist / GitHub . Jika menjadi perlu untuk menyimpan pengaturan (ini termasuk binding keyboard, snippet, dan ekstensi, dan banyak lagi) - cukup gunakan kombinasi tombol SHIFT + ALT + U Ini akan memuat semua pengaturan ini ke akun inti. Namun, mereka hanya akan tersedia untuk pemegang akun. Untuk mengunduh pengaturan, misalnya, saat beralih ke komputer baru, cukup instal ekstensi ini, masukkan informasi akun inti dan gunakan kombinasi tombol SHIFT + ALT + D

18. Todo Tree

Ekstensi Todo Tree membantu Anda menemukan komentar TODO dalam kode proyek Anda. Ini mempersiapkan komentar-komentar ini dalam format pohon yang ditampilkan di sisi kiri layar.


Menggunakan Todo Tree Extension

19. Toggle Quotes

Toggle Quotes adalah ekstensi menarik yang memungkinkan Anda mengubah tampilan kutipan yang digunakan dalam kode. Ternyata menjadi sangat berguna, misalnya, dalam kasus di mana Anda perlu mengubah kutipan reguler menjadi backticks (backticks). Ini mungkin diperlukan saat interpolasi string, dan ini bisa sangat berguna ketika string bergaya Prettier menggunakan tanda kutip tunggal biasa.


Menggunakan Toggle Quotes Extension

20. Align Lebih Baik

Ekstensi Better Align memungkinkan Anda untuk menyelaraskan kode tanpa terlebih dahulu menyorotinya.

Untuk menggunakan ekstensi ini, Anda harus meletakkan kursor dalam kode yang akan disejajarkan, buka bilah perintah (menggunakan CTRL + SHIFT + P atau pintasan keyboard yang Anda tetapkan untuk melakukan tugas ini) dan panggil perintah Align .

21. Tag Tutup Otomatis

Ekstensi Tag Tutup Otomatis telah membantu saya sejak hari saya mulai bekerja di VS Code. Ini memungkinkan Anda untuk memasukkan sesuatu seperti <div> , lalu ikon / , dan kemudian secara otomatis menutup tag.

Fungsi sederhana dan nyaman ini tidak ada dalam fitur standar VS Code, jadi saya menemukan ekstensi ini sangat berguna.

22. Urutkan Garis

Saya tidak suka array yang elemennya tidak dalam urutan abjad. Ekstensi Sort Lines membantu saya menangani masalah ini dengan cepat. Jika Anda juga tidak suka array seperti itu - mungkin berguna untuk Anda.

23. VSCode Google Translate

Mungkin saya satu-satunya orang yang menganggap ekstensi Google Translate VSCode bermanfaat. Tetapi itu membantu saya, karena saya harus ikut serta dalam proyek-proyek yang membuat orang-orang yang berbicara dalam berbagai bahasa berbeda. Ekstensi ini dapat bermanfaat bagi mereka yang, untuk menerjemahkan sesuatu, tidak ingin menutup VS Code.

24. Lebih cantik

Prettier adalah ekstensi untuk VS Code yang dapat secara otomatis memformat kode yang ditulis dalam JavaScript, TypeScript dan bahasa lainnya.

25. Tema Ikon Bahan

Saya suka ikon dari paket Material Icon Theme lebih dari yang lain. Menggunakannya jauh lebih mudah untuk membedakan antara jenis file. Ini terutama berlaku untuk kasus-kasus di mana tema gelap digunakan dalam VS Code.

26. IntelliSense untuk nama-nama kelas CSS dalam HTML

Ekstensi nama panjang IntelliSense untuk nama-nama kelas CSS dalam HTML memungkinkan Anda untuk melengkapi VS Code dengan kemampuan untuk secara otomatis melengkapi nama-nama kelas CSS dalam atribut HTML kelas . Karyanya didasarkan pada definisi kelas yang ditemukan di ruang kerja Anda.

27. Jalan Intellisense

Ekstensi Path Intellisense membantu melengkapi entri nama file secara otomatis.

Ringkasan

Kami berharap di antara ekstensi untuk Kode VS yang baru saja Anda baca, ada sesuatu yang berguna bagi Anda.

Pembaca yang budiman! Ekstensi apa untuk VS Code yang akan Anda tambahkan ke yang dibahas dalam artikel ini?