10 Ekstensi VS Code yang Menghemat Waktu Saya Setiap Minggu
Sebagai seorang developer, efisiensi adalah kunci. Setiap detik yang terbuang untuk tugas-tugas repetitif atau mencari solusi dapat diinvestasikan untuk hal yang lebih produktif. Visual Studio Code (VS Code) telah menjadi editor kode pilihan saya, dan bukan hanya karena keringanannya, tetapi juga karena ekosistem ekstensinya yang luas. Dalam artikel ini, saya akan berbagi 10 ekstensi VS Code favorit saya yang secara signifikan meningkatkan produktivitas saya dan menghemat waktu berjam-jam setiap minggu.
Daftar Isi
- Auto Rename Tag
- Emmet
- Prettier – Code formatter
- ESLint
- Bracket Pair Colorizer 2
- Indent-Rainbow
- GitLens — Git supercharged
- VSCode Icons
- Live Server
- REST Client
- Kesimpulan
1. Auto Rename Tag
Deskripsi: Secara otomatis mengubah tag pembuka dan penutup HTML/XML saat Anda mengubah salah satunya.
Mengapa saya menyukainya: Bekerja dengan HTML dan JSX sering kali melibatkan perubahan tag. Tanpa ekstensi ini, mengubah tag pembuka berarti Anda harus mencari dan mengubah tag penutup secara manual, yang memakan waktu dan rentan kesalahan. Auto Rename Tag secara otomatis menjaga tag tetap sinkron, menghilangkan kerumitan itu sepenuhnya.
Contoh:
Bayangkan Anda memiliki:
<div class="container">
<p>Ini adalah paragraf.</p>
</div>
Jika Anda memutuskan untuk mengubah <div> menjadi <section>, ekstensi ini akan secara otomatis mengubah tag penutup juga:
<section class="container">
<p>Ini adalah paragraf.</p>
</section>
Penghematan Waktu: Rata-rata, ekstensi ini menghemat saya sekitar 15-30 menit per minggu, terutama ketika bekerja dengan struktur HTML yang kompleks.
2. Emmet
Deskripsi: Toolkit penting untuk pengembang web yang secara dramatis meningkatkan alur kerja HTML & CSS.
Mengapa saya menyukainya: Emmet adalah game-changer. Ini memungkinkan Anda untuk menulis cuplikan kode HTML dan CSS dengan sintaks yang sangat ringkas, yang kemudian diekspansi menjadi kode lengkap. Saya menggunakannya setiap hari dan tidak dapat membayangkan bekerja tanpa itu.
Contoh:
Ketik ! dan tekan Tab:
!
Emmet akan memperluasnya menjadi struktur HTML dasar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Ketik ul>li*5>a{Item $} dan tekan Tab:
ul>li*5>a{Item $}
Emmet akan memperluasnya menjadi:
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
Penghematan Waktu: Emmet menghemat saya setidaknya 1-2 jam per minggu. Kecepatan yang saya dapatkan dalam menulis HTML dan CSS sangat signifikan.
3. Prettier – Code formatter
Deskripsi: Pemformat kode opini yang mendukung banyak bahasa.
Mengapa saya menyukainya: Konsistensi adalah kunci dalam tim pengembangan. Prettier memastikan bahwa semua kode diformat dengan cara yang sama, terlepas dari preferensi individu. Ini secara otomatis memformat kode saat disimpan, yang menghilangkan perdebatan tentang gaya kode dan membuat basis kode lebih mudah dibaca.
Konfigurasi:
Saya biasanya mengkonfigurasi Prettier dengan pengaturan berikut di file .prettierrc.js:
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2,
};
Ini berarti:
- Menambahkan titik koma di akhir pernyataan.
- Menambahkan koma di akhir item daftar dalam objek dan array.
- Menggunakan tanda kutip tunggal.
- Membungkus baris yang melebihi 120 karakter.
- Menggunakan 2 spasi untuk indentasi.
Penghematan Waktu: Prettier menghemat saya sekitar 30-60 menit per minggu. Saya tidak perlu lagi khawatir tentang pemformatan kode secara manual.
4. ESLint
Deskripsi: Menganalisis kode JavaScript untuk dengan cepat menemukan masalah.
Mengapa saya menyukainya: ESLint lebih dari sekadar pemformat kode; ini adalah linter yang membantu Anda menulis kode JavaScript yang lebih baik. Ini menangkap kesalahan potensial, memperingatkan tentang praktik pengkodean yang buruk, dan memaksa gaya pengkodean yang konsisten. Integrasinya dengan VS Code sangat mulus, dan saya mendapatkan umpan balik langsung tentang kode saya.
Konfigurasi:
Saya biasanya mengkonfigurasi ESLint dengan file .eslintrc.js:
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react', '@typescript-eslint'],
rules: {
'react/react-in-jsx-scope': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
},
settings: {
react: {
version: 'detect',
},
},
};
Konfigurasi ini menggunakan aturan yang direkomendasikan dari ESLint, plugin React, dan plugin TypeScript, serta mengintegrasikan dengan Prettier untuk pemformatan kode.
Penghematan Waktu: ESLint menghemat saya sekitar 1-2 jam per minggu. Ini membantu saya menghindari kesalahan dan menulis kode yang lebih bersih dan mudah dipelihara.
5. Bracket Pair Colorizer 2
Deskripsi: Ekstensi untuk mewarnai pasangan tanda kurung yang cocok.
Mengapa saya menyukainya: Dengan kode yang bersarang dalam, mudah untuk kehilangan jejak tanda kurung yang cocok. Bracket Pair Colorizer 2 menetapkan warna unik untuk setiap pasangan tanda kurung, sehingga jauh lebih mudah untuk melihat struktur kode dan menemukan kesalahan tanda kurung yang hilang atau tidak cocok.
Contoh:
Dengan ekstensi ini, kode seperti:
function myFunction(a, b, c) {
if (a > (b + c)) {
console.log("A lebih besar dari B + C");
} else {
console.log("A tidak lebih besar dari B + C");
}
}
akan memiliki tanda kurung yang berbeda-beda, sehingga lebih mudah dibaca dan dipahami.
Penghematan Waktu: Bracket Pair Colorizer 2 menghemat saya sekitar 15-30 menit per minggu. Ini membantu saya menghindari kesalahan sintaks dan lebih cepat memahami struktur kode.
6. Indent-Rainbow
Deskripsi: Mewarnai indentasi di depan teks, masing-masing indentasi memiliki empat warna berbeda.
Mengapa saya menyukainya: Mirip dengan Bracket Pair Colorizer 2, Indent-Rainbow meningkatkan keterbacaan kode dengan mewarnai indentasi yang berbeda. Ini sangat membantu dalam bahasa seperti Python di mana indentasi signifikan. Ini memudahkan untuk melihat tingkat bersarang kode dan mendeteksi masalah indentasi.
Contoh:
Kode Python seperti:
def my_function():
if True:
for i in range(5):
print(i)
akan memiliki indentasi yang berbeda-beda, sehingga lebih mudah untuk melihat struktur blok kode.
Penghematan Waktu: Indent-Rainbow menghemat saya sekitar 10-20 menit per minggu. Ini sangat membantu saat bekerja dengan kode Python atau bahasa lain yang bergantung pada indentasi.
7. GitLens — Git supercharged
Deskripsi: Supercharge kemampuan Git bawaan VS Code — Visualisasikan kepengarangan kode melalui anotasi salinan & garis kesalahan, dengan mulus menavigasi dan menjelajahi repositori Git, dapatkan wawasan yang berharga, dan banyak lagi.
Mengapa saya menyukainya: GitLens adalah ekstensi Git yang sangat kuat yang menambahkan sejumlah fitur berguna ke VS Code. Ini memungkinkan Anda untuk melihat siapa yang menulis baris kode tertentu, kapan perubahan itu dilakukan, dan mengapa. Ini juga menyediakan alat untuk menavigasi riwayat Git, membandingkan versi, dan banyak lagi. Ini adalah alat yang sangat berharga untuk kolaborasi dan pemeliharaan kode.
Fitur Utama:
- Blame Annotations: Menampilkan informasi tentang penulis dan waktu perubahan pada setiap baris kode.
- Code Lens: Menampilkan informasi Git di atas fungsi dan kelas.
- History Exploration: Memungkinkan Anda untuk menelusuri riwayat Git secara visual.
- Compare Views: Memudahkan untuk membandingkan berbagai versi kode.
Penghematan Waktu: GitLens menghemat saya sekitar 30-60 menit per minggu. Ini membantu saya memahami perubahan kode, melacak kesalahan, dan berkolaborasi dengan lebih efektif.
8. VSCode Icons
Deskripsi: Membawa ikon file dan folder baru ke VS Code.
Mengapa saya menyukainya: Ini mungkin tampak sepele, tetapi ikon yang berbeda untuk berbagai jenis file dan folder dapat membuat perbedaan besar dalam navigasi dan pengenalan. VSCode Icons menambahkan serangkaian ikon yang kaya dan intuitif ke VS Code, membuat proyek terlihat lebih terorganisir dan mudah dinavigasi.
Contoh:
Tanpa ekstensi ini, semua file JavaScript mungkin terlihat sama di penjelajah file. Dengan VSCode Icons, file .js, .jsx, dan .ts akan memiliki ikon yang berbeda, memudahkan untuk membedakannya.
Penghematan Waktu: VSCode Icons menghemat saya sekitar 5-10 menit per minggu. Ini mungkin tidak banyak, tetapi peningkatan kecil dalam efisiensi dapat bertambah seiring waktu.
9. Live Server
Deskripsi: Luncurkan server pengembangan lokal dengan fitur pemuatan ulang langsung atau langsung untuk halaman statis dan dinamis.
Mengapa saya menyukainya: Ketika mengembangkan aplikasi web, Anda ingin melihat perubahan Anda secara real-time. Live Server secara otomatis memuat ulang browser setiap kali Anda menyimpan file, menghilangkan kebutuhan untuk menyegarkan halaman secara manual. Ini adalah penghemat waktu yang besar, terutama ketika mengerjakan perubahan kecil pada antarmuka pengguna.
Cara Menggunakan:
- Instal ekstensi.
- Klik kanan pada file HTML dan pilih “Open with Live Server”.
- Live Server akan memulai server lokal dan membuka file HTML di browser Anda.
- Setiap kali Anda menyimpan perubahan pada file HTML, CSS, atau JavaScript, browser akan otomatis memuat ulang.
Penghematan Waktu: Live Server menghemat saya sekitar 15-30 menit per minggu. Tidak perlu lagi menyegarkan browser secara manual setelah setiap perubahan.
10. REST Client
Deskripsi: Memungkinkan Anda untuk mengirim permintaan HTTP dan melihat respons langsung di VS Code.
Mengapa saya menyukainya: Menguji API seringkali melibatkan penggunaan alat terpisah seperti Postman. REST Client memungkinkan Anda untuk mengirim permintaan HTTP langsung dari VS Code, membuat alur kerja pengujian API jauh lebih efisien. Anda dapat membuat dan menyimpan permintaan, melihat respons, dan dengan mudah mengubah parameter.
Contoh:
Buat file bernama api-request.http dengan konten berikut:
GET https://jsonplaceholder.typicode.com/todos/1
###
POST https://jsonplaceholder.typicode.com/todos
Content-Type: application/json
{
"userId": 1,
"title": "delectus aut autem",
"completed": false
}
Kemudian, klik “Send Request” di atas setiap blok permintaan. REST Client akan menampilkan respons di panel terpisah.
Penghematan Waktu: REST Client menghemat saya sekitar 30-60 menit per minggu. Ini menghilangkan kebutuhan untuk beralih antar aplikasi untuk menguji API.
Kesimpulan
Ekstensi VS Code ini hanyalah beberapa alat yang telah membantu saya meningkatkan produktivitas dan menghemat waktu sebagai developer. Tentu saja, pilihan ekstensi yang tepat akan bervariasi tergantung pada kebutuhan dan preferensi individu. Namun, saya berharap artikel ini telah memberi Anda beberapa ide untuk ekstensi baru untuk dicoba dan lihat apakah mereka dapat meningkatkan alur kerja Anda.
Jangan takut untuk menjelajahi pasar ekstensi VS Code dan bereksperimen dengan alat yang berbeda. Anda mungkin akan terkejut dengan berapa banyak waktu dan usaha yang dapat Anda hemat.
Tips Tambahan:
- Perbarui Ekstensi Secara Teratur: Pastikan Anda selalu menggunakan versi terbaru dari ekstensi Anda untuk mendapatkan perbaikan bug dan fitur baru.
- Nonaktifkan Ekstensi yang Tidak Digunakan: Semakin banyak ekstensi yang Anda instal, semakin lambat VS Code Anda dapat menjadi. Nonaktifkan atau hapus ekstensi yang tidak lagi Anda gunakan.
- Pelajari Pintasan Keyboard: Sebagian besar ekstensi dilengkapi dengan pintasan keyboard untuk fitur-fitur yang paling umum. Mempelajari pintasan ini dapat lebih meningkatkan produktivitas Anda.
Semoga berhasil, dan selamat membuat kode!
“`
