12 Ekstensi Kode VS Terbaik Untuk Meningkatkan Produktivitas Anda

Visual Studio Code adalah salah satu editor kode yang terkenal dan paling banyak digunakan di komunitas pengembang. Alasan popularitasnya adalah banyaknya ekstensi yang mempercepat proses pengembangan. Namun, salah satu hal terbaik tentang kode VS adalah kemampuannya untuk disesuaikan, terutama melalui ekstensi.

Jadi, artikel ini berisi ikhtisar tentang 12 ekstensi terbaik untuk VSCode yang akan membuat Anda menjadi pengembang yang lebih produktif. Berikut daftar ekstensi yang akan kami bahas di artikel ini:

  • Ganti Nama Otomatis Tag
  • Cuplikan
  • GitLens
  • Ikon
  • Biaya Impor
  • Lebih cantik
  • Penurunan harga Semua dalam Satu
  • Komentar yang Lebih Baik
  • Pengalih Profil
  • Pewarna Pasangan Braket
  • Debugger untuk Chrome
  • Sinkronisasi Pengaturan

1. Ganti Nama Otomatis Tag

Teks Alternatif

Seperti namanya, Tag Ganti Nama Otomatis mengganti nama tag kedua saat yang pertama diperbarui dan sebaliknya. Ekstensi ini tidak hanya bermanfaat untuk HTML tetapi juga untuk React karena dilengkapi dengan JSX. Ini adalah ekstensi VS Code yang sangat membantu untuk pengembang web.

2. Cuplikan

Teks Alternatif

Cara terbaik untuk menghemat waktu dan meningkatkan produktivitas adalah dengan menggunakan Cuplikan. Ini bukan satu ekstensi tetapi kumpulan ekstensi dengan berbagai cuplikan untuk beberapa bahasa pemrograman. Beberapa ekstensi cuplikan kode populer meliputi:

  • Python
  • Cuplikan Vue 3
  • Potongan ES7 React / Redux / GraphQL / React-Native
  • Cuplikan HTML
  • Potongan kode JavaScript (ES6)
  • Cuplikan Sudut (versi 11)

3. GitLens

Teks Alt

Dikembangkan dan dikelola oleh Eric Amodio, GitLens adalah ekstensi sumber terbuka untuk Visual Studio Code. Ini menggabungkan kemampuan Git dan VS Code. Oleh karena itu, salah satu fitur terbaik dari ekstensi ini adalah kemampuannya untuk memvisualisasikan penulisan kode melalui anotasi kesalahan Git dan lensa kode. Beberapa fitur penting lainnya meliputi:

  • Anotasi kesalahan bilah status menunjukkan komit dan penulis yang terakhir mengubah baris saat ini.
  • Navigasi revisi halus (mundur dan maju) melalui riwayat file.
  • Anotasi kesalahan baris saat ini bersahaja di akhir baris menunjukkan komit.

4. Ikon

Teks Alternatif

Penggunaan ikon deskriptif dapat membantu Anda membedakan antara file dan folder. Mereka juga membuat pengembangan lebih menyenangkan. Meskipun ada banyak ekstensi ikon yang dapat Anda pilih, ikon berikut ini yang paling populer:

  • Tema Ikon Bahan
  • Ikon sederhana
  • ikon vs-kode
  • Ikon Tema Material

5. Biaya Impor

Teks Alternatif
Ekstensi Biaya Impor menunjukkan kepada Anda perkiraan ukuran paket impor dalam kode Anda. Saat mengerjakan sebuah proyek, penting untuk tidak membahayakan pengalaman pengguna dengan mengimpor paket heft. Anda dapat menghindari ini dengan melacak ukuran dependensi tambahan dalam kode Anda.

Biaya Impor memperingatkan Anda jika impor terlalu besar dengan menyorotinya dengan warna merah. Anda dapat memilih apakah impor harus dianggap kecil, sedang, atau besar.

6. Lebih cantik

Teks Alternatif

