Visual Studio Code atau VSCode menjadi penyunting kode andalan para pengembang saat ini. Selain karena harga nya yang gratis, juga karena sumber kode nya tersedia; menawarkan fitur yang tangguh, dan dibangun di atas teknologi web—yang berarti tersedia di lintas platform—yang entah apakah menjadi kebanggaan atau malah sebaliknya.

Microsoft—pengembang utama VSCode—berusaha keras untuk mengambil hati para pengembang dengan memberikan beberapa layanan yang dapat membantu pengembang untuk bisa lebih produktif dalam mengembangkan piranti lunak, dari akuisisi layanan penyimpanan kode bernama GitHub; pengembangan WSL agar pengguna Windows dapat menjalankan GNU/Linux di mesin nya, serta produk bernama VSCode tersebut yang dapat berjalan di platform manapun (kecuali di tamagoci) dan yang paling penting: gratis.

Free as in free beer.

Tidak ada yang salah dalam kasus menggunakan VSCode, kecuali jika kamu menggunakan Sublime Text 3 hasil crack atau produk Jetbrains yang pakai lisensi edukasi padahal dipakai untuk komersil.

VSCode menjadi pilihan yang sempurna bagi yang belum mampu membeli lisensi nya Sublime (dan males ngeliat popup pas save) dan juga bagi yang ingin menggunakan penyunting kode yang lebih ringan dari produk-produk nya Jetbrains.

https://code.visualstudio.com/

Free. Built on open source. Runs everywhere. menjadi bahan pemasaran yang jitu untuk siapapun yang menginginkan 3 benefit tersebut.

Berbicara tentang free

Ketika kita berbicara tentang free, mungkin hal yang ada di pikiran kita adalah gratis.

Seperti seseorang memberikan bir secara cuma-cuma, tanpa mengharapkan apapun dari si penerima.

https://trakteer.id/evilfactorylabs

Hanya memberi, tak harap kembali.

Bagai ady sang surya menyinari dunia.

Kembali ke pembahasan, tadi kita sudah menyinggung bahwa VSCode adalah bentuk dari free as in free beer. Microsoft memiliki kontrol penuh terhadap apa yang ingin di terapkan di VSCode, dan kamu harus terima.

Tapi, karena sumber kode untuk membuat VSCode dirilis secara terbuka, setiap orang bisa membuat VSCode nya sendiri sesuai dengan keinginan dia, contohnya adalah VSCodium yang seperti VSCode namun tidak ada brand Microsoft, tidak ada telemetry, dan menggunakan Open VSX untuk registri ekstensi nya daripada menggunakan yang milik Microsoft yang proprietary.

Yang perlu digarisbawahi, VSCodium adalah VSCodium, bukan VSCode. Secara teknis, fitur-fitur yang ditawarkannya sama, namun secara esensi beda karena VSCodium bukanlah VSCode.

Berbicara tentang kebebasan, siapa yang tidak mau memiliki kebebasan?

Kebebasan adalah hak semua manusia, bukan?

Gue kasih contoh.

Aplikasi Starbucks di Android tidak dapat digunakan bila perangkat lo dalam kondisi root atau karena menggunakan sistem operasi kustom yang bukan Android pada umumnya.

Di iOS tidak dapat menjalankan aplikasi yang bukan di unduh melalui App Store.

Zoom dan Skype hanya berjalan "secara normal" bila lo menggunakan peramban keluarga Chromium seperti Chrome, Edge, atau Opera.

Lihat 3 kondisi diatas, pertanyaannya, apakah itu salah pengguna?

Apakah Starbucks harus peduli kalau gue menggunakan perangkat yang sudah di root atau karena menggunakan Lineage OS untuk bisa menjalankan aplikasinya di hp gue karena kartu Starbucks gue udah kurang layak pakai dan harus pakai aplikasi biar saldo nya berguna?

Apakah Apple harus peduli kalau gue harus menggunakan aplikasi yang di unduh dari App Store meskipun perangkat genggam tersebut sudah gue beli seharga $999?

