Веб-разработка в Vim

Предлагаю обсудить и поделиться опытом по веб-разработке в Vim.

Я использую Vim в терминале termite (со своими патчами для дефолтного копипаста и прочее) с цветовой схемой gruvbox: как для терминала, так и для Vim.

Этот клавиатура-ориентированный vim-like терминал я упомянул не столько потому, что у него реализованы режимы как Vim (insert mode, selection mode, выделение клавиатурой включая блочное), а потому, что у него есть приятная фича (которую можно наблюдать в iTerm2 для OS X) при работе Vim'а в нём, а именно цвет курсора изменяется в зависимости от цвета символа, на котором находится курсор, а также при выделении цвет выделения повторяет цвет слов/строк (но без инвертирования где нужно, может еще допилят), скриншот.

Менеджер плагинов:

Перед обсуждением плагинов и настроек, хочу подчеркнуть почему я использую менеджер плагинов vim-plug: перепробовав все известные менеджеры плагинов, включая недоменеджер pathogen, остановился именно на vim-plug потому, что он самый быстрый (параллельная установка/обновление, к-во потоков настраивается), имеет приятный интерфейс, краткий синтаксис, а самое главное позволяет настроить загрузку или отключение плагинов по filetype и/или первому вызову самого плагина, это не только ускоряет старт/работу Vim, но и помогает разрулить конфликты некоторых плагинов, простой пример:

Plug 'tpope/vim-endwise',   { 'for': [ 'ruby','vim','sh','zsh' ] }

Кроме всего прочего, отдельно от веб-разработки-related для самого вима у меня такое:

Автоматическое переключение на английский в Normal mode и обратно на предыдущий в Insert mode:

Конечно же нужно решать проблему с локалями (т.к. веб-разработка, в отличие от программирования иногда ведется на отличных от английского языках), а именно с неудобством при их переключении в Normal mode и обратно, самое лучшее решение, это установка в систему xkb-switch + плагин в Vim для него.

Plug 'lyokha/vim-xkbswitch'
let g:XkbSwitchEnabled       = 1
let g:XkbSwitchLib           = '/usr/lib64/libxkbswitch.so'
let g:XkbSwitchIMappings     = ['ru']
let g:XkbSwitchSkipIMappings = {'*' : ['[', ']', '{', '}', "'"]}

Линейка номеров строк:

set nu
set nuw=4
autocmd InsertEnter * set nornu
autocmd InsertLeave * set rnu

Автоматическая паста с отступами:

Чтобы навсегда забыть эту проблему и не включать перед пастой каждый раз режим пасты или использовать хитрые хоткеи, можно просто добавить настройку:

