Cool & Modularized vim configurations to work like an IDE
(Sorry for low quality gif, i'v tried to optimize and reduce the demo.gif size. I'll update it later when i have time)
View asciinema version (without nerd font it look not too good)
Currently i'm using coc.nvim. But there's also a version using ncm2, you can try it here.
This's my efforts to create an IDE like with nvim. With cover a lots of great features for coding: syntax, autocomplete, snippets, language server protocol...but with very simple and modularized scripts, which every one can easy understand and config.
My vim story
I'v falled in love with Vim in the first time i'v tried it. I love the way i can coding, writing without using mouse or trackpad to move the cursor arround...
In the past, i just use VSCode as my main editor. If Vim doesn't exist in my life, i think VSCode definitely is the best (with me).
There are times i'v quit using Vim cause it's so hard to customize and using, mostly because i can't integrate autocomplete for it. So i give up and back to using VSCode.
But then i'v figure out that i can't life without Vim. I have to install VSCodeVim (An extension provide some Vim feature in VSCode). Although it work, but it lack a lot of Vim's features, and it slow down my machine too.
Then i'm back with vim, this time i pay a lots of time to learn, to customize my vimrc. And now, i'm really happy that i can use Vim (Nvim) as my main editor with those configurations. I hope this can help you all too 😊
Those configurations is only for Neovim, although most plugins work with Vim too, but i'v built this only for Neovim.
For Vim, i just have some minimal configurations in my dotfiles.
Those configurations work well on almost all OS i'v ever used (OSX, Linux, Window...).
But as it scale, i haven't have times to check it all, for now i just use OSX at home and Linux at work. So i can only make sure it work well on OSX and Linux. If you have any problem with Window please open an issue.
In order to have all the coolest features. You should install lastest release (>= 0.4.0) Nvim. Which support some new great features like float window...
There's a lot of plugins that use external packages (Like language server protocol...). And we do need to install Nvim Node.js provider too. So Nodejs & Npm is needed.
Please download and install it or you can install it via package manager
We have to install python providers (most nvim plugins do need em to work). Python 2 is no actually required. But some plugin may need it, so just install them all 😆
Assume you are using linux:
# Installing python 2.7 and pip for it
sudo apt install python2.7 python-pip
# Installing python-pip for 3.6
sudo apt install python3-pip
# Install neovim for python 2
pip2 install pynvim
# Install neovim for python 3
pip3 install pynvimAlready installed python neovim ? Then upgrade it (Some plugins need latest versions)
# Upgrade neovim for python 2
pip2 install --upgrade pynvim
# Upgrade neovim for python 3
pip3 install --upgrade pynvimNvim Node.js client is also needed (for neovim to be able to communicate with plugins). Let install it too:
npm install -g neovimFor clipboard support you must install xclip or xclipboard
Before starting with this step, you must make sure that you'v read and install everything required in above steps.
And make sure there's no ERROR showing when running :checkhealth in nvim.
Download everything in this repo and put em in the nvim folder of yours (Usually it's in ~/.config/nvim).
Or clone it with git (make sure there no file's in ~/.config/nvim or that folder does not exist for git to work):
git clone [email protected]:kyoz/neovim.git ~/path_to_your_nvim_folder --depth 1
" Example
git clone [email protected]:kyoz/neovim.git ~/.config/nvim --depth 1
Open nvim and use :PlugInstall or :PlugI to install all plugins (If there are errors showing when you first running this, just enter to pass them all).
Quit and re-open nvim and now you have nvim with a lots of feature which can be your main IDE.
In order to make everything look cool as it have to (with vim-arline, nerd-tree icons...), we have to using patched fonts. You can view some pathced fonts here.
There's a /fonts folder with patched Iosevka font, which i'm using now. You can use it too.
I'v tried a lots of fonts, but this Iosevka font seem suitable for me, it's easy to read and doesn't make me lose focus when coding.
I'v use neosnippet to provide snippets for Vim. You can view all the snippets i have in snippets/ folder.
Currently i just add some basic snippet with some languages i usually use: html, css, javascript, typescript....
Because i use Angular, Material Components and Flex layout a lots. I also create snippets for em too 😊. It's super useful.
Just view some examples in my snippets and you'll know how to create your own snippets.
It's hard to cover all the cases when install neovim in each machine, os...
Please run :checkhealth in nvim to make sure everything is ok. Follow it's constructions and fix any errors you see.
If there's still error, please open and issue and let me know, i'm happy to help.
- Html
- Css, Scss, Sass, Less
- Javascript, Typescript
- Python
- Vimscript
- C, C++ (Not use so much)
- Other files types like: Bash, Dockerfile, Markdown, Json...
Wait, why there's only a few languages ?
To provide autocomplete feature, i do use coc.nvim. There's a lots of extensions (which support for more languages, frameworks, filetypes...)...you can see it all in coc.nvim's Readme
Why not use other autocomplete plugin like deoplete, ncm2 ?
Actually, i'v used deoplete and ncm2 for a long times. It's all work great. But then i know coc.nvim, i really like the way it manage the extensions. With coc's extensions, i can easily add more languages autocomplete, add more useful extenstions without any fear...
There's also a version which using ncm2, you can try it here.
| Plugin | Description |
|---|---|
| kyoz/purify | rainbow Clean & vibrant color schemes for Vim, Terminals... |
| Plugin | Description |
|---|---|
| bling/vim-airline | Status bar, Tabline |
| vim-airline/vim-airline-themes | Vim-Airline Themes |
| tpope/vim-fugitive | Just use to show git status in Vim-Airline |
| Plugin | Description |
|---|---|
| junegunn/fzf.vim | Fuzzy file finder (help jump to other files faster and easier) |
Note: I use ack.vim to provide global search feature for Vim. If you found the the search is slow. You can use the silver searcher as the search engine for ack.vim.
| Plugin | Description |
|---|---|
| scrooloose/nerdtree | Nerd Tree (View your folders in tree visualization like in VSCode) |
| tiagofumo/vim-nerdtree-syntax-highlight | Colors for NerdTree's icons |
| ryanoasis/vim-devicons | Filetype icons for NerdTree |
| easymotion/vim-easymotion | Jump around the screen like a boss |
| andymass/vim-matchup | Better % and highlight matching words |
| tommcdo/vim-exchange | Easy text exchange |
| rhysd/clever-f.vim' | Make f more powerful |
| Plugin | Description |
|---|---|
| leafgarland/typescript-vim | Typescript's Syntax |
| ap/vim-css-color | Help colorize text color |
| Valloric/MatchTagAlways | Always highlights the XML/HTML tags that enclose your cursor location |
| MTDL9/vim-log-highlighting | Syntax highlighting for generic log files in VIM |
| MaxMEllon/vim-jsx-pretty | JSX and TSX syntax pretty highlighting for vim (Use for React & RN) |
| Plugin | Description |
|---|---|
| tmsvg/pear-tree | Auto pair brackets |
| alvan/vim-closetag | Auto close html tag |
| pope/vim-surround | Auto surround |
| tpope/vim-commentary | Comment code faster |
| tpope/vim-repeat | dot repeat with pluggins |
| Yggdroot/indentLine | Indent code with v-line |
| wellle/targets.vim | Provides additional text object |
| mg979/vim-visual-multi | Multiple Cursor |
| mattn/emmet-vim | Emmet for vim |
| Plugin | Description |
|---|---|
| FooSoft/vim-argwrap | Wrap and unwrap function args, list, dicts... |
| prettier/vim-prettier | Format code |
| Plugin | Description |
|---|---|
| NLKNguyen/copy-cut-paste.vim | Copy, Paste with Clipboard |
| skywind3000/asyncrun.vim | Run async shell commands in vim |
| kyoz/ezbuf.vim | Fast and easy use buffers |
| kyoz/npm.vim | Work with npm more easier in Vim |
| segeljakt/vim-silicon | Vim plugin for generating images of source code using silicon |
| iamcco/markdown-preview.nvim | Markdown Live Preview |
| godlygeek/tabular' | Text filtering and alignment |
| dhruvasagar/vim-table-mode | VIM Table Mode for instant table creation |
| lervag/vimtex | A modern Vim and neovim filetype plugin for LaTeX files |
| yardnsm/vim-import-cost' | Display the import size of the JavaScript packages in Vim! |
| tweekmonster/startuptime.vim | Breakdown Vim's --startuptime output |
| KabbAmine/vCoolor.vim | Simple color selector/picker for Vim |
| guns/xterm-color-table.vim | All 256 xterm colors with their RGB equivalents, right in Vim! |
| junegunn/goyo.vim | Distraction-free writing in Vim |
| junegunn/limelight.vim | All the world's indeed a stage and we are merely players |
| RRethy/vim-illuminate | Auto highlighting other uses of the word under the cursor |
| voldikss/vim-search-me | Perform a quick web search for the text selected in (Neo)Vim |
| Plugin | Description |
|---|---|
| neoclide/coc.nvim | Intellisense engine |
There's no configurations suitable for everyone. Each one have different tastes.
So, in order to easily customize those configuration. You must understand the structural of configuration files.
/home/kyoz/.config/nvim
├── autoload/
├── colors/
├── configs/
│ ├── init.vim
│ ├── general.vim
│ ├── indent.vim
│ ├── keys.vim
│ ├── plugins.vim
│ ├── autocomplete.vim
│ └── lsp.vim
├── fonts/
├── snippets/
├── init.vim
└── ginit.vim
| Name | Meaning |
|---|---|
| autoload/ | Contain autoload .vim files (Currently there's only plug.vim file cause i'm using VimPlug) |
| colors/ | Contain vim's color schemes |
| configs/ | Contain all main configurations |
| fonts/ | Contain some patched fonts are ready to use |
| snippets/ | Contain all of mine snippets, which define with NeoSnippet |
| Name | Meaning |
|---|---|
| init.vim | Run first when nvim start, use this file to link and call other script files (by orders) |
| ginit.vim | To setting things relate to GUI like fonts, font styles... |
| configs/init.vim | Definitions all the plugins with VimPlug |
| configs/general.vim | Contain all general configurations |
| configs/indent.vim | Contain all configuration relate to indent |
| configs/keys.vim | Contain all custom mappings |
| configs/plugins.vim | Contain all settings of plugins |
| configs/autocomplete.vim | Contain all settings relate to autocomplete |
| configs/lsp.vim | Contain all settings relate to language server protocol |
All general custom mappings is place in configs/keys.vim
Leader key: space
Local leader key: \
| Mapping | Mode | Actions |
|---|---|---|
| jk | i | Exist insert mode faster |
| dd | n | Delete but don't store deleted lines in register |
| spacez | n | Save and close current buffer |
| gb | n | Jump to next buffer |
| gB | n | Jump to previous buffer |
| ctrlh | n | Resize window (Reduce width) |
| ctrll | n | Resize window (Expand width) |
| ctrlj | n | Resize window (Reduce height) |
| ctrlk | n | Resize window (Expand height) |
All plugins custom mappings is place in configs/plugins.vim
| Mapping | Mode | |
|---|---|---|
| spacespace | n | Open fzf to search buffers |
| spacef | n | Open fzf to search files (not include node_modules, files & folder in .gitignore...) |
| spaceF | n | Open fzf to search all files |
| spacel | n | Open fzf to search for line in current buffer |
| spaceL | n | Open fzf to search for line in all buffers |
| spacec | n | Open fzf to search for git's commits |
| spacea | n | Start global search with ag |
| spacebx | n | Close current buffer |
| spacebX | n | Close all buffers |
| spacebo | n | Close other buffers |
| spacebs | n | Close all saved buffers |
| spaces | n | Start Easymotion |
| spaceS | n | Start Easymotion (two characters) |
| spacej | n | Start Easymotion (search below rows) |
| spacek | n | Start Easymotion (search above rows) |
| spacem | n | Open markdown live preview (When in markdown file buffer) |
| spacet | n | Toggle NerdTree |
| spacez | n | Toggle Focus Writing Mode |
| gw | n | Run AirWrap |
| ,, | n | Run Emmet |
| QC | n | Copy whole line to system clipboard |
| QC | v | Copy selected text to system clipboard |
| QX | n | Cut whole line to system clipboard |
| QX | v | Cut selected text to system clipboard |
| QV | n | Paste from system clipboard |
| </kbd>c | n | Color Picker (hex) |
| </kbd>C | n | Color Picker (rgb) |
| </kbd>s | v | Search selected text with Google |
All autocomplete mappings is place in configs/autocomplete.vim
| Mapping | Mode | |
|---|---|---|
| tab | i | Go to next autocomplete candidate |
| shifttab | i | Go to previous autocomplete candidate |
| ctrlj | i | Expand snippet (if possible) |
All lsp mappings is place in configs/lsp.vim
| Mapping | Mode | |
|---|---|---|
| tab | i | Go to next autocomplete candidate |
| gd | n | View Definition for word under cursor |
| gD | n | View Document Diagnostics |
| gh | n | View LSP Hover result for word under cursor |
| gr | n | Rename for word (variable) under cursor |
| ge | n | Go to next error |
| gE | n | Go to previous error |
| gf | n | Format for current buffer with prettier |
MIT © Kyoz