Dengan lebih dari 38.5k bintang di GitHub, Prettier adalah salah satu pemformat kode paling populer yang tersedia. Pemformatan dan gaya yang konsisten di seluruh kode Anda dapat menghemat banyak waktu, terutama saat bekerja dengan pengembang lain.

Ekstensi ini kompatibel dengan plugin Prettier saat digunakan dengan versi Prettier yang diselesaikan secara lokal. Anda selanjutnya dapat menyesuaikan ekstensi ini untuk memenuhi kebutuhan pemformatan Anda dan memicunya dengan penyimpanan otomatis.

7. Penurunan Harga Semua dalam Satu

Teks Alternatif

Sejak dirilisnya penurunan harga pada tahun 2004, ini telah menjadi salah satu bahasa markup paling populer. Berkat kesederhanaannya yang ringan dan penggunaan lintas platform, ini banyak disukai oleh penulis teknis. Markdown All in One adalah ekstensi individual yang memenuhi semua kebutuhan penurunan harga Anda, seperti pratinjau otomatis, pintasan, pelengkapan otomatis, dll.

Misalnya, jika Anda ingin menebalkan beberapa teks di Markdown, yang harus Anda lakukan adalah memilih teks dan menekan Ctrl + B.

8. Komentar yang Lebih Baik

Teks Alternatif

Ekstensi Komentar yang Lebih Baik membantu Anda menulis lebih banyak komentar yang ramah manusia di kode Anda. Komentar yang tepat dan mudah dicerna bermanfaat tidak hanya bagi seseorang yang membaca kode Anda, tetapi juga bagi Anda. Bukan hal yang aneh bagi pengembang untuk tersesat dalam kode mereka setelah beberapa waktu. Memiliki komentar deskriptif dapat menghemat banyak waktu Anda dan tim.

Anda dapat mengkategorikan anotasi yang Anda buat dengan Better Comments VS Code menjadi alert, queries, to-dos, highlight, dll. Setelah garis miring ganda (//), Anda dapat menggunakan salah satu karakter berikut.

  • (!) untuk kesalahan dan peringatan
  • (//) untuk dicoret
  • TODO untuk hal yang harus dilakukan
  • (*) untuk teks yang disorot
  • (?) untuk pertanyaan dan pertanyaan

9. Pengalih Profil

Teks Alternatif

Profile Switcher memungkinkan Anda untuk beralih di antara dan mengatur beberapa profil di VS Code dengan pengaturan dan konfigurasi yang berbeda. Anda dapat mengatur pengaturan yang diperlukan profil untuk menampilkan layar VS Code Anda daripada harus mengubah pengaturan Anda setiap saat.

10. Pewarna Pasangan Braket

Teks Alt

Ekstensi Bracket Pair Colorizer mencocokkan tanda kurung yang sesuai dengan warna yang sama. Mungkin membingungkan untuk memiliki banyak tanda kurung, tanda kurung, dll., Dalam file yang berisi komponen, fungsi, objek, dll.

11. Debugger Untuk Chrome

Teks Alt

Debugger untuk Chrome adalah ekstensi yang dikembangkan oleh Microsoft yang memungkinkan Anda men-debug kode JS Anda di VSCode. Ini sangat mulus dibandingkan dengan debugger di IDE lain. Alat ini memungkinkan Anda mengatur titik henti sementara, menelusuri kode, dan men-debug skrip yang ditambahkan secara dinamis.

12. Pengaturan Sinkronisasi

Teks Alternatif

Dengan ekstensi Sinkronisasi Pengaturan, Anda dapat menyinkronkan sebagian besar pengaturan Anda di VSCode ke Github, termasuk pintasan keyboard dan ekstensi lain untuk VSCode.

Dengan melakukan ini, Anda akan memiliki akses ke IDE pilihan Anda di perangkat apa pun yang Anda suka, alih-alih harus bekerja di lingkungan VSCode vanilla di perangkat baru atau harus mengatur semuanya lagi secara manual.

May 28, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *