Skip to main content
L RMN

Konfigurasi Vim dengan Vue.js

Posted on:  at 
Article
vimTips & Tricks
Picture

Vim dan segala pemujanya.

Banyak orang yang pakai Vim pada bilang membangkitkan produktifitas kita sebagai programmer, dikarenakan kita tidak usah sering sering menggunakan mouse untuk klik sana klik situ. Atau untuk beberapa task seperti bikin komentar di code, hapus sebagian code, dsb.

Bisa dibilang itu bener, bisa dibilang juga tidak haha.

Alasan saya belajar Vim karena ringan itu aja. Saya masih inget dulu pas jadi programmer pakai laptop bapuk, buka VSCode aja rasanya berat minta ampun ~ jadi saya dulu sering gunain nano. Bayangkan sadja HMR, VSCode, dan Chrome, laptop 2Gbmu bakal ngadat minta udahan.

NeoVim

Saya pakai NeoVim karena om nusendra pakai itu juga, jadi tanyakan ke-dia jangan saya.

Plugin Manager

Nah ini nih, banyak sekali plugin manager di ranah Vim, personal saya pilih vim-plug dikarenakan saya tergoda dengan kata minimalis. Pokoknya tinggal Plug 'nama-orang-yang-bikin/package lalu :PlugInstall ter install deh plugin yang kamu mau.

Install-nya pun gampang coy :

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

Lalu tinggal kamu install deh pluggin yang mungkin kamu perluin. Tulis ini pada .config/nvim/init.vim

  " Contoh installasi plugin di vim-plug
  call plug#begin('~/.vim/plugged')

  " install vim-sensible
  Plug 'tpope/vim-sensible'
  Plug 'morhetz/gruvbox' " install tema vim gruvbox

  call plug#end()

Close vim-nya pakai :wq buka lagi, terus jalanin command :PlugInstall ter-install deh plugin-nya.

Setup Auto Complete dan Vue

Untuk autocomplete saya pilih coc. Karena coc punya banyak plugin, seperti coc-prettier, coc-eslint, coc-vetur, jadi ya tidak ada salahnya untuk pakai itu. Segala developement saya sehari hari JS, Vue, PHP sudah ada plugin-nya di coc, tentu coc juga ringan walapun di tulis pakai JS (Type Script).

Berikut silahkan lihat disini untuk konfigurasi coc saya.

Nah untuk vue, prettier, dan eslint saya saranin gausah dah pakai plugin lain, prettier, dan eslint juga punya plugin untuk coc, jadi saya pakai aja dah.

  # run di dalam command vim SHIFT + :
  :CocInstall coc-eslint coc-prettier coc-json

Setelah di install jangan lupa juga untuk setup si coc-settings.json-nya. Contoh seperti punya saya juga boleh.

Setelah itu kita konfigurasi syntax highlighting-nya nih.

Vue punya konsep SFC jadi agak spesial caranya, tapi tenang - selalu ada plugin haha. Saya pakai vue-vim dan untuk plugin comment saya ikut dokumentasi dari vim-vue juga.

Selesai juga akhirnya konfigurasi kita, paling tidak vim-mu terlihat di video ini pas ngedit komponen vue

Nah ~ waktunya kesimpulan

Kesimpulan

Haruskah pakai Vim? Tidak, ga perlu. Saya cuma pengen tangan saya ga bayak pindah dari keyboard aja, biar ga kena RSI dan kalau misal ada kondisi darurat saya harus pakai laptop dengan spek rendah paling tidak ada editor yang bisa saya pakai.

Ingin pakai vim tapi ga pingin konfigurasi? Gampang pakai saja SpaceVim. Semua konfigurasi macam syntax, autocomplete, terminal, file navigasi dan lain - lain sudah disediakan :)

Seberapa cepat kita dapat migrasi editor ke Vim? Kalau dipakai terus saya yakin bakal cepet bisa. Untuk sementara ini saya masih 1 Minggu pakai. Waktu kerja saya masih pakai VSCode. Vim cuma saya pakai saat ngedit proyek - proyek hobi. Mungkin 1 - 2 bulan lagi saya akan full-vim.

Catatan

  • Beberapa video dari toughbout di youtube sangat bagus buat latian / konfigurasi vim
  • Lebih baik jangan copas, setup vim orang lain ~ kadang break haha. Mending contih plugin yang dia pakai dan setup sendiri
  • Ingat coc-settings.json, pada bagian eslint harus ada filetype vue
Share