Bayu Mahadika
  1. Home
    2. /
  2. article
    3. /
  3. my-vim-setup
My Vim Setup – Full IDE Power with coc.nvim JS, TS, Tailwind, Python Ready

tool

|

My Vim Setup – Full IDE Power with coc.nvim JS, TS, Tailwind, Python Ready

Sebuah walkthrough lengkap tentang setup Vim modern gua dengan coc.nvim. Artikel ini bahas instalasi awal, daftar plugin yang gua pake dari JavaScript, TypeScript, HTML, CSS, sampai Python, serta konfigurasi lengkap coc-settings.json yang bikin Vim jadi powerful IDE. Cocok buat developer yang pengen Vim cepat tapi kaya fitur.

Selama bertahun-tahun ngoding, gua udah nyobain berbagai macam text editor dan IDE. Tapi entah kenapa, hati gua baliknya ke Vim. Simpel, cepat, ringan, dan kalau udah ngerti cara mainnya — Vim tuh jadi senjata rahasia produktivitas. Di artikel ini gua bakal spill setup Vim gua, mulai dari installasi awal sampai plugin andalan kayak coc.nvim yang bikin Vim punya vibe IDE modern.

# Step 1: Installasi Vim

Sebelum ngapa-ngapain, pastiin lu udah install Vim (versi 8.1+). Kalau lu pake Linux atau macOS, biasanya udah ada, tapi buat jaga-jaga:

# Install di termux:

sh
pkg update && pkg install vim

# Install di Ubuntu/Debian:

sh
sudo apt update && sudo apt install vim

# Untuk macOS (pakai Homebrew):

sh
brew install vim

# Step 2: Install Plugin Manager (vim-plug)

Gua pake vim-plug karena simpel dan gak ribet. Install-nya gampang:

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

# Plugin Vim

Buat file baru dulu bro, untuk plugin vimnya:

sh
touch ~/.vimrc

Setelah itu, tambahkan ini di file ~/.vimrc

vim
set encoding=UTF-8 nobackup nowritebackup nocompatible background=dark termguicolors autoindent expandtab tabstop=2 shiftwidth=2
syntax on

call plug#begin()
Plug 'lissaferreira/dalton-vim'
Plug 'vim-airline/vim-airline'
Plug 'preservim/nerdtree'
Plug 'ryanoasis/vim-devicons'
Plug 'kassio/neoterm'
Plug 'alvan/vim-closetag'
Plug 'jiangmiao/auto-pairs'
Plug 'sheerun/vim-polyglot'
Plug 'othree/html5.vim'
Plug 'pangloss/vim-javascript'
Plug 'gutenye/json5.vim'
Plug 'elzr/vim-json'
Plug 'HerringtonDarkholme/yats.vim'
Plug 'maxmellon/vim-jsx-pretty'
Plug 'godlygeek/tabular'
Plug 'preservim/vim-markdown'
Plug 'lifepillar/pgsql.vim'
Plug 'StanAngeloff/php.vim'
Plug 'vim-python/python-syntax'
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'SirVer/ultisnips'
Plug 'honza/vim-snippets'
call plug#end()

colorscheme dalton
let g:airline_theme='dalton'
let NERDTreeShowHidden=1
nnoremap <leader>n :NERDTreeFocus<CR>
nnoremap <C-n> :NERDTree<CR>
nnoremap <C-t> :NERDTreeToggle<CR>
nnoremap <C-f> :NERDTreeFind<CR>
" Start NERDTree when Vim is started without file arguments.
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 0 && !exists('s:std_in') | NERDTree | endif

let g:UltiSnipsExpandTrigger="<tab>"
let g:UltiSnipsJumpForwardTrigger="<c-b>"
let g:UltiSnipsJumpBackwardTrigger="<c-z>"
let g:UltiSnipsEditSplit="vertical"
let g:UltiSnipsSnippetDirectories=["~/.vim/UltiSnips"]


" filenames like *.xml, *.html, *.xhtml, ...
" These are the file extensions where this plugin is enabled.
"
let g:closetag_filenames = '*.html,*.xhtml,*.phtml,*.js,*.ts,*.jsx,*.tsx'
" filenames like *.xml, *.xhtml, ...
" This will make the list of non-closing tags self-closing in the specified files.
"
let g:closetag_xhtml_filenames = '*.xhtml,*.jsx,*.tsx'
" filetypes like xml, html, xhtml, ...
" These are the file types where this plugin is enabled.
"
let g:closetag_filetypes = 'html,xhtml,phtml'
" filetypes like xml, xhtml, ...
" This will make the list of non-closing tags self-closing in the specified files.
"
let g:closetag_xhtml_filetypes = 'xhtml,jsx,tsx'
" integer value [0|1]
" This will make the list of non-closing tags case-sensitive (e.g. `<Link>` will be closed while `<link>` won't.)
"
let g:closetag_emptyTags_caseSensitive = 1
" dict
" Disables auto-close if not in a "valid" region (based on filetype)
"
let g:closetag_regions = {
\ 'typescript.tsx': 'jsxRegion,tsxRegion',
\ 'javascript.jsx': 'jsxRegion',
\ 'typescriptreact': 'jsxRegion,tsxRegion',
\ 'javascriptreact': 'jsxRegion',
\ }
" Shortcut for closing tags, default is '>'
"
let g:closetag_shortcut = '>'
" Add > at current position without closing the current tag, default is ''
"
let g:closetag_close_shortcut = '<leader>>'

let g:vim_jsx_pretty_colorful_config = 1 " default 0
let g:python_highlight_all = 1 " Dissable 0

inoremap <silent><expr> <CR> coc#pum#visible() ? coc#pum#confirm()
\: "\<C-g>u\<CR>\<c-r>=coc#on_enter()\<CR>"
function! CheckBackspace() abort
let col = col('.') - 1
return !col || getline('.')[col - 1]  =~# '\s'
endfunction

