.vimrc for front-end
Hi, I’m doing front-end development, and it somehow happened that I actively use vim in my daily work.
In the process of work, a rather large, well-documented config was accumulated, and at some point I wanted to share it with the outside world, and perhaps to improve something in it. It can be useful not only to web developers, but in general to everyone else.
Under the cut, I will describe the main features of the config. I use Vim in conjunction with iTerm and the solarized theme, but the config with minimal changes is suitable for any terminal and any theme. Due to the detailed description of each option, it will be very useful for those who, for some reason, decided to switch to WIM recently.
Oddly enough - the article has a lot of pictures;)
Usually, the config for Wim is either very minimalistic, or very difficult to understand if you are not in the topic. If you are a beginner, then you will encounter two problems at once:
I can’t help with the solution of the second problem, but I can help solve the first - the config is broken into understandable blocks, and each option or plugin is briefly commented on.
Vundle is used as a plugin manager .
When you first enter vim, it will install automatically and install all the necessary plugins.
Physically plugins will be in
The list of plugins themselves is in the
It shows the paths to the repositories, where to get the plugins from. If only the username and the name of the repository are specified as the path:
Then it automatically unfolds on the way to the github.
After adding some new plugin to the list, you need to tell vundle to put it, and at the same time update the existing ones. This is done by the team.
One of the most popular plugins for supporting snippets, and a bunch of standard snippets for it. Substitution occurs by clicking on
For example, if you type
The transition between the arguments of the snippet also occurs
immediately. There are a lot of ready-made snippets for a whole bunch of languages. They are here:
This path appears after the first start of vim.
The file with the name
It allows you to connect many static analyzers and check the code for errors when saving and opening a file.
By default, only jshint is installed with the config ( for this it is necessary that you already have npm installed ).
When an error is found, labels appear on the left of the window indicating the line with the error, and if the cursor is already on the line with the error, its text is written in the status bar of the WIM.
A small plugin that adds hotkeys for working with comments:
Adds the ability to display directories in vim as a tree structure.
They can be opened in a neighboring tab by clicking on
If you select a folder or file and click,
The config adds several convenient hotkeys - for example,
If you select another file in this split-view, it will open in the same window. This is convenient to use with a large console window.
Allows you to do all the necessary operations with the git immediately from vima. In the default configuration, there are several useful eliases, most often I use:
Allows you to quickly and conveniently find files and folders. He will understand what you need to look for, even if you enter the words with slogans, mistakes, wrong paths, etc.
Hotkey for discovery
Of the serious drawbacks - a significant lag in the first search in large catalogs.
Of the interesting enough, but still not named, there are still Vim-surround and Vim-unimpaired , in addition to them there are several others, a complete list can be found in the config file.
All plugins are ready to go.
The cursor in insert mode changes its shape from brick to pipe, thereby saving me a large number of nerve cells.
The code is specific to iTerm, but it can be configured, probably for any terminal
I use its light version in conjunction with a similar theme for iterm
It is she who is visible on all screenshots in this post.
If for some reason it does not suit you, or you want to put something of your own, you can always remove it from the config by deleting the bundle
Add smart autocomplete for javascript. While he is not there, but I think that he will appear in the very near future.
You can view the repository and pick up the config here: github.com/L0stSoul/vim-config
In the process of work, a rather large, well-documented config was accumulated, and at some point I wanted to share it with the outside world, and perhaps to improve something in it. It can be useful not only to web developers, but in general to everyone else.
Under the cut, I will describe the main features of the config. I use Vim in conjunction with iTerm and the solarized theme, but the config with minimal changes is suitable for any terminal and any theme. Due to the detailed description of each option, it will be very useful for those who, for some reason, decided to switch to WIM recently.
Oddly enough - the article has a lot of pictures;)
Config Chips
A brief description of each option or plugin
Usually, the config for Wim is either very minimalistic, or very difficult to understand if you are not in the topic. If you are a beginner, then you will encounter two problems at once:
- How to set it up
- How to use this of your vim (using an unconfigured vim adds many, many unforgettable minutes at the start)
I can’t help with the solution of the second problem, but I can help solve the first - the config is broken into understandable blocks, and each option or plugin is briefly commented on.
Installing Plugins
Vundle is used as a plugin manager .
When you first enter vim, it will install automatically and install all the necessary plugins.
Physically plugins will be in
~/.vim/bundle
The list of plugins themselves is in the
.vimrc
file. It shows the paths to the repositories, where to get the plugins from. If only the username and the name of the repository are specified as the path:
Bundle 'altercation/vim-colors-solarized'
Then it automatically unfolds on the way to the github.
https://github.com/altercation/vim-colors-solarized
After adding some new plugin to the list, you need to tell vundle to put it, and at the same time update the existing ones. This is done by the team.
:BundleInstall
Predefined useful plugins
Vim-snipmate + vim-snippets
One of the most popular plugins for supporting snippets, and a bunch of standard snippets for it. Substitution occurs by clicking on
Tab
. For example, if you type
fun
and press, Tab
it fun
will open in the function declaration, and the cursor will move to the first argument of the snippet - function_name
:: The transition between the arguments of the snippet also occurs
Tab
immediately. There are a lot of ready-made snippets for a whole bunch of languages. They are here:
~/.vim/bundle/vim-snippets/snippets/
This path appears after the first start of vim.
The file with the name
_.snippets
contains snippets that can be useful regardless of the language - for example, a snippet embedding copyright or fish text.Syntastic
It allows you to connect many static analyzers and check the code for errors when saving and opening a file.
By default, only jshint is installed with the config ( for this it is necessary that you already have npm installed ).
When an error is found, labels appear on the left of the window indicating the line with the error, and if the cursor is already on the line with the error, its text is written in the status bar of the WIM.
Tcomment_vim
A small plugin that adds hotkeys for working with comments:
gcc
- Toggles the comment / non-comment state for the current linegc
same for the selected block of text.
NERDtree
Adds the ability to display directories in vim as a tree structure.
They can be opened in a neighboring tab by clicking on
t
or in the current one - by. Enter
If you select a folder or file and click,
m
you can delete it, rename it, or do something else that we usually want to do with files. The config adds several convenient hotkeys - for example,
\f
you can open a split-view in which the current file will be highlighted. If you select another file in this split-view, it will open in the same window. This is convenient to use with a large console window.
Fugitive
Allows you to do all the necessary operations with the git immediately from vima. In the default configuration, there are several useful eliases, most often I use:
\b
- see blame for the current line\g
- shows the status of the current branch in split:Gdiff
- shows in splitview diff the changes made
Fuzzyfinder
Allows you to quickly and conveniently find files and folders. He will understand what you need to look for, even if you enter the words with slogans, mistakes, wrong paths, etc.
Hotkey for discovery
ctrl+t
Of the serious drawbacks - a significant lag in the first search in large catalogs.
Other plugins
Of the interesting enough, but still not named, there are still Vim-surround and Vim-unimpaired , in addition to them there are several others, a complete list can be found in the config file.
All plugins are ready to go.
Different form of crusor for insert and command mode
The cursor in insert mode changes its shape from brick to pipe, thereby saving me a large number of nerve cells.
The code is specific to iTerm, but it can be configured, probably for any terminal
Cool and eye-friendly Solarized theme
I use its light version in conjunction with a similar theme for iterm
It is she who is visible on all screenshots in this post.
If for some reason it does not suit you, or you want to put something of your own, you can always remove it from the config by deleting the bundle
'altercation/vim-colors-solarized'
and the section with the titleSolarized
Small useful chips
- Shows trailing spaces, tabs and some other symbols that are not normally displayed
- Smart indents are configured, you can press == on the selected line and in 99 percent of cases vim will automatically make all indents correct.
- The highlighting of the results found is reset by clicking on
Enter
. - Separate hotkey to enable / disable paste mode -
\p
. This mode is needed when pasting large pieces of code from the clipboard. - After reopening the file, the cursor position in it is restored. That is, if you finished editing it on line 69, when you reopen it, the file will open on line 69.
- Most annoying warnings have been removed, in my opinion they only interfere.
- When using vimdiff, changes to whitespace are not displayed.
In the plans
Add smart autocomplete for javascript. While he is not there, but I think that he will appear in the very near future.
Where to get? :)
You can view the repository and pick up the config here: github.com/L0stSoul/vim-config