Apakah Zoom dan Skype harus peduli kalau gue pakai Firefox/Safari dan kalau gue ingin menggunakan aplikasi mereka gue harus pakai peramban lain sekalipun gue sudah menyewa layanan mereka $5/bulan?

Apa beda nya sama kondisi misal gue pengen beli gelas, terus ditanya gelas nya mau dipakai untuk minum apa? Terus misalnya dilarang gelas nya jangan dipakai buat minum tuak ya.

Maksud gue yaa kenapa harus peduli gitu kan.

Terserah gue lah gelas nya mau gue pakai buat asbak sekalipun toh udah gue beli, kan?

Dan kata "Terserah" diatas adalah salah satu bentuk kebebasan.

Bagian ini gue cuma mau membahas tentang perbedaan "free" as in free beer dan as in free speech.

Microsoft (harusnya) tidak melarang lo untuk menggunakan VSCode sekalipun untuk melakukan hacking, reverse-engineering Windows, membuat saingan GitHub, membuat screencast, dsb.

Hak kebebasan lo tidak diatur oleh Microsoft.

Dan, karena free beer, apa yang ada di VSCode, lo harus terima. Dan semoga bila ada sesuatu yang tidak lo tidak ingin di VSCode, lo punya kontrol untuk melakukannya.

Misal, bila VSCode menawarkan fitur otentikasi ke Microsoft/GitHub Account agar ekstensi dan pengaturan mu persisten maka fitur tersebut harus bersifat opsional dan opt-out.

Tujuan utama pakai VSCode buat menyunting kode kan, soalnya?

Kenapa harus peduli untuk melakukan otentikasi?

Berbicara tentang rumah

Sekarang lo sedang berada di kondisi ingin mempunyai rumah, pilihannya ada dua: Membangun dari awal atau membeli yang sudah ada, benar?

Pastinya ada pro-kontra dari setiap pilihan tersebut.

Misal, jika membangun dari awal membutuhkan waktu dan uang yang lebih banyak, namun hasilnya akan menjadi rumah idamanmu, as it should be.

Dan jika membeli yang sudah ada, mungkin memakan waktu dan uang lebih sedikit, namun kamu harus menerima semua yang sudah ada, dan membenahi lagi bila kamu tidak menyukai yang sudah ada.

Rumah orang tua gue dulu ada halaman yang lumayan luas di belakang rumah, dikelilingi oleh pohon dan tertutup oleh tembok besar.

Sedangkan orang tua gue tidak membutuhkan halaman tersebut, dan tidak ingin rumah mereka tertutup oleh tembok yang besar tersebut. Lalu setelah beberapa tahun (dan menghabiskan banyak uang), halaman tersebut diubah menjadi garasi dan semua orang bisa mengakses rumah orang tua gue tanpa harus membuka pintu yang ada di tengah tembok tersebut.

Dan jadilah rumah idaman mereka, as it should be.

Sekarang kita ambil contoh terhadap VSCode.

VSCode ibarat rumah yang sudah jadi. Sudah memiliki fitur-fitur untuk menyunting kode, sudah berjalan sebagaimana fungsinya, dll.

Dan yang paling penting: Gratis.

Membeli rumah idaman adalah strategi pemasaran. Kita bukan membeli rumah idaman, melainkan rumah yang lengkap atau karena berada di lokasi yang strategis.

Rumah idaman adalah dibangun, bukan dibeli.

Misal penyunting kode idaman kamu adalah yang memiliki ukuran kecil, ringan digunakan, dapat berjalan dimanapun, dan memiliki fitur yang powerful.

VSCode memiliki fitur yang powerful, namun memiliki ukuran yang tidak kecil dan membutuhkan sumber daya yang tidak ringan—thanks to Chromium—serta keyboard-driven.

Karena sudah menggunakan VSCode—dan ingin menjadikan VSCode sebagai penyunting kode idamanmu—kamu harus membuat VSCode tersebut berukuran kecil (atau terlihat seperti kecil dengan menggunakan SSD yang lebih besar), membuat sumber daya yang dibutuhkan menjadi ringan (atau terlihat ringan), serta membuat VSCode tersebut menjadi keyboard-driven.

Jika kamu tidak ingin/bisa melakukannya, maka kamu akan menunggu orang lain untuk melakukannya, thanks to Open Source community.

