.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;)


    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:

    1. How to set it up
    2. 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 .vimrcfile.

    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 funand press, Tabit funwill 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 _.snippetscontains 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 line
    • gc 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 tor in the current one - by. Enter

    If you select a folder or file and click, myou 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, \fyou 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

    Also popular now: