ONE DUDE`S BLOG
/media/keyboard (1).webp

Настройка редактора vim для веб разработчика.

17.10.2020
Настройка vim для таких языков как typescrypt, golang, python, javascript, настройка дебагера и цветовой палитры.

Почему vim?

Я являюсь фанатом данного редактора, на протяжении последнего года я пишу в VsCode с использованием neovim.

Чем же так хорош данный редактор? Ведь с первой версии прошло, ни много ни мало, почти 30 лет. Основное преимущество - скорость работы с текстом, она действительно потрясающая. Все взаимодействие с кодом происходит посредством клавиатуры. Это невероятно удобно, все ваши мысли могут быть реализованы с помощью шорткатов и макросов. Выделение текста, переход по зависимостям, поиск и форматирование кода происходят быстро и лаконично (разумеется требуется небольшая снаровка). Основные сочитания клавиш можно посмотреть тут. Кроме того, vim можно использовать на любом linux-line дистрибутиве.

В данной небольшой статье я оставлю, и разберу свой конфиг файл для vim.

Общие плагины, полезные большинству разработчиков.

  1. Менеджеры пакетов. В vim их существует несколько, я рассмотрю Plug.
Установка
curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

Также можно добавить скрипт для в конфиг файл для автоматической загрузки, что мы и сделаем.

    if empty(glob('~/.vim/autoload/plug.vim'))
  silent !curl -fLo ~/.vim/autoload/plug.vim --create-dirs
    \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
  autocmd VimEnter * PlugInstall --sync | source $MYVIMRC
endif

Плагины добавляются в .vimrc следующим образом "Plug "". После чего можно установить их :PlugInstall в интерактивной строке ввода.

Установка плагинов должна быть выполнена в блоке

call plug#begin('~/.vim/plugged')
    ...
call plug#end() 
  1. Темплейты. Лично мне приятно разрабатывать в красивом интерфейсе с удобночитаемой подсветкой, для vim существует множество темплейтов. Лично мне пришелся по душе этот.
Настройка

Добавим в .vimrc

let g:material_style='palenight'
set background=dark
colorscheme vim-material
set termguicolors " Fix color scheme bug in Hyper.js
hi Normal guibg=NONE ctermbg=NONE

Также настроим цветовую схему

if (has("nvim"))
  "For Neovim 0.1.3 and 0.1.4 < https://github.com/neovim/neovim/pull/2198 >
  let $NVIM_TUI_ENABLE_TRUE_COLOR=1
endif

"For Neovim > 0.1.5 and Vim > patch 7.4.1799 < https://github.com/vim/vim/commit/61be73bb0f965a895bfb064ea3e55476ac175162 >
"Based on Vim patch 7.4.1770 (`guicolors` option) < https://github.com/vim/vim/commit/8a633e3427b47286869aa4b96f2bfc1fe65b25cd >
" < https://github.com/neovim/neovim/wiki/Following-HEAD#20160511 >
if (has("termguicolors"))
  set termguicolors
endif
  1. Airline - мощный инструмент для панелей, как нижних, так и верних.
Настройка
        Plug 'vim-airline/vim-airline'
        Plug 'vim-airline/vim-airline-themes'
        ...
        let g:airline#extensions#tabline#formatter = 'unique_tail'
        let g:airline#extensions#tabline#enabled = 1 " top pane
        let g:airline_theme = "palenight" " template 
  1. Поиск по проекту с помощью fzf Также дополнительно необходимо поставить ripgrep
Настройка
Plug 'junegunn/fzf', { 'do': { -> fzf#install() } } " File search
Plug 'junegunn/fzf.vim' " File search

Также добавим конфиги, для fzf

let $FZF_DEFAULT_OPTS    = '--reverse'
let $FZF_DEFAULT_COMMAND = "rg --files --hidden --glob '!.git/**'"
  1. NERDTree - боковое дерево файлов
Настройка
Plug 'preservim/nerdtree' " File tree

6. Красивые глифы для NERDtree, а также других элементов редактора.

Настройка
    Plug 'ryanoasis/vim-devicons' " Nice icons for nerd tree commander

Стоит отметить, для полноценный работы vim-devicons необходм специальный шрифт, я использую Monaco с лигатурами (Mac OS) поэтому прикрепляю его тут. Также, если вам нужен просто Monaco шрифт с лигатурами, без NerdTree иконок можете скачать его сдесь

Поддержка языков

Prettier - автоформатирование кода.

Подключение

Установка

Plug 'prettier/vim-prettier', {
  \ 'do': 'yarn install',
  \ 'branch': 'release/1.x',
  \ 'for': [
    \ 'javascript',
    \ 'typescript',
    \ 'css',
    \ 'less',
    \ 'scss',
    \ 'json',
    \ 'graphql',
    \ 'markdown',
    \ 'vue',
    \ 'lua',
    \ 'python',
    \ 'html',
    \ 'swift' ] } " Good code autoformatting 

Настройка

let g:prettier#autoformat = 1
let g:prettier#exec_cmd_async = 1
let g:prettier#config#parser = 'babylon'

vim-coc - мощный инструмент для линтеров, форматирования кода, переходу к объявлению типов, реализаций, ссылок. polyglot - поддержка синтаксиса для множества языков

Plug 'sheerun/vim-polyglot' "Syntax highlighting for different languages
Plug 'neoclide/coc.nvim' , { 'branch' : 'release' } " Amazing autocomplete/typing support for much languages

Настройка для COC

nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)

nmap <silent> [g <Plug>(coc-diagnostic-prev)
nmap <silent> ]g <Plug>(coc-diagnostic-next)
Мой coc-config.json
{
    "vls": {
        "command": "vls",
        "filetypes": ["c", "cpp", "objc", "objcpp"],
        "trace.server": "verbose",
        "initializationOptions": {
            "cacheDirectory": "/tmp/ccls"
        }
    },
    "coc.preferences.formatOnSaveFiletypes": [
        "css",
        "markdown",
        "html",
        "scss",
        "pug",
        "python",
        "vue"
    ],
    "python.jediEnabled": false,
    "python.linting.flake8Enabled": true,
    "python.linting.enabled": true,
    "python.linting.flake8Args": [
        "--max-line-length=120",
        "--ignore=E402,F841,F401,E302,E305"
    ]
}

Javascript/Typescript

Для установки подсветки синтаксиса для js/ts/graphql добавим

Plug 'pangloss/vim-javascript'    " JavaScript support
Plug 'Quramy/tsuquyomi' " typescript
Plug 'maxmellon/vim-jsx-pretty'   " JS and JSX syntax
Plug 'jparise/vim-graphql'        " GraphQL syntax

Для автокомплита укажем в настройках

let g:coc_global_extensions = [ 'coc-tsserver' ]

Angular

Plug 'curist/vim-angular-template'
Plug 'burnettk/vim-angular'

Vue js

Plug 'posva/vim-vue'

Достаточно долго провозился с настройкой перехода к type/method defenition. Для корректной работы необходимо :CocInstall coc-vetur

HTML

Plug 'alvan/vim-closetag' " Automatic tag closing
Plug 'mattn/emmet-vim' " Emmet, fast HTML inserting
Настройка автозакрытия тегов
let g:closetag_filenames = '*.html,*.xhtml,*.phtml'
let g:closetag_filetypes = 'html,xhtml,phtml'
let g:closetag_xhtml_filetypes = 'xhtml,jsx'
let g:closetag_regions = {
    \ 'typescript.tsx': 'jsxRegion,tsxRegion',
    \ 'javascript.jsx': 'jsxRegion',
    \ }

Golang

Plug 'fatih/vim-go', { 'do': ':GoUpdateBinaries' } " Golang support

Python

Plug 'davidhalter/jedi-vim' " Autocomplete/syntax for python
Plug 'jmcantrell/vim-virtualenv' " User virtualenv for current python interpretor
Plug 'mitsuhiko/vim-jinja'        " Jinja support for vim
Plug 'nvie/vim-flake8' " Linter for python code

Для корректной работы также необходимо установить :CocInstall coc-python

Devops

Plug 'chr4/nginx.vim' " Nginx hightlighting

Git

Blamer - для вывода последней информации о коммите в текущей строке.
Fugitive - плагин для управления гитом

Plug 'APZelos/blamer.nvim' " Show last editor of current line
Plug 'tpope/vim-fugitive' " Usefull utility for working with git

Настройка

let g:blamer_enabled = 1 " enable blamer
let g:blamer_show_in_insert_modes = 0 " disable blamer in insert mode

Некоторые дополнительные плагины для удобства редактирования/просмотра кода

Plug 'tomtom/tcomment_vim' " Fast comment current line or block
Plug 'Yggdroot/indentLine' " Hightlighting for indents
Plug 'tmhedberg/SimpylFold' " Simple folding blocks of code
Plug 'SirVer/ultisnips' " Snippets
Plug 'honza/vim-snippets' " snipets engine

Кастомные настройки и мапинг

Настройки
set encoding=UTF-8

" Folding configs
set foldmethod=syntax
set foldnestmax=5
set foldlevelstart=1

set number " enable showing of numbers
set relativenumber " relative numbers for better navigation
set directory=~/.vim/backup " Move .swp files to home directory
Маппинг
" Resize pane
noremap <silent> <C-S-Left> :vertical resize -5<CR>
noremap <silent> <C-S-Right> :vertical resize +5<CR>

" Save file like VsCode
noremap <silent> <C-S> :update<CR>
vnoremap <silent> <C-S> <C-C>:update<CR>
inoremap <silent> <C-S> <C-O>:update<CR>

" Tab switching
map gn :bn<cr>
map gp :bp<cr>
map gd :bd<cr>


nmap <silent> <C-p> :Files<CR> " Fast file opening for search


" Clipboard
noremap <Leader>y "*y
noremap <Leader>p "*p
noremap <Leader>Y "+y
noremap <Leader>P "+p

" MAC os binding for NERDTree
nnoremap † <Esc> :NERDTreeToggle<CR> " ALT+T - toggle file
nnoremap ƒ <Esc> :NERDTreeFind<CR>== " ALT+F reveal current file in nerdtree

Все настройки можно найти тут. Также этот тред будет периодически обновлятся и дополнятся. На текущий момент мой воркспейс выглядит так:

Также, если вы вдруг, используете hyper, вам могут понадобиться настройки для него, т.к. с цветами он работает из ряда вон плохо. Попробовав несколько терминалов могу порекомендовать Iterm2. Он поддерживает лигатуры (что для меня, является важным критерием) и достаточно производительный. Если лигатуры вам неинтересны (а также установка бекграунда) то рекомедую Alacritty, он очень шустрый, просто невероятно шустрый (особенно в сравнении с hyper, написанным на электроне).

hyper настройки
// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.

module.exports = {
  config: {
    updateChannel: 'stable',
    fontSize: 14,
    fontFamily: '"Ligamonacop Nerd Font", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
    fontWeight: 'bold',
    fontWeightBold: 'bold',
    lineHeight: 1.2,
    letterSpacing: 1.2,
    cursorColor: 'rgba(248,28,229,0.8)',
    cursorAccentColor: '#000',
    cursorShape: 'BLOCK',
    cursorBlink: true,
    foregroundColor: '#fff',
    backgroundColor: '#000',
    selectionColor: 'rgba(248,28,229,0.3)',
    borderColor: '#333',
    css: '',
    termCSS: `
        x-screen x-row { font-variant-ligatures: contextual; }
    `,


    showHamburgerMenu: '',

    showWindowControls: '',

    padding: '12px 14px',

    colors: {
      black: '#000000',
      red: '#C51E14',
      green: '#1DC121',
      yellow: '#C7C329',
      blue: '#0A2FC4',
      magenta: '#C839C5',
      cyan: '#20C5C6',
      white: '#C7C7C7',
      lightBlack: '#686868',
      lightRed: '#FD6F6B',
      lightGreen: '#67F86F',
      lightYellow: '#FFFA72',
      lightBlue: '#6A76FB',
      lightMagenta: '#FD7CFC',
      lightCyan: '#68FDFE',
      lightWhite: '#FFFFFF',
    },

    shell: '',

    shellArgs: ['--login'],

    env: {},

    bell: 'SOUND',

    copyOnSelect: false,

    defaultSSHApp: true,

    quickEdit: false,

    macOptionSelectionMode: 'vertical',

    webGLRenderer: false,
    MaterialTheme: {
          theme: 'Palenight',
          backgroundOpacity: '1',

          accentColor: '#64FFDA',
          vibrancy: 'dark'
      },
  },
  plugins: [
    "hyper-material-theme",
    "hyper-opacity",
    // "hyperpower",
    "hyper-search",
    // "hyper-vivifyscrum",
    "hyper-pane",
    "hyper-font-ligatures"
  ],

  localPlugins: [],

  keymaps: {
    // Example
    // 'window:devtools': 'cmd+alt+o',
  },
};
vim
0
136