Веб-разработка в 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$
Sw , Si" , Si( , и т.п.Проекты/сессии:
Плагин 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>
3: Esc на kj - мегаудобно.
4: для попадания на средину строки.
И последние две для предпросмотра в браузерах.
Мой ~/.vimrc
Кто что использует и как, кроме вышеуказанного?