Setting VIM Sebagai IDE Developer


Sebagai seorang developer, tentu kita mempunyai tools-tools favorit tersediri yang kita sukai, banyak debat dengan pertanyaan "apa editor terbaik untuk pemrograman?" atau yang lebih spesifik misalnya "VSCode vs SublimeText" atau "Vim vs VSCode", sering kita terjebak pada pertanyaan-pertanyaan ini, menurut Seredata tidak ada teks editor terbaik, yang ada adalah apakah anda nyaman menggunakannya dengan segala fitur yang diberian? apakah anda menjadi lebih produktif dengan menggunakannya?

Pada kesempatan kali ini, saya ingin berbagai bagaimana cara untuk mengkonfigurasi (setting) Vim menjadi lebih powerfull, seperti diketahui Vim datang dengan keadaan yang "polos" dan tetunya hal ini bisa kita ubah dengan konfigurasi dan plugin-plugin yang telah tersedia, pada sistem operasi linux yang saya gunakan (PopOS), konfigurasi vim disimpan pada file .vimrc yang letaknya pada "~/.vimrc", jika file konfigurasi ini belum ada, maka kita harus membuatnya terlebih dahulu.


Konfigurasi Awal

1. Kita akan membuat konfigurasi dimana jika file .vimrc di-update maka perubahan dari file tersebut akan langsung dilakukan tanpa harus membuka ulang Vim, dengan perintah sebagai berikut:


autocmd! bufwritepost ~/.vimrc source %

2. Melakukan reload ulang file yang dibuka secara otomatis jika file tersebut berubah karena update dari file lain (misalnya pada SASS: kita mengedit main.scss, maka perubahan pada main.css akan ditampilkan secara otomatis, perintahnya adalah sebagai berikut:


set autoread
au CursorHold * checktime
set updatetime=750

3. Mebuat baris kode menjadi relatif, set warna dan tabline dengan perintah


set number relative
set showtabline=2
set t_Co=256

4. Membuat pemisah jendela menjadi karakter "|", dengan perintah


set list
set listchars=tab:\|\[spasi]

//ganti [spasi] dengan karakter spasi.

5. Menampilkan highlight cursor secara vertical dan horizontal dengan perintah:


set cursorline
hi Cursorline term=NONE cterm=NONE ctermbg=235 ctermfg=NONE
set cursorcolumn
hi CursorColumn ctermbg=8

6. Setting untuk sintaks, dengan perintah


syntax on
set encoding=utf8

7. Settingan untuk wrap tulisan jika melewati batas yang ditentukan, dengan perintah:


set wrap
set textwidth=0
set wrapmargin=0
set formatoptions-=t

*jika tidak ingin melakukan wrap, maka hapus semua perintah ganti dengan set nowrap

8. Setting pintah mode dari insert ke normal, jika pada Vim default untuk keluar dari insert mode menggunakan Esc maka saya lebih nyaman dengan karakter jj, setting pindah layar, dengan perintah:

imap jj<esc>

nnoremap <C-J> <C-W><C-J>
nnoremap <C-K> <C-W><C-K>
nnoremap <C-L> <C-W><C-L>
nnoremap <C-H> <C-W><C-H>


PLUGIN


Plugin pertama yang saya gunakan adalah Plugin Manger, dimana fungsi dari plugin ini adalah untuk melakukan manajemen plugin-plugin lain yang akan kita install, adapun Plugin Manager yang saya gunakan adalah Vundle.

1. Untuk skema warna saya menggunakan PaperColor
2. Untuk membuka file secara cepat saya menggunakan CtrlP
3. File broswer dan memberi komentar saya gunakan NERDTree dan NERDCommenter
4. Autocomplete saya menggunakan deoplete, ale.

Untuk plugin selanjutnya dapat dilihat konfigurasi yang saya gunakan secara menyeluruh, hasil dari konfigurasi tersebut adalah sebagai berikut:


autocmd! bufwritepost ~/.vimrc source %
set autoread
au CursorHold * checktime
set updatetime=750
set number relativenumber
set showtabline=2
set t_Co=256
set list
set listchars=tab:\|\
set cursorline
hi CursorLine term=NONE cterm=NONE ctermbg=235 ctermfg=NONE
set cursorcolumn
hi CursorColumn ctermbg=8

syntax on
set encoding=utf8

"set nowrap
set wrap
set textwidth=0
set wrapmargin=0
set formatoptions-=t

imap jj <esc>

"remap key split navigation
nnoremap <C-J> <C-W><C-J>
nnoremap <C-K> <C-W><C-K>
nnoremap <C-L> <C-W><C-L>
nnoremap <C-H> <C-W><C-H>

"================Vundle

set nocompatible
filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

Plugin 'VundleVim/Vundle.vim'

"Plugin here
Plugin 'NLKNguyen/papercolor-theme'
Plugin 'ctrlpvim/ctrlp.vim'
Plugin 'itchyny/lightline.vim'
Plugin 'easymotion/vim-easymotion'
Plugin 'scrooloose/nerdtree'
Plugin 'scrooloose/nerdcommenter'
Plugin 'StanAngeloff/php.vim'
Plugin 'mattn/emmet-vim'
Plugin 'stephpy/vim-php-cs-fixer'
Plugin 'shawncplus/phpcomplete.vim'
Plugin 'dart-lang/dart-vim-plugin'
Plugin 'thosakwe/vim-flutter'
Plugin 'dense-analysis/ale'
Plugin 'Shougo/deoplete.nvim'
Plugin 'roxma/nvim-yarp'
Plugin 'roxma/vim-hug-neovim-rpc'
Plugin 'jiangmiao/auto-pairs'
Plugin 'doums/darcula'
Plugin 'morhetz/gruvbox'
Plugin 'mengelbrecht/lightline-bufferline'
Plugin 'KabbAmine/vCoolor.vim'
Plugin 'ap/vim-css-color'
Plugin 'posva/vim-vue'
Plugin 'leafgarland/typescript-vim'
Plugin 'prettier/vim-prettier'
Plugin 'fatih/vim-go'
Plugin 'Yggdroot/indentLine'

"Plugin end
call vundle#end()

filetype plugin indent on

"set colorscheme
set background=light

colorscheme PaperColor
"colorscheme darcula
"colorscheme gruvbox

"css completion
autocmd FileType css set omnifunc=csscomplete#CompleteCSS
autocmd FileType scss set omnifunc=csscomplete#CompleteCSS

set tabstop=2
set shiftwidth=2
set softtabstop=2
set expandtab

au BufNewFile, BufRead *.js, *.html, *.css
      \ set tabstop=2 |
      \ set softtabstop=2 |
      \ set shiftwidth=2

"key for nerdtree
nmap <silent> <F3> :NERDTreeToggle<CR>

"setting for color pencil
let g:pencil_higher_contrast_ui=0
let g:pencil_neutral_code_bg=1

"lightline
set laststatus=2
"set noshowmode

autocmd BufWritePost, TextChanged, TextChangedI * call lightline#update()

let g:lightline = {
  \ 'colorscheme': 'PaperColor',
  \ 'component_function': {
  \ 'readonly': 'LightlineReadonly',
  \ 'filename': 'LightlineFilename',
  \}
  \}

let g:lightline.tabline = {
      \ 'left': [['buffers']],
      \ 'right': [['tabsel']],
      \}


let g:lightline#bufferline#show_number=1
let g:lightline#bufferline#shorten_path=1
let g:lightline#bufferline#unnamed = '[No Name]'
let g:lightline.component_expand = {'buffers': 'lightline#bufferline#buffers'}
let g:lightline.component_type = {'buffers': 'tabsel'}
let g:lightline#bufferline#number_map = {
      \ 0: '⁰', 1: '¹', 2: '²', 3: '³', 4: '⁴',
      \ 5: '⁵', 6: '⁶', 7: '⁷', 8: '⁸', 9: '⁹'
      \}