Sekarang kita bicarakan vim.

Vim merupakan penyunting kode minimal.

Memiliki ukuran yang relatif kecil (~3.7M), membutuhkan sumber daya yang sedikit, dan juga keyboard-driven thanks to "modal" concept.

Fitur yang ditawarkan sudah relatif powerful untuk sebuah penyunting kode.

Vim adalah penyunting kode yang minimal dengan fitur-fitur yang minimal.

Tidak ada intellisense, multi-selection, scm integration, dsb sebagai fitur bawaan sebagaimana VSCode.

Tapi vim memiliki konsep plugin (atau ekstensi untuk bahasa modern nya) agar vim dapat melakukan hal-hal diluar fitur bawaan nya, termasuk 3 hal diatas yang sudah disebutkan.

Dan sebagaimana yang kita tau, persaingan menciptakan inovasi.

Sekarang di vim bisa memiliki fitur intellisense, dan di VSCode sudah memiliki "vim emulator" yang sederhananya membawa fitur-fitur di vim ke VSCode.

Yang perlu diingat, bagaimanapun vim akan tetap menjadi vim sekalipun memiliki fitur intellisense; multi-selection, dan integrasi dengan scm.

Begitupula dengan VSCode, akan tetap menjadi VSCode sekalipun dapat melakukan apa yang bisa dilakukan di vim.

Masih menjadi vim dan VSCode yang sudah kamu kenal.

Membangun rumah idaman

Tadi kita sudah panjang lebar membahas diluar topik utama.

Dan semoga bisa menjawab pertanyaan-pertanyaan seperti:

  • Kenapa pakai vim bukan vscode?
  • Kenapa harus ribet kalo bisa sederhana?
  • Kenapa vim dan bukan emacs?

Yang mana jawabannya adalah tentang membangun rumah idaman kita sendiri—daripada membeli rumah 'yang dianggap' sebagai rumah idaman—yang terkesan menjadi lebih tidak ribet.

Penyunting kode idaman gue adalah yang sudah disinggung sebelumnya.

Dan disini kita akan coba membangun penyunting kode idaman kita, bila kita memiliki definisi idaman yang sama.

Berdasarkan layar awal, tampilan VSCode kurang lebih seperti ini:

Gambar VSCodium

Yang bila diuraikan, fitur-fitur yang ditawarkan antara lain:

  • Tree Explorer
  • Finder
  • SCM Integration (and integration with Tree Explorer)
  • Debug
  • Extension Marketplace
  • Settings
  • Status Bar

Dan begini tampilan untuk vim yang masih kosongan:

vi

Yang hanya menawarkan fitur untuk... Menyunting kode?

Fitur-fitur yang ditawarkan oleh VSCode diatas sebenarnya sudah ada diluar vim, kecuali untuk Settings yang pastinya berkaitan dengan vim.

Namun untuk Tree Explorer (ehm, ls?) atau Finder (ehm, egrep?) sudah ditawarkan diluar penyunting kode, bukan? Oke oke, vim memiliki tree explorer yang menurut gue sampah banget minimal bernama netrw.

netrw via :Explore

Atau bisa dikombinasikan dengan :vs (vertical split) dan :Explore seperti gambar dibawah:

:vs + :Explore

Oke mata gue sakit ngeliatnya tapi setidaknya ini vim bukan nano jadi, ya, puji tuhan.

nano yang tadi di gosipkan

Secara esensi dalam menyunting kode tentu kita tidak membutuhkan "syntax highlight" dan baris angka karena itu hanyalah fitur tambahan untuk menambah kesan estetik.

Agar tidak terlihat sedikit estetik dan tidak terlihat seperti hidup di tahun 1995, mari kita tambahkan baris angka dan syntax highlighter dengan menambahkan beberapa baris berikut ke konfigurasi vim kita (biasanya di ~/.vimrc).

set number
syntax enable

Jika sedang membuka vim, muat ulang vim dengan perintah :so ~/.vimrc maka tampilannya kurang lebih akan seperti ini:

syntax enable + set number

Lebih baik!

Sekarang kita akan move on ke plugin.

Instalasi Plugin

Dalam memasang plugin di vim, yang perlu kita lakukan sebenarnya hanyalah ambil sumber kode, lalu beritahukan vim untuk menjalankan "vim script" dari sumber kode tersebut.

Tapi kita adalah orang malas, khususnya dalam pemeliharaan.

Memperbarui sumber kode yang ada di lokal kita dengan yang ada di sumber tentu pekerjaan yang memakan waktu. Termasuk ketika kita ingin tidak menggunakannya lagi juga.

Maka disini kita akan menggunakan Plugin Manager yang bertugas sebagaimana fungsinya Plugin Manager, dan yang dipilih adalah vim-plug daripada yang lain (vundle, apt-vim, dsb) karena fitur yang ditawarkan oleh vim-plug.

Dan untuk proses instalasi ada di README nya :)

Jika malas, berikut caranya untuk yang menggunakan vim (bukan neovim) dan di sistem UNIX-like:

curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
  https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

Instalasi tema

Kita sudah memasang vim-plug, dan plugin pertama yang akan kita pasang adalah tema. Tema favorit gue adalah one dan sekarang mari kita pasang plugin tersebut!

Dimulai dengan menambahkan kode berikut di ~/.vimrc:

call plug#begin('~/.vim/plugged')

call plug#end()

Setelah di reload (yang :so diatas), maka kita bisa sudah bisa ber-interaksi dengan vim-plug. Sekarang kita coba pasang tema one-tersebut yang ada berada di github.com/rakr/vim-one

call plug#begin('~/.vim/plugged')

Plug 'rakr/vim-one'

call plug#end()

Simpan, lalu reload, dan jalankan :PlugInstall, maka plugin akan terpasang:

:PlugInstall

Sekarang kita terapkan tema tersebut menggunakan colorscheme one, dan beginilah tampilan vim kita sekarang:

coloscheme = one

Lebih baik!

Instalasi Tree Explorer

Tree explorer favorit gue (sampai hari ini) adalah nerdtree, karena gue belum menemukan plugin lain yang se-powerful nerdtree untuk kebutuhan gue.

Mari kita pasang dengan menambahkan baris berikut di .vimrc kita, reload, dan install.

Karena gue males, mari kita tambahkan custom script untuk melakukan reload dengan :Reload.

call plug#begin('~/.vim/plugged')

Plug 'rakr/vim-one'
Plug 'preservim/nerdtree'

call plug#end()

set number

syntax enable

colorscheme one

command! Reload :so ~/.vimrc
tambahkan di baris 4 dan 14

Setelah berhasil di install, mari kita lihat buka tree explorer melalui perintah :NERDTree atau :NERDTreeToggle (kalau favorit gue), dan beginilah tampilannya sekarang:

Setelah menggunakan NERDTree

Menjadi lebih manusiawi dan terlihat seperti VSCode!

Integrasi scm (untuk git) dengan nerdtree

Di VSCode, kita bisa mengetahui apakah berkas tersebut belum dilacak oleh git atau apakah berkas tersebut ada modifikasi.

Sekarang kita akan inginkan juga di vim!

Caranya tinggal pasang plugin Xuyuanp/nerdtree-git-plugin dan beginilah hasilnya:

nerdtree with git plugin

Silahkan lihat di bagian kiri alias di bagian nerdtree, ada indikator bahwa berkas tersebut sudah dimodifikasi.

Instalasi Finder

Meskipun vim sudah menawarkan pencarian bawaan, terkadang kita ingin membuka berkas berdasarkan nama nya (cmd+p jika di vscode) dan berdasarkan konten yang ada di berkas tersebut (cmd+shift+f jika di vscode).

Di vim kita bisa menggunakan bantuan fzf dan ripgrep dan menggunakan plugin bernama fzf dan fzf.vim.

Dan pastikan juga kamu sudah memasang binary untuk fzf dan ripgrep di mesin kamu.

Jika sudah, kita sekarang bisa menggunakan perintah :FZF untuk melakukan pencarian berdasarkan nama berkas secara fuzzy search dan perintah :Rg jika ingin berdasarkan konten yang ada.

