Clever Geek Handbook

Ekstensi yang tidak diperlukan untuk VS Code

Saya baru-baru ini melihat lebih dekat VS Code dan membuat beberapa temuan menarik. Ternyata, editor memiliki cukup banyak fitur dan pengaturan yang memungkinkan Anda menyelesaikan tugas yang sama dengan sempurna yang dipecahkan oleh banyak ekstensi populer. Di sini kita akan berbicara tentang enam area penerapan ekstensi di mana ekstensi ini dapat diganti dengan mekanisme standar VS Code.











1. Mengganti nama dan menutup tag secara otomatis



Kami berbicara tentang dua kemungkinan. Yang pertama adalah kemampuan untuk mengganti nama tag pembuka dan penutup secara bersamaan. Kedua, kemampuan untuk menutup tag secara otomatis.





Ubah nama tag awal dan akhir secara otomatis



▍Ekstensi



  • Auto Rename Tag (3,3 juta download): Secara otomatis mengganti nama tag HTML / XML yang dipasangkan, seperti yang dilakukan Visual Studio IDE.
  • Auto Close Tag (3,1 juta download): Secara otomatis menutup tag HTML / XML, seperti yang Anda lakukan di Visual Studio IDE atau Sublime Text.


Fitur ▍VS Code



Pengaturan terkait di VS Code memiliki nama yang agak kabur dan tidak bisa dimengerti. Mungkin inilah sebabnya banyak orang tidak dapat menemukannya.



  • Editor: Rename on Type: Mengontrol penggantian nama otomatis tag berpasangan saat Anda memasukkan kode. Standarnya adalah false.


Untuk menemukan pengaturan ini, Anda dapat membuka jendela pengaturan editor ( File > Preferences > Settings) dan memasukkan Editor: Rename on Typepengaturan di bilah pencarian.



Untuk mengaktifkan fitur ini, tambahkan yang berikut ini ke settings.json: 



"editor.renameOnType": true


Sejauh ini hanya file HTML yang didukung, tetapi pelacak proyek memiliki masalah terbuka terkait dukungan file JSX.



VS Code sendiri tidak mungkin mendukung ini untuk file Vue. Mekanisme serupa kemungkinan akan diterapkan di ekstensi Vetur. Tugas terkait telah dibuka di pelacak proyek ini .



2. Sinkronisasi pengaturan



VS Code sekarang mendukung pengaturan sinkronisasi antara komputer yang berbeda. Fitur ini tersedia mulai dengan VS Code Preview 1.48 (rilis Juli 2020).



Saya sekarang mengalami kesempatan ini dan masih belum menemui masalah apa pun.



▍Ekstensi



  • Pengaturan Sinkronisasi (1,8 juta unduhan): Menyinkronkan pengaturan, pintasan keyboard, cuplikan, ekstensi, file launch.json, dan lainnya dari GitHub Gist.


Fitur ▍VS Code



Anda dapat membaca tentang fitur-fitur ini dalam dokumentasi VS Code . Halaman-halaman dengan pengaturan yang sesuai ditunjukkan di bawah ini.





Pengaturan



sinkronisasi Untuk sinkronisasi, Anda dapat menggunakan akun Microsoft atau GitHub, Anda dapat menentukan apa yang perlu disinkronkan.





Memilih objek untuk disinkronkan



3. Mengontrol impor modul



Mengelola impor modul JavaScript dan TypeScript bisa menjadi tugas yang menakutkan, terutama jika Anda perlu mengubah proyek Anda atau mengubah kode Anda. Pengembang berusaha untuk mengotomatiskan ini jika memungkinkan.



▍Ekstensi



  • Impor Otomatis (1,1 juta unduhan): Secara otomatis mencari dan mengurai perintah impor modul, menyediakan mekanisme penyelesaian kode, dan mengaktifkan Tindakan Kode. Mendukung TypeScript dan TSX.
  • Pindahkan TS (unduhan 308K): Memantau pergerakan file TypeScript dan terus memperbarui perintah impor terkait di dalam ruang kerja.
  • Impor Otomatis - ES6, TS, JSX, TSX ( 157 ribu unduhan).


