Konfigurasi Neovim Untuk Web Development ~ hai sob, pada tulisan ini saya mau sedikit berbagi tentang konfigurasi neovim yang saya gunakan.
Konfigurasi neovim untuk web development yang saya setup ini sejujurnya bukan dari pemikiran saya pribadi, melainkan dari copas sana-sini dari internet hehe.
Dan hampir 97% konfigurasi yang saya gunakan adalah mencontek dari cak Takuya Matsuyama, seorang indie developer dari Osaka, Japan. Tentu saya sangat berterima kasih kepada cak Takuya ini, sobat bisa cek langsung di postingannya.
Ini linknya : My Neovim setup for React, TypeScript, Tailwind CSS, etc.
Apa saja yang dibutuhkan?
Berikut ini adalah beberapa hal yang dibutuhkan sob, sesuaikan saja dengan yang sobat butuhkan untuk konfigurasi neovim sobat.
- Black Box : terminal linux, saya ngga suka yang terminal bawaannya.
- Neovim : kenapa ngga pake vim saja? Karena dengan neovim kita bisa lebih mudah melakukan konfigurasi.
- wbthomason/packer.nvim : plugin manager.
- navarasu/onedark.nvim : tema onedark untuk neovim
- echasnovski/mini.nvim#mini.starter : startup screen dengan pilihan beberapa tema.
- Dan plugin lainnya, saya sertakan di bawah saja dengan konfigurasinya.
Baca juga : Cara Install Plugin di Neovim dengan VimPlug
Struktur Directori
Struktur directori ini saya juga meniru milik Takuya Matsuyama.
📂 ~/.config/nvim ├── 📁 after │ └── 📁 plugin ├── 📂 lua │ └── 🌑 base.lua ├── 📁 plugin └── 🇻 init.lua
- Folder after -> plugin : konfigurasi plugin dengan lua.
- Folder lua : terdiri dari base.lua, plugins.lua, maps.lua, dll.
- Folder plugin : konfigurasi LSP.
- File init.lua : konfiguasi.
Install Neovim
Disini saya menggunakan Linux Fedora, untuk menginstall neovim di Fedora, berikut caranya :
sudo dnf install -y neovim python3-neovim
Basic Konfigurasi Untuk Neovim
Buat file base.lua di dalam folder ./.config/nvim/lua/base.lua lalu tulis script berikut :
vim.cmd('autocmd!')
vim.scriptencoding = 'utf-8'
vim.opt.encoding = 'utf-8'
vim.opt.fileencoding = 'utf-8'
vim.opt.termguicolors = true
vim.wo.number = true
vim.notify = require('notify') -- Untuk notifikasi (harus install plugin notify.nvim)
vim.opt.title = true
vim.opt.autoindent = true
vim.opt.hlsearch = true
vim.opt.backup = false
vim.opt.showcmd = true
vim.opt.cmdheight = 1
vim.opt.laststatus = 2
vim.opt.expandtab = true
vim.opt.scrolloff = 10
vim.opt.shell = 'zsh'
vim.opt.backupskip = 'tmp/*,/private/tmp/*'
vim.opt.inccommand = 'split'
vim.opt.ignorecase = true
vim.opt.smarttab = true
vim.opt.breakindent = true
vim.opt.shiftwidth = 2
vim.opt.tabstop = 2
vim.opt.ai = true -- Auto indent
vim.opt.si = true -- Smart indent
vim.opt.wrap = false -- No wrap lines
vim.opt.backspace = 'start,eol,indent'
vim.opt.path:append { '**' } -- Finding files - seacrh down in subfolders
vim.opt.wildignore:append { '*/node_modules/*' }
-- Turn of paste mode when leaving insert
vim.api.nvim_create_autocmd("InsertLeave", {
pattern = '*',
command = "set nopaste"
})
-- Add asteris in block comments
vim.opt.formatoptions:append { 'r' }Buat file highlights.lua di folder ./.config/nvim/lua/highlights.lua untuk konfigurasi cursorline.
vim.opt.cursorline = true vim.opt.termguicolors = true vim.opt.winblend = 0 vim.opt.wildoptions = 'pum' vim.opt.pumblend = 5 vim.opt.background = 'dark'
Buat file maps.lua di folder ./.config/nvim/lua/maps.lua untuk mapping.
local keymap = vim.keymap
-- Do not yank with x
keymap.set('n', 'x', '"_x')
-- Increment/Decrement
keymap.set('n', '+', '<C-a>')
keymap.set('n', '-', '<C-x>')
-- Delete a word backwards
keymap.set('n','dw', 'vb"_d')
-- Select all
keymap.set('n', '<C-a>', 'gg<S-v>G')
-- New tab
keymap.set('n', 'te', ':tabedit<Return>', { silent = true })
-- Split window
keymap.set('n', 'ss', ':split<Return><C-w>w', { silent = true })
keymap.set('n', 'sv', ':vsplit<Return><C-w>w', { silent = true })
-- Move window
keymap.set('n', '<Space>', '<C-w>w')
keymap.set('', 's<left>', '<C-w>h')
keymap.set('', 's<up>', '<C-w>k')
keymap.set('', 's<down>', '<C-w>j')
keymap.set('', 's<right>', '<C-w>l')
keymap.set('', 'sh', '<C-w>h')
keymap.set('', 'sk', '<C-w>k')
keymap.set('', 'sj', '<C-w>j')
keymap.set('', 'sl', '<C-w>l')
-- Resize window
keymap.set('n', '<C-w><left>', '<C-w><')
keymap.set('n', '<C-w><right>', '<C-w>>')
keymap.set('n', '<C-w><up>', '<C-w>+')
keymap.set('n', '<C-w><down>', '<C-w>-')Kemudian buat file init.lua di folder ./.config/nvim/init.lua isi dengan script berikut, agar konfigurasi yang dibuat bisa di load di neovim.
require('base')
require('maps')
require('highlights')
require('plugins')Install Plugin Manager (Packer)
Selanjutnya kita install plugin managernya dengan packer.nvim.
Untuk Unix dan Linux berikut untuk menginstall packer :
git clone --depth 1 https://github.com/wbthomason/packer.nvim\ ~/.local/share/nvim/site/pack/packer/start/packer.nvim
Untuk Windows Powershell :
git clone https://github.com/wbthomason/packer.nvim "$env:LOCALAPPDATA\nvim-data\site\pack\packer\start\packer.nvim"
Lalu buat file plugins.lua di folder ./.config/nvim/lua/plugins.lua.
vim.cmd [[packadd packer.nvim]]
return require('packer').startup(function(use)
-- Packer can manage itself
use 'wbthomason/packer.nvim'
-- Plugin lainnya, di install disini
end)Kemudian jalankan :PackerCompile atau :PackerSync untuk menginstall packer.
Install Tema onedark.nvim
Onedark.nvim adalah tema yang paling saya sukai menulis script web programming, kalau untuk menulis script seperti C/C++ biasanya saya menggunakan NeoSolarized yang saya gunakan di vim saya.
Untuk menginstall onedark.nvim, letakkan script berikut di file ./.config/nvim/lua/plugins.lua.
use 'navarasu/onedark.nvim'
Kemudian jalankan :PackerSync untuk mengcompile dan mengupdate plugin.
Kemudian buat file dengan nama onedark.rc.lua atau onedark.lua saja di folder .config/nvim/plugin/onedark.rc.lua. Berikut konfigurasi yang saya gunakan.
local status, onedark = pcall(require, 'onedark')
if (not status) then return end
require('onedark').setup {
style = 'dark', -- Choose one 'dark', 'darker', 'cool', 'deep', 'warm', 'warmer' and 'light'
transparent = true,
term_colors = true,
ending_tildes = false, -- Show the end-of-buffer tildes.
cmp_itemkind_reverse = false, -- reverse item kind highlight in cmp menu
code_style = {
comments = 'italic',
keywords = 'none',
functions = 'none',
strings = 'none',
variables = 'none'
},
-- Plugins Config
diagnostics = {
darker = true,
undercurl = true,
background = true,
},
}
-- Enable theme
require('onedark').load()Install Startup Screen Untuk Neovim
Ada banyak pilihan yang bisa sobat gunakan untuk tampilan startup screen, diantaranya yang bisa sobat gunakan :
Namun yang saya gunakan adalah mini.nvim, sebab lebih simple. Install mini.nvim dengan packer :
use 'echasnovski/mini.nvim'
Kemudian jalankan :PackerSync. lalu buat file mini.rc.lua di .config/nvim/after/plugin.mini.rc.lua. Berikut konfigurasinya :
local starter = require('mini.starter')
starter.setup({
items = {
starter.sections.telescope(),
},
content_hooks = {
starter.gen_hook.adding_bullet(),
starter.gen_hook.aligning('center', 'center'),
},
})Install Web Devicons
Plugin ini berfungsi untuk menampilkan icon di neovim. Install nvim-web-devicons dengan packer.
use 'nvim-tree/nvim-web-devicons'
Jalankan perintah :PackerSync. Kemudian buat file nvim-web-devicons.rc.lua di .config/nvim/after/plugin/nvim-web-devicons.rc.lua.
local status, icons = pcall(require, 'nvim-web-devicons')
if (not status) then return end
icons.setup {
override = {},
default = true
}
Install Tabline (bufferline.nvim)
Tabline berguna untuk menampilkan buffer atau tab pada neovim, sehingga tampilannya lebih keren.
Ada 2 jenis yang sukai, diantaranya :
Namun saya akan menggunakan bufferline.nvim. Install bufferline.nvim dengan packer. Pastikan sobat sudah menginstall web-dev-icons.
use 'akinsho/bufferline.nvim'
Jalankan perintah :PackerSync untuk menginstall, lalu buat file bufferline.rc.lua di .config/nvim/after/plugin/bufferline.rc.lua.
local status, bufferline = pcall(require, 'bufferline')
if (not status) then return end
require('bufferline').setup ({
options = {
mode = 'tabs',
separator_style = 'slant',
always_show_bufferline = false,
show_buffer_close_icons = true,
show_close_icon = true,
color_icons = true
},
highlights = {
separator_selected = {
fg = '#525252',
},
separator_visible = {
fg = '#073642',
},
separator = {
fg = '#525252',
},
background = {
fg = '#657b83',
},
buffer_selected = {
fg = '#fdf6e3',
bold = true,
underline = false,
},
fill = {
bg = '#1d2d50',
--bg = '#073643',
},
},
})
vim.keymap.set('n', '<Tab>', '<Cmd>BufferLineCycleNext<CR>', {})
vim.keymap.set('n', '<S-Tab>', '<Cmd>BufferLineCyclePrev<CR>', {})Install File Explorer #1 (nvim-tree.lua)
Nvim-tree merupakan file explorer yang saya gunakan di neovim saya, selain nvim-tree, saya juga menggunakan telescope untuk kombinasi.
Install nvim-tree dengan packer :
use 'nvim-tree/nvim-tree.lua'
Jalankan perintah :PackerSync untuk menginstall nvim-tree, kemudian buat file nvim-tree.rc.lua di .config/nvim/after/plugin/nvim-tree.rc.lua.
local status, nvimtree = pcall(require, 'nvim-tree')
if (not status) then return end
require("nvim-tree").setup()Disini, saya hanya menggunakan settingan defaultnya saja. Untuk membuka file explorer dengan nvim-tree, jalankan perintah :NvimTreeOpen dan :NvimTreeClose untuk menutupnya.
Install File Browser #2 (telescope.nvim)
Telescope.nvim juga berguna untuk membuka file dari neovim atau lebih tepatnya file browser.
Install telescope dengan packer :
use 'nvim-lua/plenary.nvim' use 'nvim-telescope/telescope.nvim'
Jalankan perintah :PackerSync untuk menginstall kemudian buat file telescope.rc.lua di .config/nvim/after/plugin/telescope.rc.lua.
local status, telescope = pcall(require, 'telescope')
if (not status) then return end
local actions = require('telescope.actions')
function telescope_buffer_dir()
return vim.fn.expand('%:p:h')
end
local fb_actions = require 'telescope'.extensions.file_browser.actions
telescope.setup {
defaults = {
mappings = {
n = {
['q'] = actions.close
}
}
},
extensions = {
file_browser = {
theme = 'dropdown',
-- disables netrw add use telescope-file-browser in its place
hijack_netrw = true,
mappings = {
-- your custome insert mode mappings
['i'] = {
['<C-w>'] = function() vim.cmd('normal vbd') end,
},
['n'] = {
['N'] = fb_actions.create,
['h'] = fb_actions.goto_parent_dir,
['/'] = function()
vim.cmd('startinsert')
end
}
}
}
}
}
telescope.load_extension('file_browser')
local opts = { noremap = true, silent = true }
vim.keymap.set('n', ';f', '<cmd>lua require("telescope.builtin").find_files({ no_ignore = false, hidden = true })<cr>',
opts)
vim.keymap.set('n', ';r', '<cmd>lua require("telescope.builtin").live_grep()<cr>',
opts)
vim.keymap.set('n', '\\\\', '<cmd>lua require("telescope.builtin").buffers()<cr>',
opts)
vim.keymap.set('n', ';t', '<cmd>lua require("telescope.builtin").help_tags()<cr>',
opts)
vim.keymap.set('n', ';;', '<cmd>lua require("telescope.builtin").resume()<cr>',
opts)
vim.keymap.set('n', ';e', '<cmd>lua require("telescope.builtin").diagnostics()<cr>',
opts)
vim.keymap.set('n', 'sf', '<cmd>lua require("telescope").extensions.file_browser.file_browser({ path = "%:p:h", cwd = telescope_buffer_dir(), respect_git_ignore = false, hidden = true, grouped = true, previewer = false, initial_mode = "normal", layout_config = { height = 40 } } )<cr>',
opts)Lanjut nanti ya mengani Konfigurasi Neovim Untuk Web Development… Masih ada banyak plugin yang belum di install untuk kebutuhan web dev.
