Vim как среда разработки для JavaScript и PHP.
Чтобы превратить текстовый редактор в какое-то подобие среды разработки, добавим проверку синтаксиса, навигацию по проекту, навигацию по коду и некоторые вспомогательные фичи.
Основные утилиты и плагины:
- DoctorJS — предоставляет jsctags
- TagBar
- Проверка синтаксиса
- Универасальный плагин syntastic для всех типов
- Валидатор JavaScript для vim (требуется наличие jshint)
- Валидатор кода для php
JavaScript
Индексирование
Индексирование производится с помощью DoctorJS. Установку можно выполнить по инструкции на github. После установки станет доступна команда jsctags .
Теперь из каталога проекта можно выполнять команду индексирования:
1 |
jsctags -f tags *.js |
или для рекурсивного индексирования проекта:
1 |
jsctags -f tags . |
Проверка кода
Можно сделать с помощью jshint и специального плагина для vim.
Для автоматической проверки файла при сохранении добавьте строчку в ваш ~/.vimrc :
1 |
let jshint2_save = 1 |
Некоторым, как и мне, плагин jshint2.vim может показаться слишком избыточным и навязчивым. В этом случае подойдёт универсальный плагин syntastic рассмотренный ниже.
Сниппеты
Для использования сниппетов установите плагин snipMate. Далее можно увидеть мои сниппеты. Дополнительно к стандартным есть вспомогательные для создания документирующих комментариев в стиле JSDuck, дописывайте свои по мере необходимости.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
################################## #JSDoc snippet /** /** * ${1} */ snippet @p @param {${1:type}} ${2:name} - ${3:descripton} snippet @m @method snippet @r @return {${1:type}} ${2:description} snippet @e @example * ${1:code} snippet @ev @event snippet @t @template snippet @pri @private snippet @pro @property {${1:type}} snippet @cl @class snippet @c Without default @cfg {${1:Type}} ${2:name}${3: (required)} snippet @c With default @cfg {${1:Type}} [${2:name}=${3:"default value"}]${4: (required)} ################################## # console snippet cwarn console.warn('WARN: ${1:warning message}'); snippet cerror console.error('ERROR: ${1:error message}'); snippet throw throw new Error('FATAL: ${1:error message}'); snippet clog console.log(${1:}); snippet cdebug console.debug(${1:});${2: /* DEBUG */} snippet cdir console.dir(${1:});${2: /* DEBUG */} snippet ctime console.time('${1:timerName}');${2: /* DEBUG */} snippet ctimee console.timeEnd('${1:timerName}');${2: /* DEBUG */} snippet cgrp console.group('${1:groupName}');${2: /* DEBUG */} snippet cgrpc console.groupCollapsed('${1:groupName}');${2: /* DEBUG */} snippet cgrpe console.groupEnd();${2: /* DEBUG */} snippet DE /* DEBUG */ snippet debug debugger;${1: /* DEBUG */} |
PHP
Индексирование
Индексирование с помощью ctags-exuberant. Ищите в пакетах вашего дистрибутива или на официальной странице.
Теперь из каталога проекта можно выполнить команду:
1 2 3 4 |
ctags-exuberant -f tags -h \".php\" -R --exclude=\"\.svn\" --totals=yes \ --tag-relative=yes --PHP-kinds=+cf --regex-PHP='/abstract class ([^ ]*)/\1/c/' \ --regex-PHP='/interface ([^ ]*)/\1/c/' \ --regex-PHP='/(public |static |abstract |protected |private )+function ([^ (]*)/\2/f/' |
Обратите внимание, что файл tags будет перезаписан. Одновременно индексировать php и javascript можно с помощью сохранения в разные файлы, и настройкой текстового редактора на использование двух индексных файлов.
Проверка кода
Php имеет встроенные средства для проверки кода. Для выполнения проверки из vim можно воспользоваться плагином PHP QA Tools. Валидация будет выполняться при сохранении и по команде :Php .
Для проверки только синтаксиса надо добавить в ваш .vimrc следующие строчки:
1 2 3 4 5 |
" PHP QA Tools {{{1 let g:phpqa_messdetector_autorun = 0 let g:phpqa_codesniffer_autorun = 0 let g:phpqa_codecoverage_autorun = 0 " 1}}} |
Улучшение поддержки формата
Настройки специфичные для формата содержатся в системном конфиге ftplugin/php.vim . Прежде чем вносить в него изменения, лучше скопировать в свой каталог ~/.vim .
Для упрощения работы с многострочными комментариями добавьте в свой ftplugin/php.vim следующие строчки:
1 2 |
setlocal comments=sO:*\ -,mO:*\ \ ,exO:*/,s1:/*,mb:*,ex:*/,:// setlocal formatoptions-=t formatoptions+=croql |
Это было скопировано из конфига для форматов «javascript». Упрощает в оформлении документирующих комментариев. При начале новой строки в многострочном комментарии будет автоматически вставлен символ «*».
Управление проектами
Полезные плагины для работы с проектами:
- NERD Tree — дерево файлов
- bufexplorer — список буферов
- TagBar — список свойств и методов классов
Для быстрого обращения к плагинам сделал привязки на клавиши F6, F7, F8:
1 2 3 |
nmap <F6> :BufExplorer<CR> nmap <F7> :NERDTreeToggle<CR> nmap <F8> :TagbarToggle<CR> |
Проверка синтаксиса
Для проверки синтаксиса можно использовать специальные плагины для конкретных языков (например, рассмотренные выше), либо универсальный плагин syntastic.
Syntastic выполняет проверку синтаксиса при сохранении файла. Строчки с ошибками выделяются в колонке с номерами строк. Список ошибок можно получить с помощью команды :Errors.
Syntastic поддерживается расширенной статусной строкой vim-airline, показывающей уведомление при наличии ошибок.
Использование нескольких индексных файлов
Например для файлов tags-php и tags-js в корне проекта
1 |
set tags=./tags-php,tags-php;./tags-js,tags-js; |