Fitur ▍VS Code



  • JavaScript > Suggest: Auto Imports: Memungkinkan Anda mengaktifkan atau menonaktifkan saran impor otomatis. Membutuhkan penggunaan di ruang kerja TypeScript sejak 2.6.1. Standarnya adalah true.
  • TypeScript > Suggest: Auto Imports: Memungkinkan Anda mengaktifkan atau menonaktifkan saran impor otomatis. Membutuhkan penggunaan di ruang kerja TypeScript sejak 2.6.1. Standarnya adalah true.
  • JavaScript > Update Imports on File Move: Enabled: Memungkinkan Anda memilih cara memperbarui jalur impor modul secara otomatis saat Anda mengganti nama atau memindahkan file dalam VS Code. Membutuhkan penggunaan di ruang kerja TypeScript sejak versi 2.9. Standarnya adalah prompt.
  • TypeScript > Update Imports on File Move: Enabled: Memungkinkan Anda memilih cara memperbarui jalur impor modul secara otomatis saat Anda mengganti nama atau memindahkan file dalam VS Code. Membutuhkan penggunaan di ruang kerja TypeScript sejak versi 2.9. Standarnya adalah prompt.


Beginilah tampilan pengaturan ini di file settings.json: 



"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",


Selain itu, jika Anda ingin mengatur perintah impor saat menyimpan file, Anda memerlukan pengaturan berikut: 



"editor.codeActionsOnSave": {
    "source.organizeImports": true
}


Penggunaannya menghasilkan penghapusan pernyataan impor yang tidak terpakai dan penempatan perintah impor sehingga perintah yang menggunakan jalur absolut menjadi yang pertama. Saya penggemar berat mekanisme semacam itu, yang dapat Anda lupakan begitu Anda mengaturnya.



4. Potongan HTML dan CSS



Anda mungkin memutuskan bahwa berikut ini akan berguna bagi Anda:



  • Gunakan template HTML untuk membuat elemen deskripsi halaman standar dengan cepat.
  • Buat repositori potongan kode yang sering digunakan yang dapat digunakan untuk menghemat waktu.
  • Cara singkat untuk mendeskripsikan blok kode yang besar.


Semua ini serupa, tetapi kemampuan yang sedikit berbeda, yang akan kita bahas di bagian ini.



▍Ekstensi





Fitur ▍VS Code



VS Code memiliki kotak alat Emmet bawaan . Alat ini menawarkan singkatan dan cuplikan untuk HTML dan CSS. Emmet diaktifkan secara default untuk file-file berikut: html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, lessdan stylus. Lihat dokumentasi VS Code untuk detailnya .



Misalnya, untuk menambahkan template HTML markup ke file, Anda hanya perlu memasukkan tanda seru ( !) dan tekan tombol Tab.





Menambahkan HTML Templated ke File



Emmet juga mendukung pintasan untuk memasukkan grup elemen ke dalam dokumen. Strukturnya mirip dengan pemilih CSS.



Misalnya, masukkan konstruksi berikut di file HTML: 



ul>li*5


Mari kita tekan tombolnya Tab. Konstruksi ini akan diubah menjadi kode berikut: 



<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>


Jika Anda masuk ke editor adan mengkliknya Tab, konstruksi akan dimasukkan ke dalam kode <a href="">, dan kursor akan ditempatkan di dalam tanda kutip, sehingga Anda dapat segera memasukkan nilai atribut href.



Ini hanyalah pengantar singkat untuk kemampuan HTML Emmet. VS Code menawarkan kemampuan serupa untuk CSS juga. Di antara fitur-fitur ini, favorit saya adalah prefiks otomatis vendor browser. Anda dapat menemukan detail tentang Emmet dalam dokumentasi untuk toolkit ini. Juga, Anda mungkin menemukan cheat sheet Emmet ini berguna .



Anda dapat menyesuaikan cuplikan yang ada dan membuatnya sendiri dengan mengedit file snippets.json. Dukungan



