# Menjadi atlit Vim dengan Nvim - Part 1 # Overview Vim adalah editor yang paling menyebalkan, saking menyebalkannya ada jokes yang disebut seperti ini: > Untuk membuat secret key pada backend, berikan saja vim editor pada frontend developer, biarkan ia struggle selama sepuluh menit dan kemudian kamu akan mendapatkan secret key acak. Sebenarnya Vim itu menyenangkan **kalau kita paham Vim itu memang memberikan kemudahan.** Sayangnya banyak yang sudah nyaman dengan editor yang sudah ada saat ini seperti Zed, VSCode, VSCodium, Jetbrains, dan yang lain. Pertanyaannya, apakah salah jika tidak menggunakan Vim? Apakah salah jika menggunakan Vim? Jawabannya tidak, baik menggunakan Vim atau tidak hidupmu akan sama saja. > Lantas, kenapa orang-orang menggunakan Vim? Masalah dari penggunaan editor seperti VSCode dan Jetbrains adalah resource yang besar. Lantas mengapa orang-orang menggunakannya? Jawabannya karena kemudahan yang ditawarkan. Sekali klik, install, jalan, boom maka kamu akan lebih mudah coding tanpa setup hal-hal yang kecil. Namun, kita lupa konsep membeli atau memakai berarti juga harus menjaga, konsep ini juga seringkali diabaikan pada penggunaan editor seperti VSCode, karena banyaknya plugin yang menarik, lucu, **walaupun sebenarnya tidak begitu berguna**, sebagian software engineer cenderung menjadi impulsif dan main asal install, kemudian berdampak pada penurunan kinerja aplikasi itu sendiri sehingga menggunakan VSCode pada akan memberikan kesan lambat seperti bekerja pada komputer jadul yang lambat. Oleh karena itulah, banyak orang mulai kembali ke dasar, yaitu menggunakan Vim. Vim sebenarnya bukan editor baru, melainkan editor lama yang sudah digunakan bahkan oleh software engineer di bawah tahun 2000-an, karena Vim juga dibuat pada 1991 yang merupakan improvisasi dari Vi, yaitu editor yang dirilis pada tahun 1971. Salah satu kelebihan Vim itu sendiri adalah, Vim sangat ringan karena tidak membutuhkan resource yang besar, namun kelemahan lainnya adalah tentu karena tidak sekompleks VSCode dan editor lainnya, Vim tidak akan terlihat eye-catching dan lumayan rumit bagi yang pertama kali terjun menggunakan editor ini. Vim sebenarnya selalu menempel di server-server linux, bahkan kita sering akan menjumpai banyak orang melakukan edit data di server menggunakan Vim. Namun yang kita akan gunakan kali ini adalah versi yang lebih baik dari Vim yaitu Nvim (Neovim). # Neovim Neovim atau biasa disebut nvim merupakan editor buatan **Bram Moolenaar**. Neovim merupakan fork (percabangan) dari repositori vim, bukanlah sebuah kloningan repositori, sehingga Nvim akan selalu cocok dengan vim karena developmentnya akan linear. Neovim memiliki keunggulan, selain karena dibangun di atas VIM, Neovim mengizinkan pengguna melakukan eksplorasi dengan menggabungkannya dengan Lua, sebuah bahasa pemrograman yang dapat memperluas fungsionalitas editor ini. Tidak ada yang mengetahui kapan pastinya komunitas Neovim mulai kembali naik daun, karena komunitas ini dikatakan sebagai kultus. Sekali kamu masuk, kamu akan sulit keluar. Namun tenang saja, itu kan hanya jokes. 😝 # Instalasi Pada kali ini saya akan menggunakan Ubuntu, saya juga menyarankan siapapun yang membaca ini untuk menggunakan ubuntu. Kalau kamu belum menggunakan ubuntu, maka gunakan [multipass](https://multipass.run/install). Baik kamu menggunakan windows atau ubuntu sekalipun, saya akan menyarankan menggunakan multipass. Tujuannya agar latihan ini akan di-isolasi dan tidak mengganggu neovim di laptop kamu. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732674319447/153c159d-0b09-4018-870f-e6fd30e34299.png align="center") Ini adalah settingan instance yang saya gunakan, atau kalau kamu lebih suka menggunakan command line, masukkan perintah di bawah ini: ```plaintext multipass launch 22.04 --name latihan-multipass --cpus 1 --memory 2G --disk 32G ``` Oke, sekarang kita masuk ke instance yang kita bangun: ```plaintext hudya@perogeremmer-pc:~$ multipass list Name State IPv4 Image latihan-multipass Running 10.129.14.107 Ubuntu 22.04 LTS hudya@perogeremmer-pc:~$ multipass shell latihan-multipass Welcome to Ubuntu 22.04.5 LTS (GNU/Linux 5.15.0-122-generic x86_64) * Documentation: https://help.ubuntu.com * Management: https://landscape.canonical.com * Support: https://ubuntu.com/pro System information as of Wed Nov 27 10:08:04 WIB 2024 System load: 0.0 Processes: 92 Usage of /: 6.9% of 24.05GB Users logged in: 0 Memory usage: 11% IPv4 address for ens3: 10.129.14.107 Swap usage: 0% Expanded Security Maintenance for Applications is not enabled. 33 updates can be applied immediately. 21 of these updates are standard security updates. To see these additional updates run: apt list --upgradable Enable ESM Apps to receive additional future security updates. See https://ubuntu.com/esm or run: sudo pro status New release '24.04.1 LTS' available. Run 'do-release-upgrade' to upgrade to it. To run a command as administrator (user "root"), use "sudo ". See "man sudo_root" for details. ubuntu@latihan-multipass:~$ ``` Kalau kamu ketik `vim` maka kamu akan melihat tampilan seperti ini: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732677010431/43a8c8e6-3fd3-406c-9c46-a9a4d0f9a607.png align="center") Artinya `vim` sudah terinstall. Sekarang kamu akan bertanya, bagaimana keluar dari `vim`? Ada beberapa step: 1. Tekan tombol `esc` untuk memastikan kamu kembali ke command mode. 2. Tulis pada keyboard `:q` atau `:qa`, sertakan juga titik duanya. 3. Tekan tombol `enter` Perhatikan GIF di bawah ini: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732679899424/ef0a362a-3b22-4432-bb0d-dcd97793e950.gif align="center") # Instalasi Neovim Sekarang kita akan melakukan instalasi Neovim, tapi instalasi yang kita lakukan tidak akan menggunakan `apt` maupun `snap`, melainkan langsung dari [github repository-nya](https://github.com/neovim/neovim). Tujuannya agar kita belajar dan paham bagaimana cara build bekerja. Pertama, pastikan dulu sudah terinstall dua hal, yaitu `build essentials` dan `cmake`. Masukkan perintah berikut. ```plaintext sudo apt install build-essential cmake gettext ``` Setelahnya kita clone dulu di home ubuntu kita ```plaintext git clone https://github.com/neovim/neovim.git ``` Kemudian masukkan perintah ini baris perbaris ```plaintext cd neovim git checkout -b stable make CMAKE_BUILD_TYPE=Release sudo make install ``` Perintah yang dilakukan di atas adalah, masuk ke folder neovim yang sudah diclone menggunakan git, kemudian pindah ke branch stable dimana kode di branch ini disiapkan khusus untuk neovim versi stabil. Jika kamu menemukan error sejenis ini atau apapun yang tulisannya error ```plaintext gmake[3]: *** [CMakeFiles/treesitter.dir/build.make:92: build/src/treesitter-stamp/treesitter-configure] Error 1 gmake[3]: Leaving directory '/home/ubuntu/neovim/.deps' gmake[2]: *** [CMakeFiles/Makefile2:477: CMakeFiles/treesitter.dir/all] Error 2 gmake[2]: Leaving directory '/home/ubuntu/neovim/.deps' gmake[1]: *** [Makefile:91: all] Error 2 gmake[1]: Leaving directory '/home/ubuntu/neovim/.deps' make: *** [Makefile:98: deps] Error 2 ``` Masukkan perintah berikut: ```plaintext sudo rm -r .deps sudo rm -r build ``` Lalu ulang lagi proses berikut: ```plaintext make CMAKE_BUILD_TYPE=Release sudo make install ``` Sekarang ketik `nvim`, maka kamu akan melihat tampilan berikut: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732683871617/3cfbc36d-be29-4b2e-8f00-29e9ace37d82.png align="center") Untuk tahu version stablenya cek [website resminya](https://neovim.io/) dan cari di bagian bawah. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732683972754/51643010-216c-48ee-9bc7-eaeefdd0991a.png align="center") --- # Mode dan Perintah Dasar Pada `vim` terdapat tiga mode dasar, yaitu: * Command Mode * Insert Mode * Visual Mode ## Command Mode ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732705437726/b11be3a5-0773-44fa-91d8-4761d0ed21da.png align="center") Apabila kamu melihat tampilan di atas merupakan tampilan dari command mode, artinya kita bisa memberikan perintah baru pada editor vim, misalnya kita coba masukkan perintah berikut ```plaintext :set number ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732705518822/542ed94f-355b-43a8-bca3-8b3791a5c83e.gif align="center") Kamu akan mendapatkan angka muncul di dalam editor nvim. Perintah command mode ada banyak, namun salah satu yang basic adalah `:set number`. ## Insert Mode Sekarang tekan tombol `esc` lalu tekan `i` atau `a`, kamu akan melihat editor berubah menjadi ada tulisan `β€”insertβ€”`. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732705650181/fec2d0bc-d5df-49ba-9fc6-f014404e9681.gif align="center") Setelah mode berubah menjadi `- - INSERT - -` kamu bisa langsung mengetik apapun seperti biasa, untuk kembali ke mode command cukup tekan tombol `esc`. ## Visual Mode Untuk masuk ke mode visual kamu harus kembali ke mode command terlebih dahulu. Tekan tombol `v` maka kamu akan melihat mode berubah menjadi `- - VISUAL - -`, sekarang blok teks yang ingin kamu hapus dan tekan `d`. Viola akan terhapus! ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732705833381/b4ad0200-6af0-4e5c-93e7-9912e62ad5a9.gif align="center") --- # Some Basic Things ## Paste Pada paragraf di `vim`, kamu bisa mengelola beberapa hal yang sederhana, misalnya coba kalian copy teks di bawah ini: ```plaintext Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum suscipit turpis, vulputate viverra mi. Duis dapibus nunc ac metus euismod, ut blandit diam hendrerit. Quisque fringilla rutrum euismod. Suspendisse tincidunt dapibus nibh et viverra. Nunc luctus consequat suscipit. In et efficitur tellus. Sed vulputate dignissim massa sed pretium. Nullam quis ipsum a metus bibendum bibendum. Mauris laoreet vulputate tortor vel aliquet. Morbi eget faucibus sapien. Vivamus et purus varius, vehicula erat posuere, commodo metus. Ut auctor, nulla eu maximus blandit, risus ante dapibus lectus, vel viverra sem nisi ut justo. Vivamus quis vestibulum elit. In ac tortor in mauris iaculis consectetur at vitae quam. Sed ullamcorper erat eu elit commodo iaculis. Pellentesque in venenatis augue, id pretium lacus. Sed quis eleifend nibh, vitae iaculis purus. Quisque in tristique sapien. Pellentesque id aliquet enim. Fusce cursus quam id porta pharetra. Donec tempus accumsan dictum. Donec nec purus ornare, volutpat quam vitae, elementum turpis. Cras at venenatis dui. Donec molestie maximus augue, non facilisis risus pulvinar ac. Sed velit dolor, vehicula at dui in, dignissim mattis tellus. Proin libero nunc, lobortis sit amet tristique in, auctor vitae purus. ``` Untuk paste di vim, pertama masuk ke mode insert (tekan i), lalu tekan tombol keyboard `CTRL + SHIFT + V`. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732707035556/9c7f9880-edcf-4410-a8f6-15816a52d02f.gif align="center") ## Find Untuk mencari di vim menggunakan teks di atas, masukkan perintah pada command mode `/` (menggunakan regex) atau `?` diikuti dengan teks yang dicari, misalnya `purus`. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732710803022/c4699bcc-03bc-4628-a785-759f02efb7df.gif align="center") Untuk pindah ke bagian pencarian selanjutnya, tekan n (n kecil) untuk maju ke depan dan N (n besar dengan cara tekan Shift) untuk mundur ke belakang. Untuk menghentikan higlight keyword dari pencarian tadi, tekan esc untuk kembali ke mode command lalu masukkan perintah `:noh` dan tekan enter. Untuk berpindah antar paragraf tekan `Shift + {` untuk mundur dan `Shift + }` ke paragraf selanjutnya. # Using Explorer Kita akan sedikit menggunakan explorer pada nvim, kita pastikan kita berada di home terlebih dahulu, kemudian masukkan perintah ke bawah baris perbaris: ```plaintext cd ~ mkdir latihan cd latihan ``` Sekarang kembali ketik `nvim` di dalam folder latihan pada terminal, lalu masukkan perintah `:Explore` pada command mode. Untuk membuat file baru baru, tekan tombol `%` (Shift + angka yang ada persennya) , masukkan namanya misalnya `hello.txt`, lalu masukkan perintah `:w` dan tekan enter untuk save . Kembali ke mode command (tekan esc) lalu masukkan `:Explore` lagi kemudian kamu akan menemukan file `hello.txt` yang kamu temukan. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732711543177/be8e0f3d-f003-4f9b-84d5-6797639e7d00.gif align="center") Untuk merubah nama file, kembali jalankan `:Explore` lalu arahkan ke file yang ingin dirubah, tekan `R` (tekan `Shift + R`) untuk merubah namanya lalu tekan enter.
πŸ’‘
Kenapa harus pake Shift + R? Karena r kecil akan mengurutkan file, kalau gak percaya coba aja 😝
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732712010485/1eedabd5-1ffe-4829-ae5a-e7b676d76cec.gif align="center") --- # Playing with Tabs Sekarang kita akan bermain dengan tab yang di-split seperti fitur pada editor lain. Masuk kembali ke nvim lalu tulis `:split` atau `:vsplit` untuk melakukannya secara vertical. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732712894354/cbb418db-2354-40a7-85c7-1057591495e4.gif align="center") Untuk berpindah tekan tombol `CTRL + W` lalu tekan tombol arrow kanan kiri bawah dan tekan tombol `CTRL + WW` untuk pindah ke tab selanjutnya. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732713128195/877fb7b1-e22e-4bbd-9a93-1daeb57aba72.gif align="center") Untuk rotate atau membalik tabnya tekan `CTRL + WR`. Untuk membuatnya jadi kelihatan berpindah atau rotate, kita perlu buat tiga file dulu. Masukkan perintah berikut: ```plaintext touch file1.txt file2.txt file3.txt ``` Hasilnya: ```plaintext # Hasil ubuntu@latihan-multipass:~/latihan$ touch file1.txt file2.txt file3.txt ubuntu@latihan-multipass:~/latihan$ ls file1.txt file2.txt file3.txt hello-diubah.txt ``` Sekarang buka lagi tiga tab dan gunakan perintah `:Explore` untuk membuka masing-masing file pada tab (tekan `enter` ketika ingin membuka filenya), kombinasikan dengan `CTRL + WW` untuk berpindah. Jangan lupa masukkan perintah `:w` untuk save pada setiap file (jangan `:wq` karena akan menutup tab). Perhatikan GIF berikut. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732713488925/3e3efac1-ceab-463f-a301-4b4dd2e6ad2c.gif align="center") # Setup Config & Plugins ## Setup Default Script Sekarang pergi ke `~/.config/nvim` dengan perintah `cd ~/.config/nvim`. Kalau kamu menemukan pesan seperti ini: ```plaintext ubuntu@latihan-multipass:~$ cd ~/.config/nvim -bash: cd: /home/ubuntu/.config/nvim: No such file or directory ``` Maka jalankan script di bawah ini untuk membuat folder .config dan nvim di dalamnya. ```plaintext mkdir ~/.config mkdir ~/.config/nvim ``` Sekarang kembali jalankan perintah `cd ~/.config/nvim`. Di dalamnya buat file baru bernama `init.lua` dengan cara `touch init.lua`, file `init.lua` akan digunakan sebagai file utama pada saat melakukan inisiasi nvim (saat nvim dibuka). Setelah membuat file `init.lua`, masuk menggunakan nvim dengan cara `nvim init.lua` lalu masukkan kode di bawah ini: ```plaintext vim.cmd('set number') ``` Kemudian setelah selesai, kembali ke command code (tekan esc) dan masukkan perintah `:wq` (write and quite / save and quit). Perhatikan GIF berikut: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732706466474/33afcbc7-81b0-4a8b-86e9-9b4bcb46fcca.gif align="center") Sekarang ketik `nvim` kembali pada terminal dan kamu akan melihat otomatis ada nomor pada editor nvim kamu. ## Instalasi pyright Sekarang kita perlu menginstall [nvm](https://github.com/nvm-sh/nvm) (Node version manager) karena kita ingin menggunakan [pyright](https://www.npmjs.com/package/pyright), sebuah library di node static type checker untuk Python yang dikembangkan oleh Microsoft. **pyright** adalah sebuah language server yang menyediakan berbagai fitur analisis kode Python, termasuk: * Type checking * Linting * Auto-import suggestions * Code navigation * Refactoring Masukkan perintah berikut untuk instalasi di ubuntu multipass. ```plaintext curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash ``` Setelah selesai masukkan perintah: ```plaintext source ~/.bashrc ``` Tujuannya untuk mengaktifkan ulang terminal agar bisa menggunakan nvm (node version manager). Sekarang coba jalankan `nvm --version` apabila berhasil kamu akan melihat tampilan seperti ini: ```plaintext ubuntu@latihan-multipass:~/latihan$ nvm --version 0.40.1 ``` Kita akan coba install versi node v22.11.0, masukkan perintah berikut: ```plaintext nvm install v22.11.0 ``` Tunggu prosesnya selesai dan sekarang kamu bisa memasukkan perintah `node -v`. Apabila berhasil: ```plaintext ubuntu@latihan-multipass:~/latihan$ node -v v22.11.0 ``` Sekarang install pyright dengan cara: ```plaintext npm -g install pyright ``` Untuk memeriksanya jalankan perintah `pyright` maka kamu akan melihat seperti ini: ```plaintext ubuntu@latihan-multipass:~/latihan$ pyright 0 errors, 0 warnings, 0 informations ``` ## Ubah file Init Sekarang kita ubah kembali file `init.lua` dengan cara `nvim ~/.config/nvim/init.lua`. Ganti seluruh kode di dalamnya dengan kode berikut: ```plaintext -- setup vim.cmd('set number') -- packages local Plug = vim.fn['plug#'] vim.call('plug#begin') Plug 'neovim/nvim-lspconfig' Plug 'hrsh7th/cmp-nvim-lsp' Plug 'hrsh7th/cmp-buffer' Plug 'hrsh7th/cmp-path' Plug 'hrsh7th/cmp-cmdline' Plug 'hrsh7th/nvim-cmp' vim.call('plug#end') -- config LSP require('lspconfig').pyright.setup{} local cmp = require('cmp') cmp.setup { sources = { { name = 'nvim_lsp' }, }, mapping = cmp.mapping.preset.insert({ [''] = cmp.mapping.complete(), [''] = cmp.mapping.confirm({ select = true }), }), } -- config key map vim.keymap.set("n", "gd", function() vim.lsp.buf.declaration() end) ``` Save dengan cara masuk mode command (tekan esc) lalu masukkan `:wq`. Kemudian kita perlu menginstall [vim-plug](https://github.com/junegunn/vim-plug?tab=readme-ov-file), yaitu alat untuk mengelola plugin di Vim/Neovim. Ini memungkinkan kamu dengan mudah menginstal, memperbarui, dan menghapus plugin. Caranya simple, karena kita pakai unix (linux di ubuntu), masukkan perintah ini: ```plaintext sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim' ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732714764476/2c573015-8f26-42c7-b21e-a3f2c6b493be.png align="center") Sekarang buka kembali nvim dan kamu akan menemukan error seperti ini: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732714727921/e1c5f1b0-9a6f-4c82-8643-1ca088906493.png align="center") Jangan khawatir, cukup tekan tombol enter lalu ketik `:Plug` pada mode command lalu tekan tombol `tab`, kamu akan melihat autocompletion. Untuk berpindah ke baris selanjutnya tekan `tab` kembali dan tekan enter pada bagian `:PlugInstall`. Tunggu hingga proses selesai. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732714919488/27534baa-8fbc-49b8-9e85-6e04d33b5267.gif align="center") Sekarang di folder `latihan`, buat file baru bernama `hello.py` dengan cara `touch hello.py` atau `nvim hello.py`. Kita akan membuktikan apakah plugin language server yang baru saja kita install sudah berhasil? Mari kita buktikan! Perhatikan GIF berikut: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732715221578/15f3e030-d326-428f-95d5-2127e2b567b5.gif align="center")
πŸ’‘
Perhatikan bahwa terdapat auto completion bahkan linter di dalamnya sehingga ketika saya kembali ke mode command dan terdapat kesalahannya, editor Nvim akan memberitahu letak kesalahannya.