function! LightlineFilename()
  let filename = expand('%:t') !=# '' ? expand('%:f') : '[No Name]'
  let countLines = line('$')
  return filename. ' ['.bufnr('%'). ']' . ' [' . countLines . ']'
endfunction

function! LightlineReadonly()
  return &readonly && &filetype !=# 'help' ? 'RO' : ''
endfunction

" PHP
function! PhpSyntaxOverride()
  hi! def link phpDocTags phpDefine
  hi! def link phpDocParam phpType
endfunction

augroup phpSyntaxtOverride
  autocmd!
  autocmd FileType php call PhpSyntaxOverride()
augroup END

" php-cs-fixer
let g:php_cs_fixer_rules = "@PSR2"
let g:php_cs_fixer_php_path="/usr/local/bin/php-cs-fixer"
let g:php_cs_fixer_enable_default_mapping = 1
let g:php_cs_fixer_dry_run = 0
let g:php_cs_fixer_verbose = 0

autocmd BufWritePost *.php silent! call PhpCsFixerFixFile()
autocmd FileType php set omnifunc=phpcomplete#CompletePHP

" Dart file auto detection
au BufRead, BufNewFile *.dart set filetype=dart

" Deoplete
let g:deoplete#enable_at_startup=1

" auto pairs
let g:AutoPairsFlyMode=1
imap <F9> <M-b>


let g:ale_fixers = {
      \'*': ['remove_trailing_lines'],
      \'javascript': ['prettier'],
      \}

let g:ale_linters = {
      \'javascript': ['eslint'],
      \}

let g:ale_completion_enabled=1
let g:ale_fix_on_save=1

"<TAB>: completion
inoremap <expr><TAB> pumvisible() ? "\<C-n>" : "<TAB>"

"tabline
let g:tablineclosebutton=1

"Color picker
nmap <silent> <F5> :VCoolor<CR>
let g:vcoolor_custom_picker = 'zenity --title "Pilih Warna" --color-selection --show-palette '

"Emmet Tab
"imap <expr> <tab> emmet#expandAbbrIntelligent("\<tab>")

" indenLine
let g:indenLine_enabled=1
let g:indentLine_char_list = ['¦']
"let g:indentLine_color_term = 194
"let g:indentLine_char_list = ['|', '¦', '┆', '┊']



Setting VIM Sebagai IDE Developer Setting VIM Sebagai IDE Developer Reviewed by jc on November 05, 2019 Rating: 5

No comments:

Powered by Blogger.