Aktifitas saya dalam bekerja sebagai web designer tidak terlepas dari software code editor yang menemani kegiatan ngoding sehari-hari. Setelah sebelumnya sempat menggunakan berbagai macam code editor seperti notepad++, Atom, dan yang paling bertahan lama Sublime, akhir tahun 2019 lalu saya memutuskan untuk beralih ke Visual Studio Code.

Saya beralih menggunakan VS Code karena code editor ini merupakan paket all in one yang dibutuhkan programer tanpa harus repot-repot menginstal plugin tambahan dan code editor ini mampu menunjang hampir semua kegitatan programing. Dilain hal VS Code juga memiliki fitur built-in GIT support yang menjadikan nilai lebih diantara code editor lainnya.

Bagi kalian yang ingin mencoba menggunakan VS Code sebagai code editor pilihan kalian, berikut saya akan memberikan sedikit tips dan trik dalam konfigurasi VS Code untuk memaksimalkan perfoma code editor ini. Tips ini saya berikan berdasarkan pengalaman saya menggunakan VS Code dalam mengelola project harian dan dalam skala menengah hingga yang cukup besar.

1. Plugin/ Extention

Walaupun di awal saya katakan bahwa VS Code merupakan code editor yang all in one, bukan berarti kita tidak dapat menambahkan fitur tambahan pada code editor ini. Berikut adalah beberapa plugin atau extention yang saya install pada VS Code yang saya gunakan:

A. Open In Browser

Open in Browser, extention ini berfungsi untuk menampilkan hasil kodingan kita pada browser yang kita miliki. Cara kerjanya mudah sekali, ketika kamu sudah menginstal extention ini kamu dapat menggunakannya dengan cara klik kanan pada area dokumen atau pada working tab, dan akan muncul menu Open in default browser atau open in other browser, setelah dipilih maka hasil kodingan akan terbuka pada browser pilihanmu.

B. Sublime Text Keymap

Sublime Key Maker, extention ini digunakan bagi kamu yang sebelumnya sudah terbiasa menggunakan Sublime dan terbiasa dengan shortcut yang ada pada code editor sublime. Dengan extention ini kamu dapat menggunakan hampir semua shortcut yang terdapat pada sublime untuk dioperasikan pada VS Code. Cara kerjanya juga simpel, kamu cukup instal extention ini dan kamu akan langsung bisa menggunakan shortcut sublime pada VS Code.

Namun secara penggunaan extention ini hanyalah opsional saja, karena menurut saya pribadi shortcut pada VS Code sendiri tidak terlalu jauh berbeda dengan Sublime dan tidak memerlukan penyesuaian yang sulit untuk beradaptasi.

Dalam beberapa shortcut tertentu, VS Code terlihat lebih simpel ketimbang Sublime, seperti contoh untuk hide and show sidebar (Cmd+/B Ctrl+B) sedangkan sublime (Shift+K+B).

C. CSS Peek

CSS Peek, extention ini berfungsi sebagai symbol tracking code yang terdapat pada line HTML kita. Jadi misalkan kamu menuliskan styling Class atau ID dalam html, maka kamu dapat langsung melihat propereti apa saja yang terdapat pada Class ataupun ID pada halamamn HTML yang kamu miliki.

Extention ini hanya akan bekerja untuk teknik penulisan CSS eksternal, atau diluar halaman html. Fitur ini biasanya sangat berguna untuk keperluan debuging.

D. Auto Rename Tag

auto rename tag, extention ini berguna untuk menseleksi tag pembuka dan penutup pada halaman Html yang kita miliki. Dengan extention ini kegiatan mengetik kita akan semakin terbantu, karena kita dapat menseleksi dua tag yang saling berhubungan sekaligus dan merubahnya bersamaan.

E. Autoprefixer

Autoprefixer, extention ini membantu kita dalam memberikan vendor prefix pada file CSS yang kita miliki. Extention ini hanya akan bekerja pada ekstensi file jenis CSS, Less, dan SCSS dengan teknik penulisan CSS eksternal, jadi jika kamu mengetikkan CSS di dalam file html maka ekstensi ini tidak dapat bekerja dengan semestinya. Untuk petunjuk lebih lengkap silahkan baca dokumentasi penggunaan extension ini.

F. Beautify

Beautify, extention ini berguna untuk merapihkan/memformat pengetikan koding yang kita miliki dalam bahasa Javascript, JSON, CSS, Sass, dan HTML.

Saya lebih memilih extention ini ketimbang extention sejenis yang cukup populer yaitu prettier, karena saya memiliki pengalaman dalam mengelola file dengan source besar dan extention tersebut dapat membuat kinerja VS Code drop secara drastis. Hal ini terjadi dikarenakan ketika kamu membuka file dengan source besar, extension ini akan langsung otomatis melakukan indexing pada keseluruhan file yang terdapat pada source projectmu yang kadang mengakibatkan VS Code ngehang seketika.

Namun kalian bisa disable extention-nya sementara waktu jika mengalami hal tersebut.

G. Live Server

Live server, extention ini berguna untuk membuat lokal server pada project yang sedang kalian kerjakan dan membuat pekerjaan yang sedang kalian kerjakan akan tampil secara live di browser yang kalian gunakan. Cara menggunakannya sendiri cukup mudah, kalian tinggal install saja extension ini dan akan muncul simbol live server (Go Live) pada bagian pojok kanan bawah VS Code.

