.vimrc for frontendder

Hi, I am engaged in front-end development, and somehow it happened that I actively use vim in my daily work.

In the process of work, a rather large, well-documented config has accumulated, and at some point I wanted to share it with the outside world, and perhaps something could be improved in it. It can be useful not only web developers, but in general, all the rest.

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. Because of the detailed description of each option, it will be very useful for those who for some reason decided to switch to Vim recently.
')
Oddly enough - in the article a lot of pictures;)

Config Chips

Brief description of each option or plugin

Usually, the config for VIMA is either very minimalistic or very difficult to understand if you are not in the subject. If you are a beginner, then you encounter two problems at once:

1. How to set it up
2. How to use this WIM (using an un-configured WIM adds many, many unforgettable minutes at the start)

I can’t help with solving the second problem, but I can help to solve the first one - the config is broken into clear blocks, and each option or plugin is briefly commented.

Installing Plugins

Vundle is used as a plugin manager.
When you first log into vim, it will install automatically and install all the necessary plugins.
Physically the plugins will be in

~/.vim/bundle 

The list of the plugins themselves is in the .vimrc file.

It shows the path to the repositories, where you need to pick up plugins. If only the user name and the repository name are specified as the path:

 Bundle 'altercation/vim-colors-solarized' 

Then it automatically turns to the githab.

 https://github.com/altercation/vim-colors-solarized 

After adding a new plug-in 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 command :BundleInstall

Preloaded useful plugins

Vim-snipmate + Vim-snippets

One of the most popular plugins to support snippets, and a bunch of standard snippets to it. Substitution occurs by pressing Tab .
For example, if you type fun and press Tab then fun will expand into 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 is also on Tab
Immediately there are a lot of ready-made snippets for a whole heap of languages. They are here:

 ~/.vim/bundle/vim-snippets/snippets/ 

This path appears after the first run of vim.
In the file called _.snippets are snippets that can be useful regardless of the language - for example, a snippet inserting copyright or fish text.

Syntastic

It allows you to connect a lot of static analyzers and check the code for errors when saving and opening a file.
By default, only jshint is installed with the config ( this requires that you already have npm installed ).

When an error is found, labels appear on the left in the window, indicating the line with the error, and if the cursor is already on the line with the error, then its text is written in the status bar.

Tcomment_vim

A small plugin that adds hotkeys to work with comments:

• gcc - toggles the comment / non-comment state for the current line
• gc the same for selected text block.

Nerdtree

Adds in vim the ability to display directories as a tree structure.

They can be opened in the next tab by pressing on t or in the current tab - by Enter

If you select any folder or file and press m you can delete it, rename it, or do something else that we usually want to do with the files.

The config adds several handy hotkeys - for example, by \f you can open the 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 Git immediately from Vim. In the default configuration there are several useful alias, most often I use:

• \b - view blame for the current line
• \g - shows in the split the status of the current branch
• :Gdiff - shows diff of changes made to splitview

Fuzzyfinder

Allows you to quickly and conveniently find files and folders. He will understand what to look for, even if you enter words with occult words, mistakes, wrong ways, etc.

Hotkey to open ctrl+t

Of the serious flaws - a significant lag when you first search in large directories.

Other plugins

Of the rather interesting, but still not named, there are still Vim-surround and Vim-unimpaired , besides them there are several others, the full list can be found in the config file.
All plugins are ready to go.

Different form of cruiser for insert and command mode

The cursor in insert mode changes its shape from brick to pipe, thus saving me a large number of nerve cells.

The code is specific to iTerm, but this can be configured, probably, for any terminal.

Solarized cool and eye-friendly theme

I use its light version in conjunction with a similar theme for iterm
That it 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 removing the 'altercation/vim-colors-solarized' and the section with the Solarized heading

Small useful chips

• Showing trailing spaces, tabs and some other characters 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 highlight of the results found is reset when you press Enter .
• Separate hotkey to enable / disable paste mode - \p . This mode is needed when pasting large pieces of code from the clipboard.
• After re-opening the file, the position of the cursor 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.
• Removed most of the annoying warnings, in my opinion, they only interfere.
• When using vimdiff, no changes in whitespace are displayed.

In the plans

Add smart autocomplete for javascript. While it is not, but I think that it 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