let &t_SI .= "\<Esc>[?2004h"
let &t_EI .= "\<Esc>[?2004l"
inoremap <special> <expr> <Esc>[200~ XTermPasteBegin()
function! XTermPasteBegin()
  set pastetoggle=<Esc>[201~
  set paste
  return ""
endfunction

Замена заменяемого без удаления (проблема забивания иксового буфера обмена):

Чтобы заменить слово или кусок окруженный делиметрами без удаления в иксовый буфер, можно использовать такую настройку на хоткей S :

nnoremap <silent> S :set opfunc=PasteReplace<CR>g@
function! PasteReplace(type, ...)
    if a:0
        silent exe "normal! `<" . a:type . "`>p"
    elseif a:type == 'line'
        silent exe "normal! '[V']p"
    elseif a:type == 'block'
        silent exe "normal! `[\<C-V>`]p"
    else
        silent exe "normal! `[v`]p"
    endif
endfunction
nmap SS S$

Проекты/сессии:

Плагин vim-startify - стартовый экран, можно настроить на сессии и букмарки, чтобы каждый раз не открывать то же самое в сплиты/табы/буферы.

Документация:

Для открытия документации в браузере (как минимум для того, что нас интересует: HTML, JavaScript, CSS, SCSS, LESS, Ruby, Rails, Django, PHP и т.п.) исходя из из ft= и положения курсора, удобно замапить на F1:

Plug 'Keithbsmiley/investigate.vim'
nnoremap <F1> :call investigate#Investigate()<CR>

Автокомплит и сниппеты:

В отличие от YouCompleteMe, автокомплитер neocomplete не тормозит (при работе и старте), не нужен питон (но нужен lua), а всё остальное такое же (для веб-разработки). Интегрируется с родным движком сниппетов neosnippet, который работает как с родными, так и универсальными vim-snippets (объединенные Snipmate & UltiSnip).

Настройка для навигации по комплиту через Tab (сам комплит всплывает автоматически, можно настроить обратное):

imap <expr><TAB> neosnippet#expandable_or_jumpable() ? "\<Plug>(neosnippet_expand_or_jump)" : pumvisible() ? "\<C-n>" : "\<TAB>"
smap <expr><TAB> neosnippet#expandable_or_jumpable() ? "\<Plug>(neosnippet_expand_or_jump)" : "\<TAB>"
if has('conceal')
  set conceallevel=2 concealcursor=i
endif

ZenCoding/Emmet:

Полнофункциональный Emmet для Vim: emmet-vim

Работает как нужно, но по дефолту неудобный (как по мне) хоткей <c-y>, , я настроил себе на jk . Т.е. Esc у меня kj , а дополнить jk . Первое время пользовался F4, привожу настройки, но jk намного удобнее. Просто на Tab настроить нельзя (иначе как пользоваться Tab?).

Plug 'mattn/emmet-vim',           { 'for': ['html','xhtml','css','sass','scss','less'] }
au FileType html,css,sass,scss,less imap <expr><F4> emmet#expandAbbrIntelligent("\<tab>")
au FileType html,css,sass,scss,less imap <expr>jk   emmet#expandAbbrIntelligent("\<tab>")
au FileType html                    imap <C-\>      <CR><CR><Esc>ki<Tab>

Кроме Emmet'а для Vim существует аналог: Sparkup (нужен питон, не пробовал).

Отображение отступов:

Можно настроить каким символом и цветом отображать линии отступов, я настроил на хоткей <A-i> , альт как непечатаемый символ, так что проще посмотреть настройку склонировав репу на гитхабе и заглянув в .vimrc (или нажать C-v A-хоткей), скриншот.

Plug 'Yggdroot/indentLine'
let g:indentLine_enabled    = 0
let g:indentLine_char       = '¦'
let g:indentLine_color_term = 239
let g:indentLine_color_gui  = '#A4E57E'
nmap ^[i :IndentLinesToggle<CR>

Подсветка синтаксиса:

Plug 'tpope/vim-haml',            { 'for': 'haml'   }
Plug 'wavded/vim-stylus',         { 'for': 'stylus' }
Plug 'groenewege/vim-less',       { 'for': 'less'   }
Plug 'digitaltoad/vim-jade',      { 'for': 'jade'   }
Plug 'slim-template/vim-slim',    { 'for': 'slim'   }
Plug 'othree/html5-syntax.vim',   { 'for': 'html'   }
Plug 'cakebaker/scss-syntax.vim', { 'for': 'scss'   }

Plug 'hail2u/vim-css3-syntax',    { 'for': ['html','css'] }
augroup VimCSS3Syntax
  autocmd!
  autocmd FileType css setlocal iskeyword+=-
augroup END

Проверка синтаксиса:

Для проверки синтаксиса используется Syntastic + сторонние чеккеры:

Plug 'scrooloose/syntastic', { 'for': ['ruby','html','css', 'javascript', 'haml'] }
let g:syntastic_auto_jump           = 1
let g:syntastic_error_symbol        = '✖'
let g:syntastic_warning_symbol      = '►'
let g:syntastic_javascript_checkers = ['jshint'   ] " sudo npm install -g jshint
let g:syntastic_html_checkers       = ['jshint'   ] " sudo npm install -g jshint
let g:syntastic_ruby_checkers       = ['rubylint' ] " gem install ruby-lint
let g:syntastic_haml_checkers       = ['haml-lint'] " gem install haml-lint
let g:syntastic_css_checkers        = ['csslint'  ] " sudo npm install -g csslint
let g:syntastic_css_csslint_args    = "--ignore=zero-units"

Деобфускация / beautify'еры:

Плагин vim-autoformat работает со сторонними 'formatprograms', например js-beautify для HTML, CSS и JavaScript. autopep8 для питона и т.д. Всё это должно быть установленно.

Plug 'Chiel92/vim-autoformat'
let g:formatprg_args_javascript = "-j -q -B -f -"
noremap  <F8>   :Autoformat<CR><CR>
vnoremap <C-F8> gq

JavaScript:

Дефолтная поддержка JavaScript в Vim на довольно низком уровне, так что необходимы плагины как для самого JS, так и для библиотек, плагин javascript-libraries-syntax поддерживает почти все основные либы: jQuery, underscore.js, Backbone.js, AngularJS, RequireJS, Sugar.js, Jasmine и т.д.

Plug 'moll/vim-node'
Plug 'pangloss/vim-javascript',      { 'for': 'javascript' }
Plug 'jelera/vim-javascript-syntax', { 'for': 'javascript' }
let javascript_enable_domhtmlcss = 1
let g:html_indent_inctags        = "html,body,head,tbody"
let g:html_indent_script1        = "inc"
let g:html_indent_style1         = "inc"

Plug 'othree/javascript-libraries-syntax.vim', { 'for': 'javascript' }
let b:current_syntax       = 'javascript'
let g:used_javascript_libs = 'angularjs'

Также полезен tern_for_vim (сам Tern должен быть установлен), который умеет в 'Jump to the definition', 'Find the type' и т.д.

Пробельные символы:

По A-w показывает, по \-dw удаляет. Перевести все табы в пробелы (вдруг кто не знает), в Vim: :retab .

Plug 'ntpeters/vim-better-whitespace'
let g:better_whitespace_enabled = 0
nmap ^[w :ToggleWhitespace<CR>
nmap <Leader>dw :StripWhitespace<CR>

И кое-какие настройки по-мелочи:

set splitbelow
set splitright
inoremap  kj           <Esc>
map       gm           :call cursor(0, virtcol('$')/2)<CR>
nnoremap  <F12>f       :exe ':silent !firefox %'<CR><C-l>
nnoremap  <F12>c       :exe ':silent !chromium-browser %'<CR><C-l>

Мой ~/.vimrc

Кто что использует и как, кроме вышеуказанного?