:FZF

Gambar diatas adalah ketika ingin membuka berkas dengan nama yang mengandung huruf f dan l yang maksudnya ingin ke flow.

:Rg

Dan gambar diatas adalah ketika ingin membuka berkas yang mengandung kata hello .

Mantap bantul kan?

Instalasi integrasi dengan scm (git)

Gue dikeseharian seringnya pakai tmux dengan 4 windows:

  • dev (biasanya untuk menjalankan server)
  • test (untuk menjalankan test)
  • vim (untuk vim)
  • git (untuk git)

Yang maksudnya, operasional terkait git seringnya gue lakukan terpisah, karena gue punya banyak alias terkait git di level shell.

Tapi demi konten, mari kita gunakan plugin untuk menggunakan scm git di vim kita biar kayak VSCode, meskipun dulu kalau pakai VSCode ujung-ujungnya gue melakukan operasional terkait git via integrated terminal nya.

Plugin nya bisa menggunakan vim-fugitive karena sampai hari ini gue belum menemukan plugin yang lebih baik dan lebih powerful dari fugitive.

Berikut contoh ketika gue melakukan git diff <file> via fugitive dengan mode split alias :Gvdiffsplit

:Gvdiffsplit

Yang kiri adalah yang benar. Ehm maksud gue yang sudah dilacak oleh git dan yang kanan adalah perubahan yang terjadi dan belum terlacak oleh git.

Disitu ada indikator mana kita menambahkan baris baru, mana yang menghapus baris yang sudah ada, dan mana yang mengubah konten di baris yang ada.

:Glog

Lalu diatas kita coba meng-eksplorasi setiap commit yang terjadi menggunakan perintah :Glog, dan disitu kita mendapatkan informasi-informasi pendukung seperti pesan commit dan berkas patch nya alias perubahan apa saja yang terjadi pada berkas tersebut!

Instalasi multi cursor

Salahsatu fitur yang gue suka dari VSCode adalah seleksi multi cursor dengan cara seleksi kata kunci + cmd+d bila di mac.

Multi-cursor di VSCode

Nah dari situ gue bisa melakukan operasi seperti append, delete, dsb untuk kata kunci yang gue inginkan tersebut.

Meskipun di vim (dan VSCode) gue bisa menggunakan hal serupa dengan cara find+replace, tapi terkadang ada kondisi dimana gue ingin mengubah semua kata kunci yang ada, tapi tidak semuanya diubah.

Ribet emang ya.

Misal gini:

mengubah pilih gue menjadi hapus gue

Diatas gue menggunakan :%s/pilih gue/hapus gue/ untuk melakukan operasional find+replace. Namun sayangnya, dibaris ke 9 dia keganti juga sedangkan yang gue inginkan tidak.

Meskipun gue bisa menggunakan :%s/pilih gue/hapus gue/c yang sederhananya sebelum di ganti maka munculkan konfirmasi terlebih dahulu, tapi menurut gue itu wasting time.

Dan juga, di find+replace gue ga bisa tau sampai mana gue melakukan find+replace, karena bila di seleksi, dan misalnya di baris 666 ada kata pilih gue juga, gue bisa tau karena ya terseleksi.

Oke oke, di vim ada plugin bernama vim-multiple-cursors yang mana menawarkan fitur yang gue inginkan.

Catatan: ketika melihat repositori tersebut, katanya plugin tersebut deprecated dan diharapkan untuk pindah ke mg979/vim-visual-multi

Dan setelah memasang plugin tersebut, keinginan gue sekarang sudah terpenuhi!

select + ctrl+n

Sempurna!

Memasang intellisense

Ini yang paling juara dari semua plugin yang ada disini.

Alasan gue dulu menggunakan VSCode daripada emacs vim adalah karena vim tidak sepintar VSCode.

Yang gue butuhkan bukan hanya fitur auto-complete, melainkan yang smart juga.

Kan gak lucu kalau gue ngetik console. terus di auto-complete nya ada sue sue wegah nuruti kekarepanmu sansoyo bubrah cuma karena di kode gue disitu ada baris itu.

Yang gue butuhkan adalah semua properti yang dimiliki oleh console nya JavaScript. Lebih keren lagi kalau ada dokumentasinya juga.

seinget gue di vscode nampilin dokumentasi singkat juga sih

Lalu di Hacker News gue melihat seseorang membuat Show HN dengan nama coc.vim dan pas gue coba ini oke banget.

console.<suggestion>

Disitu gue menggunakan konfigurasi "rekomendasi" dari README nya coc dan menggunakan background=light karena vim gue yang sekarang belum dukung true colors (gue upgrade dulu deh hwhwhe).

Ternyata di coc juga tidak ada dokumentasinya (hanya menampilkan parameter), namun setelah memilih properti (log) baru muncul dokumentasi singkatnya dan begitupula di vscode.

vscode x vim

Dan yang menariknya, setelah gue install coc, ada indikator tambahan di vim gue yang menandakan hal-hal terkait scm (seperti + sebagai indikasi penambahan baris).

Mengapa keluaran yang didapat vim sama dengan yang ada di vscode?

Karena 'otak' dari 'auto complete' tersebut sama, yakni berasal dari "server" yang mengikuti standar/aturan Language Server Protocol.

Memoles menjadi lebih baik

Pertama, pastikan vim kita sudah mendukung termguicolors agar dia menggunakan true color. Bisa di cek di vim --version dan lihat apakah dia mendukungnya:

jika +termguicolors berarti mendukung

Dan juga pastikan bila terminal kamu mendukung true color juga.

Berikut tampilan vim tanpa true color:

Nay

Dan sekarang dengan true color:

Yeay

Lebih yoi.

Dengan tambahan set cursorline, tampilan vim kita menjadi lebih yoi lagi

cursorline

Sampai baris ini, mari kita bandingkan vim kita dengan VSCode.

vscode x vim

Atau ini yang lebih miripnya

vscode mode faultable x vim mode faultable

Yaa meskipun tidak 100% mirip dari sisi tema (yang vscode gue pakai One Dark Pro) dan juga dari ukuran font.

Tapi secara fungsionalitas, sekarang hampir sama seperti vscode namun dengan ukuran yang lebih kecil dan penggunaan sumber daya yang lebih sedikit :))

Dan juga, truly 100% F/OSS, no proprietary (and useless feature) attached.

Penutup

Sampai bagian ini kita sudah membedah rumah kita menjadi seperti vscode dari sisi fungsionalitas unik yang ditawarkannya khususnya dibagian intellisense.

Meskipun vim kita tersebut kita bedah untuk menjadi seperti vscode ataupun vscode kita tersebut bedah menjadi seperti vim, bagaimanapun vim kita tetaplah menjadi vim yang kita kenal, dan vscode kita tetaplah menjadi vscode yang kita kenal juga.

Sebelum ditutup, berikut kode final dari ~/.vimrc yang ada di tulisan ini:

call plug#begin('~/.vim/plugged')

Plug 'rakr/vim-one'
Plug 'preservim/nerdtree'
Plug 'Xuyuanp/nerdtree-git-plugin'
Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
Plug 'junegunn/fzf.vim'
Plug 'tpope/vim-fugitive'
Plug 'terryma/vim-multiple-cursors'
Plug 'neoclide/coc.nvim', {'branch': 'release'}

call plug#end()

set number
set cursorline
set termguicolors
set background=dark
set laststatus=0

syntax enable

colorscheme one

highlight EndOfBuffer guifg=bg

command! Reload :so ~/.vimrc

Jika ingin mencari referensi untuk mengkonfigurasi vim kamu, bisa cek konfigurasi (n)vim nya Fariz disini.

Daaan pada akhirnya baik itu vscode ataupun vim hanyalah sebuah tools, menggunakan vim tidak membuat skill koding kamu menjadi seperti Bram Moonlenaar dan menggunakan vscode pun tidak membuat skill kamu menjadi seperti Anders Hejlsberg.

Sebagai penutup, jika kamu terbantu karena kehadiran vim, kamu bisa membantu anak-anak Uganda dengan berdonasi melalui ICCF—yayasan dimana pembuat vim bekerja—karena vim adalah charityware.

Terima kasih!