Code Editor

Trik Memaksimalkan Performa Code Editor Visual Studio Code

Pinterest LinkedIn Tumblr

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 kegiatan 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 saya katakan sebelumnya 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

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Open in browser extention

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 browsersetelah dipilih maka hasil kodingan akan terbuka pada browser pilihanmu.

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Tampilan Menu Open in Browser

B. Sublime Text Keymap

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Sublime text keymap extention

Sublime Key Map, 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 bahkan lebih simpel ketimbang Sublime, seperti contoh untuk hide and show sidebar (Cmd+/B Ctrl+B) sedangkan sublime (Shift+K+B).

C. CSS Peek

Trik Memaksimalkan Performa Code Editor Visual Studio Code
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.

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Demo extention CSS Peek

D. Auto Rename Tag

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Auto rename tag extention

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 secara bersamaan.

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Demo auto rename tag

E. Autoprefixer

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Autoprefixer plugin

Autoprefixerextention 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.

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Cara kerja autoprefixer

F. Beautify

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Extention Beautify

Beautifyextention 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 prettierkarena 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 sementara waktu jika mengalami hal tersebut.

G. Live Server

Live serverextention 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.

Trik Memaksimalkan Performa Code Editor Visual Studio Code
tampilan live server pada VS Code

Saya sendiri lebih menyarankan penggunaan task runner seperti GULP untuk menjalankan fitur yang serupa seperti live server dengan bantuan plugin Browsersync, karena lebih ringan friendly to perfomance, 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 untuk dapat menjalankannya.

H. Bracket Pair Colorizer

Bracket Pair ColorizerExtention 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. Extention ini sangat bermanfaat untuk membantu kita membaca baris code denagn lebih cepat dan akurat, serta menambah nilai aestetik dari tampilan code editor.

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Tampilan Extention Bracket Pair Colorizer

I. Material Theme

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Extention Material Theme

Material Themeextention 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 IconDengan 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.

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Extention Material Themes Icon

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 setingan 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.

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Tampilan setting VS Code

2. Whitespace

Setingan 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 tau format indentasi dokumen tersebut apakah dalam bentuk spasi atau tab.

Trik Memaksimalkan Performa Code Editor Visual Studio Code
Setting whitespace VS Code

Trik Memaksimalkan Performa Code Editor Visual Studio Code
whitespace selection

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 kegiatan programing.

Penggunaan extension yang berlebihan secara tidak langsung juga 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 VS Code, kamu bisa tuliskan di kolom komentar atau bagiakan artikel ini jika dirasa perlu.

Sekian dan sampai jumpa 🙂

Hallo kawan-kawan semua nama saya Dwi Priyatmoko, content creator sekaligus co-founder blog BackslashID. Saya seorang Web Designer yang juga menyukai ilmu seputar User Experience. Diluar kegiatan ngoding dan desain, saya hobi melakukan olahraga outdor taril run dan juga bermain game mobile. Kebetulan saat ini juga tertarik pada custom mechanical keyboard.

Write A Comment