15 Rekomendasi Extension VSCode
Text editor merupakan salah satu tools yang wajib dimiliki oleh seorang programmer atau developer, tanpa text editor programmer atau developer akan kesusahan dalam membangun atau mengembangkan suatu aplikasi maupun website.
Saat sekarang ini sudah banyak text editor yang membantu para developer dalam membangun dan mengembangkan aplikasi, seperti:
- Notepad++
- Sublime Text 3
- Atom
- IntelliJ IDEA
- Visual Studio Code
- dst.
Dari tiap-tiap text editor memiliki kelebihan dan kekurangannya masing-masing, seperti Notepad++ ( ringan tapi gk ada autocomplete ), Sublime text 3 ( highlight code nya udah lumayan bagus dibanding notepad++ tapi autocomplete nya masih ngebaca local file ), Atom ( highlight nya bagus, autocomplete bagus, tetapi rada berat ), intellij ( highlight, autocomplete bagus akan tetapi berbayar untuk mencoba fitur ultimate text editor ), Visual Studio Code ( highlight, autocomplete, dan bagus utk development JS / TS ).
Visual Studio Code dibangun oleh Microsoft dan text editor ini bersifat Open Source, yang mana kita bisa berkontribusi dalam mengembangkannya.
Tema yang saya gunakan dalam mengembangkan aplikasi menggunakan VS Code
- One Dark Pro
- Font FiraCode
- Material Icon Theme
One Dark Pro
Ekstensi highlighting ini sangat membantu saya dalam hal memisahkan warna di setiap variable, function, class dan lainnya.
Font FiraCode
Font dari FiraCode ini memberikan kesan yang menarik karna stuktur fontnya mengikuti rules programmer misalkan simbol ( -> ) pada font firacode simbol ini akan berubah menjadi tanda panah, dari situ cukup membantu dan unik aja gitu.
tonskyMaterial Icon Theme
Material Icon ini cukup banyak icon-icon yang ada, jadi ketika membuat sebuah folder yang udah nge tag si icon nya, folder tersebut akan mendapatkan icon yang diharapkan.
Adapun ekstensi VS Code yang dapat memudahkan kerjaan mu, yakni:
- Gitlens
- File Utils
- Visual Studio IntelliCode
- Sublime Text Keymap
- Prettier
- Eslint
- ES7 React / Redux / GraphQL / React-Native Snippet
- dotENV
- Docker
- Wakatime
- CodeSnap
- Conventional Commits
- Google Cloud Code
- Pretty TypeScript Errors
- Resource Monitor
Git Lens
Dengan Gitlens kita bisa lihat perubahan codingan di line tertentu / di file tertentu, dan masih banyak fungsi lainnya.
File Utils
Dengan File Utils memiliki fungsi yang sangat bermanfaat, seperti ( file delete, file duplicate, file move, file rename, dst ). dikarenakan bawaan dari VS Code nya ada beberapa options klik kanan yang kurang akan bisa terbantu oleh ekstensi ini.
Visual Studio IntelliCode
Sebenarnya intelisense dari VS Code itu sendiri sudah ada, akan tetapi masih ada kekurangan kalo menurut ku. Dengan Visual Studio IntelliCode ini kita bisa tau suggestion mana yang penting / suggestion yang di sarankan. Ini membuat kita menjadi lebih tau dan terarah utk menggunakan suggestionnya.
Sublime Text Keymap
Dikarenakan keymap nya VS Code rada aneh, contoh: misalkan kita mau copy 1 line biasanya di text editor lain menggunakan shortcut / keymap ( Ctrl + D ). Malah di VS Code jadi aneh kalo pencet tombol Ctrl + D nya. Maka dari itu aku menggunakan ekstensi ini, dan sampai sekarang masih sangat membantu dalam mengerjakan proyek di VS Code.
Prettier
Dengan menggunakan ekstensi ini, kodingan kamu akan menjadi rapi dan kalo ada rules prettiernya juga ngebantu kita.
Eslint
Ketika kita menggunakan eslint kita akan diarahkan ngoding ke jalan yang benar, dengan rules eslint, ini sangat membantu kita saat membuat variable, function maupun class. Dan jika dikombinasikan dengan prettier, ini akan menjadi ekstensi yang sangat powerfull..
ES7 / react / redux / graphql / react-native snippet
Dengan ekstensi ini sangat membantu dalam mengembangkan proyek berbasis framework react js, redux, graphql dan react-native.
Dotenv
Ekstensi ini cuma membuat .env kamu jadi lebih bagus dengan highlighting nya yang tidak membuat pusing.
Docker
Dengan ekstensi ini membuat kita jadi lebih mudah dalam ngatur config Dockerfile maupun docker-compose.yml, serta menjadi shortcut langsung di text editor nya tanpa harus membuka Docker Dashboard.
Wakatime
Ekstensi ini dapat membantu kamu dalam melihat aktifitas ngoding kamu dalam sehari, seminggu, bahkan bulanan. Ini sangat membantu kamu dalam kerja freelance atau pun lembur jadi aktifitas kamu sewaktu ngoding akan ke catat di website Wakatime saat kamu integrasikan dengan VS Code.
CodeSnap
Ekstensi ini dapat membantu kamu dalam Screen shot kodingan dengan mudah, hanya dengan mengaktifkan fitur tsb, lalu copy paste kodingan kamu, dan kamu tinggal klik icon CodeSnap maka kamu sudah melakukan screen shot kodingan berupa png.
Conventional Commit
Dengan ekstensi ini commitan kamu ke git akan jauh lebih gampang di baca, dan ketika kamu ingin release menggunakan semver / standar-version, commitan tadi akan di grouping sesuai apakah itu Fitur / Fix / Breaking Change dari versi App kamu sebelumnya.
Google Cloud Code
Ekstensi ini memudahkanmu dalam deployment App kamu ke Google Cloud Platform ( GCP ). Untuk dokumentasi nya kamu bisa cek di ekstensi tsb.
Pretty TypeScript Errors
Jika kamu sering menggunakan TypeScript untuk proses development sebuah App dengan NodeJs / Deno / dan lainnya. Ekstensi ini sangat membantu kamu dalam menemukan sebuah error pada koding TypeScript kamu.
Resource Monitor
Ekstensi ini memudahkan kamu dalam melihat resource pada local machine kamu, seperti penggunaan CPU, Memory, dan Battery Health.
Conclusion
Ada beberapa Tema yang bagus utk di coba, yakni One Dark Pro, Font FiraCode dan Material Icon Themes, disini saya sangat suka menggunakan FiraCode karna font nya unik saat digunakan utk ngoding, dan Hightlight One Dark Pro juga bagus untuk ngasih hightlight utk function, variable, class dan lainnya.
Dan tidak lupa pula utk ekstensi yang menurut saya sangat ngebantu dalam mengembangkan sebuah produk maupun mengerjakan project dari client.
Referensi
Artikel diatas saya kutip dari beberapa sumber :