Extention ini juga mesti kalian perhatikan penggunaanya, karena dalam kasus tertentu khususnya load project dengan source besar, extention ini dapat menguras performa VS Code kalian karena proses auto indexing yang sama halnya terjadi pada extention Prettier. Kalian dapat men-disable sementara extention ini jika mengalami hal demikian.

Saya sendiri lebih menyarankan penggunaan running task seperti GULP untuk menjalankan fitur yang serupa seperti live server dengan bantuan plugin Browsersync, karena lebih ringan friendly to perfomance sifatnya. Namun kelemahan dari Gulp sendiri yaitu sedikit kurang praktis jika belum terbiasa, dan kalian harus belajar terlebih dahulu mengenai dasar penggunaan GULP serta membuat beberapa konfigurasi.

H. Bracket Pair Colorizer

Bracket Pair Colorizer, Extention ini memungkinkan kamu untuk lebih cepat mengidentifikasi group tag dengan warna tertentu, dan extention ini akan secara otomatis membedakan warna dari setiap group tag yang ada pada kodingan.

I. Material Theme

Material Theme, extention sebetulnya hanya berfungsi untuk memperecantik tampilan VS Code saja. Kamu dapat memilih beberapa preset yang tersedia dan akan merubah tampilan UI VS Code.

Saya pribadi biasanya hanya memilih satu sampai dua preset favorit saja yang sekiranya nyaman dipandang oleh mata dan jarang sekali berganti theme preset. Selain material theme, ada banyak jenis theme UI yang terdapat pada extention VS Code.

Kamu perlu berhati-hati dalam mengisntall Theme Extention karena saya pribadi memiliki pengalaman memilih salah satu tema yang pada akhirnya berdampak pada malfungsi di beberapa setting default VS Code seperti emmet dan juga fungsi expand selection, dan saya baru bisa mengidentifikasi masalah tersebut setelah beberapa waktu lamanya dan cukup membuat saya frustasi ketika bekerja menggunakan VS Code.

Hal tersebut disebabkan oleh ketidakcocokan sistem dalam membaca file antara extention dengan default sistem code editor.

Selain itu kamu bisa menambahkan tema icon sidebar VS Code dengan menambahkan extention Material Theme Icon. Dengan extention ini icon sidebarmu akan berubah sesuai dengan jenis file dan juga ekstensinya, semisal file CSS, Javascript, Sass dan lain sebagainya, sehingga mempermudah dalam mengidentifikasi jenis file dalam sebuah project.

Extra Tips

Selain penambahan extention diatas, saya juga menemukan beberapa konfigurasi tambahan untuk menambah kenyamanan menggunakan VS Code untuk programing. Namun hal ini merupakan preferensi saya pribadi, kamu boleh meniru settingan ini atau abaikan saja jika dirasa tidak perlu.

1. Indent Setting

Indentasi yang rapih dapat mempengaruhi estetika dan kerapihan kita dalam menulis baris code, juga akan membuat hasil kodinganmu lebih profesional.

Secara default VS Code membaca indentasi dengan karakter spasi yang mana hal ini kurang cocok untuk sebagian besar programmer yang lebih suka indentasi mereka dalam bentuk tab.

Kamu bisa setting hal tersebut di preference>settings atau menggunakan shortcut (CMD+ ,/ Ctrl+) lalu di kolom search kamu bisa ketikan indent dan disable atau uncheck opsi detect Indentation dan juga Insert Spaces.

2. Whitespace

Settingan ini berfungsi untuk mempermudah kita mendeteksi format indentasi dalam program yang kita tulis apakah dalam bentuk indentasi spasi atau tab.

Secara default setting whitespace VS Code adalah none, kamu dapat memilih format indentasi sesuai yang kamu butuhkan. Saya sendiri memilih selection dalam hal ini, sehingga ketika saya menseleksi dokumen yang saya buka, saya akan langsung tahu format indentasi dokumen tersebut apakah dalam bentuk spasi atau tab.

Ketika kita sudah merubah setting whitespace dengan opsi selection, maka ketika kamu menseleksi baris code akan tampak panah sebagai simbol indentasi dalam tab dan juga titik sebagai bentuk indentasi spasi.

Itulah keseluruhan setting dan juga extention untuk code editor VS Code yang saya gunakan dalam keseharian saya. Sebenarnya ada banyak extension lain yang mungkin bisa kamu tambahan pada code editor kamu, namun saya sendiri sangat meminimalisir penggunaan extentions yang berlebihan, terkecuali jika memang sangat mendukung produktifitas ngoding saya.

Penggunaan extension yang berlebihan secara tidak langsung akan menurunkan performa VS Code yang kamu gunakan. Maka bijaklah dalam memilih extention yang akan kamu gunakan jika dirasa tidak terlalu penting.

Jika kamu memiliki saran, masukan atau pertanyaan seputar pengalaman menggunakan code editor VS Code, kamu bisa tuliskan di kolom komentar atau bagiakan artikel ini jika dirasa perlu.

Sekian dan sampai jumpa :)

Visit my profile on

Linkedin https://www.linkedin.com/in/dwipriyatmoko/

Connect to my social media

Instagram https://www.instagram.com/mas_mosky