Emmetbukan hanya HTML dan CSS biasa. Misalnya, untuk menggunakan Emmet saat membangun aplikasi Vue dan saat menulis kode JavaScript, settings.jsonAnda perlu menambahkan yang berikut ini ke: 



"emmet.includeLanguages": {
  "vue-html": "html",
  "javascript":"javascriptreact"
}


Jika Anda ingin mengaktifkan dukungan Emmet untuk penurunan harga, ada satu quirk (atau lebih tepatnya bug ) yang harus Anda waspadai . Itu terletak pada fakta bahwa untuk ini Anda memerlukan emmet.excludeLanguagesarray kosong untuk ditulis: 



"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
  "markdown": "html"
}


Diskusi tentang ini dapat ditemukan di sini .



5. Teks template



Anda mungkin perlu mengisi teks placeholder saat Anda mengerjakan halaman. Ini biasanya dilakukan untuk mengevaluasi tampilan halaman yang berisi beberapa konten. "Lorem ipsum" yang terkenal sering digunakan sebagai teks semacam itu. Ada ekstensi yang memungkinkan Anda menghasilkan teks semacam ini, tetapi VS Code memiliki kemampuan yang sama.



▍Ekstensi





Fitur ▍VS Code



Kami sebutkan di atas bahwa VS Code memiliki kotak alat Emmet bawaan. Emmet memiliki singkatan untuk menghasilkan teks placeholder. Untuk menggunakannya, cukup masuk loremdan tekan tombol Tab. Ini secara otomatis akan menghasilkan paragraf 30 kata.





Memasukkan lorem singkatan Singkatan



ini dapat digunakan tidak hanya saat membuat satu paragraf teks, tetapi juga, misalnya, untuk menghasilkan beberapa blok dari beberapa elemen. Katakanlah sebuah konstruksip*2>loremakan menghasilkan dua elemen yang<p>diisi dengan teks placeholder: 



<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
  molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias
  officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
  Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
  recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at
  neque quos facere sequi unde optio aliquam!
</p>


6. Penghapusan otomatis spasi tertinggal



Biasanya, ekstensi yang sesuai menghapus spasi yang tidak perlu di akhir baris, baik selama pengeditan kode atau atas perintah. Dan pengaturan VS Code yang saya sarankan untuk digunakan alih-alih ekstensi semacam itu dirancang untuk menghapus spasi saat menyimpan file.



▍Ekstensi



  • Trailing Spaces (447K unduhan): Memungkinkan Anda untuk menyorot dan menghapus spasi tambahan.
  • Autotrim (15.000 unduhan): Deskripsi untuk ekstensi ini mengatakan yang berikut: “Spasi tambahan sering kali muncul setelah kode pengeditan, setelah menghapus konstruksi di akhir baris, setelah melakukan tindakan serupa lainnya. Ekstensi ini memantau proses pengeditan kode, ia mengingat nomor baris di mana kursor aktif berada. Setelah tidak ada lagi kursor aktif di baris ini, tab dan spasi di belakangnya akan dihapus. "


Fitur ▍VS Code



  • Files : Trim Trailing Whitespace: Jika diaktifkan, ini akan menghapus spasi tambahan saat menyimpan file. Standarnya adalah false.


Untuk mengaktifkan fitur ini, settings.jsonAnda dapat menambahkan yang berikut ini ke: 



"files.trimTrailingWhitespace": true


Hasil



Sebelum Anda, ketika dihadapkan pada kebutuhan untuk memecahkan masalah di VS Code, mulailah mencari ekstensi yang sesuai, cari tahu apakah ada alat untuk menyelesaikan masalah Anda di antara fitur standar VS Code. Tampaknya cukup jelas, tetapi kita semua mungkin terkadang melakukan yang sebaliknya. Fitur baru muncul di VS Code secara teratur, jadi sebaiknya periksa changelog untuk editor tersebut dari waktu ke waktu.



Jika memungkinkan, apakah Anda berusaha untuk menggunakan fitur standar VS Code daripada ekstensi?





More articles:


All Articles