" Use <c-space> to trigger completion
if has('nvim')
inoremap <silent><expr> <c-space> coc#refresh()
else
inoremap <silent><expr> <c-@> coc#refresh()
endif

" Use `[g` and `]g` to navigate diagnostics
" Use `:CocDiagnostics` to get all diagnostics of current buffer in location list
nmap <silent> [g <Plug>(coc-diagnostic-prev)
nmap <silent> ]g <Plug>(coc-diagnostic-next)

" GoTo code navigation
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)

" Use K to show documentation in preview window
nnoremap <silent> K :call ShowDocumentation()<CR>

function! ShowDocumentation()
if CocAction('hasProvider', 'hover')
call CocActionAsync('doHover')
else
call feedkeys('K', 'in')
endif
endfunction

" Highlight the symbol and its references when holding the cursor
autocmd CursorHold * silent call CocActionAsync('highlight')

Jangan lupa: buka Vim dan ketik :PlugInstall buat install semua plugin.

# Step 3: Setup Language Server dengan coc.nvim

Setelah install coc.nvim lewat vim-plug, sekarang saatnya bikin Vim lu punya otak — alias Language Server. Di setup gua, gua pake banyak extension yang bikin coding di Vim terasa kaya di VS Code, lengkap dengan linting, auto-completion, formatting, sampai snippet dan Tailwind support.

Untuk install semua extension yang gua pake, jalankan ini di command mode Vim:

sh
:CocInstall coc-highlight coc-json coc-css coc-emmet coc-htmlhint coc-tsserver coc-html-css-support coc-html coc-prettier coc-eslint coc-snippets coc-tslint-plugin @yaegassy/coc-tailwindcss3 coc-cssmodules coc-pyright

# Penjelasan Plugin yang Gua Pakai

  • coc-highlight: Bikin warna inline kayak #fff, rgba(), dll bisa langsung di-highlight.

  • coc-json: Biar file JSON bisa dapet IntelliSense dan validasi otomatis.

  • coc-css: Auto-complete properti dan value CSS langsung dari Vim.

  • coc-emmet: Shortcut HTML/CSS kayak ul>li*3 bisa langsung jadi struktur HTML (cepet banget ngetik UI).

  • coc-htmlhint: Buat ngecek kesalahan dan aturan HTML.

  • coc-tsserver: Ini otak utama buat TypeScript & JavaScript. Bisa auto-import, rename symbol, jump to definition, dll.

  • coc-html-css-support: Ngasih auto-complete class CSS langsung di file HTML.

  • coc-html: Tambahan auto-complete buat HTML, termasuk tag dan atributnya.

  • coc-prettier: Auto-format code pake Prettier. Bisa di-set auto-format pas save.

  • coc-eslint: Buat linting dan fix otomatis file JS/TS pake ESLint.

  • coc-snippets: Support snippet biar bisa pake shortcut atau bikin template sendiri.

  • coc-tslint-plugin: Plugin tambahan buat project yang masih pake TSLint (kalau masih butuh).

  • @yaegassy/coc-tailwindcss3: Auto-complete class Tailwind, udah support Tailwind CSS v3 ke atas.

  • coc-cssmodules: Buat lo yang pake CSS Modules di React/Next.js, ini plugin yang wajib.

  • coc-pyright: Language server buat Python dari Microsoft. Ringan, cepat, dan lengkap fitur kayak IntelliSense, type checking, dll.

# Konfigurasi coc-settings.json

Untuk ngatur coc.nvim, kita edit file konfigurasi bernama coc-settings.json. Biasanya file ini ada di: ~/.vim/coc-settings.json

Tapi cara paling gampang: langsung buka lewat command di dalam Vim:

sh
:CocConfig

Command ini bakal otomatis buka coc-settings.json, bahkan bikin file-nya kalau belum ada. Jadi gak perlu cari-cari foldernya manual.

Isi contoh konfigurasinya bisa lo tempel kayak gini:

json
{
  "colors.enable": true,
  "eslint.autoFixOnSave": true,
  "coc.preferences.formatOnSave": true,
  "python.pythonPath": "/usr/bin/python3",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Kalau lu coding dengan JS, TS, HTML, CSS, Python, ini wajib. Tapi jangan khawatir, banyak ekstensi lain juga yang bisa lu install sesuai kebutuhan: coc-go buat Go, dan banyak lagi.
Lu bisa cek disini untuk ekstensi language server lainnya.

Dengan setup ini, Vim gua bisa ngoding HTML, CSS, JS, TS, Tailwind, sampai Python tanpa kompromi. Tinggal buka terminal, buka project, dan semua fitur kayak auto-import, error checking, dan auto-format langsung jalan. Hemat RAM, no mouse, full power.

# Kesimpulan

Vim tuh bukan cuma text editor buat yang pengen ngoding "kaya hacker". Dengan setup yang pas dan plugin kayak coc.nvim, dia bisa jadi powerful IDE yang bisa head-to-head sama tools modern lain. Memang, learning curve-nya agak curam, tapi begitu ngerti konsepnya — lu bakal sadar kalau Vim bukan sekadar tools, tapi filosofi kerja yang bisa bikin lu lebih fokus dan efisien.

Kalau lu tertarik nyoba, mulai pelan-pelan. Tambahin plugin satu-satu, eksplorasi keybinding, dan tweak sesuai kebutuhan lu. Jangan langsung bandingin dengan VS Code. Vim itu soal long game. Dan buat gua pribadi, itu worth it.

Komunitas

Jika lu tertarik ingin belajar lebih dalam lagi, lu bisa gabung komunitas gua bro

Loading...