VSCode Extensions to Boost Your Productivity

June 3, 2024 (3mo ago)

Extensions untuk Produktivitas

1. Git Graph

Git Graph adalah extension yang memungkinkan visualisasi riwayat repository Git dalam bentuk grafis. Dengan Git Graph, pengguna dapat melihat cabang, commit, dan merge secara lebih mudah dan intuitif, sehingga mempermudah navigasi dan pengelolaan proyek Git.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

2. Error Lens

Error Lens adalah extension yang menolong developer dengan menampilkan pesan kesalahan dan peringatan secara langsung di codebase. Pesan ini ditampilkan secara visual di samping baris kode yang bermasalah, sehingga memudahkan identifikasi dan perbaikan bug.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

3. GitLens

GitLens memperluas kemampuan Git di dalam Visual Studio Code dengan menyediakan informasi rinci tentang commit, penulis, dan perubahan kode. Extension ini juga memudahkan pelacakan perubahan historis dan memberikan wawasan mendalam tentang kode yang sedang dikerjakan.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

4. Tailwind Fold

Tailwind Fold adalah extensive yang membantu pengguna dalam mengelola class utility dari Tailwind CSS dengan memungkinkan pengguna untuk menyembunyikan atau "fold" class yang panjang. Ini membantu menjaga kode tetap bersih dan mudah dibaca.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold

5. Indent Rainbow

Indent Rainbow adalah extension yang mewarnai indentasi dalam kode untuk memudahkan pembacaan struktur kode. Setiap level indentasi diberi warna yang berbeda, sehingga pengguna dapat dengan cepat memahami hirarki dan struktur blok kode. Anda bisa mengkombinasikan extension ini dengan indent-rainbow-palette untuk mengkustomisasi warna palet indentasi.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=evondev.indent-rainbow-palettes

6. TabOut

TabOut adalah extension yang memungkinkan pengguna untuk melompat keluar dari tanda kurung, tanda kutip, dan elemen serupa dengan menekan tombol Tab. Ini mempercepat penulisan kode dengan mengurangi jumlah penekanan tombol yang diperlukan untuk navigasi di dalam kode.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=albert.TabOut

7. Auto Rename Tag

Auto Rename Tag adalah extension yang secara otomatis mengganti nama tag HTML atau XML yang dipasangkan ketika salah satu tag diubah. Dengan extension ini, saat pengguna mengedit tag pembuka atau penutup, tag yang berpasangan akan secara otomatis disesuaikan, sehingga menghemat waktu dan mengurangi risiko kesalahan dalam penulisan kode struktur dokumen yang kompleks.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

8. Subword Navigation

Subword Navigation memungkinkan pengguna untuk menavigasi dan mengedit bagian kata di dalam variabel atau identifier dengan lebih mudah. Ini mempermudah pengeditan kata majemuk atau nama variabel panjang tanpa harus menghapus atau menambah karakter satu per satu.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=ow.vscode-subword-navigation

9. TODO Tree

TODO Tree adalah extension yang membantu pengguna menandai dan melacak catatan TODO, FIXME, dan catatan penting lainnya di dalam kode. Extension ini akan menyoroti baris yang berisi catatan tersebut, sehingga pengguna dapat dengan mudah menemukannya dan menindaklanjutinya.

Untitled

Link Extension: [https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)

10. Toggle Quotes

Toggle Quotes adalah extension yang memungkinkan pengguna untuk dengan mudah mengganti jenis tanda kutip di sekitar string, dari tanda kutip tunggal ke tanda kutip ganda atau sebaliknya. Ini berguna untuk menyesuaikan format kode sesuai dengan konvensi atau preferensi proyek.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes

Extensions untuk “Produktivitas"

1. VSCode Pets

VSCode Pets adalah extension yang menambahkan hewan peliharaan virtual ke editor kode Anda. Hewan ini akan berkeliaran di sekitar layar saat Anda bekerja, memberikan hiburan ringan dan meningkatkan suasana hati selama sesi coding yang panjang.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets

2. Bongo Cat

Bongo Cat adalah extension yang menampilkan kucing animasi yang bermain bongo di layar saat Anda mengetik. Extension ini menambahkan elemen menyenangkan ke dalam pengalaman coding, membantu mengurangi stres dan meningkatkan produktivitas.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=pixl-garden.BongoCat

3. Coding Boring Ah

Coding Boring Ah adalah extension yang menyediakan video latar yang menenangkan atau energik untuk menemani Anda saat coding. Dengan memilih video yang sesuai, Anda dapat meningkatkan fokus dan produktivitas selama bekerja.

Untitled

4. Incredibly In Your Face

Incredibly In Your Face adalah ekstensi yang memberikan notifikasi visual yang mencolok langsung di layar Anda ketika terjadi kesalahan atau peringatan di dalam kode. Dengan notifikasi yang besar dan mencolok ini, pengguna tidak akan melewatkan masalah penting yang perlu diperbaiki segera, sehingga membantu memastikan kualitas kode tetap terjaga dan mengurangi potensi bug yang terlewatkan.

Untitled

Link Extension: https://marketplace.visualstudio.com/items?itemName=VirejDasani.incredibly-in-your-face

Setup VSCode Anda Sekarang Sangat Produktif!

Selamat! Sekarang setup VSCode Anda semakin produktif dan Anda bisa melakukan sesi koding dengan lebih nyaman dan x10 lebih efisien!

Untitled

Referensi