Pull to refresh

Vim как IDE для веб-разработки, и не только.

Reading time 12 min
Views 100K
В данной статье рассматриваются мощные плагины, позволяющие повысить удобство разработки в VIM, а также даются ценные указания по их доработке и использованию. В том числе, используемых команд и горячих клавиш.

Рассмотрена настройка через конфигурационный файл vimrc и приведены ссылки на статьи с описанием отдельных моментов.

Кого-то VIM оттолкнет, показавшись поначалу слишком сложным или неудобным. Однако не стоит недооценивать его гибкость и возможность настройки себя, ведь из VIM можно буквально вылепить идеальный редактор/IDE, таким, каким вы представляете его себе.

Надеюсь, что эта статья поможет читателю убедиться в этом. Безусловно, она ориентирована, в первую очередь, на опытных пользователей Vim'а, но и новички смогут почерпнуть из нее немало полезного.

Я постарался писать как можно компактней, но без потери содержательной части, но статья все-равно вышла довольно объемной. Материал логически разбит на несколько разделов и совсем не обязательно читать его по порядку. Тем не менее, прочитать сведения по установке плагинов и настройке vimrc я рекомендую настоятельно.



В статье рассматриваются filetype плагины, для работы с разными языками программирования и разными типами файлов, и общие плагины.

Мне периодически приходилось пользоваться Vim'ом для редактирования файлов по SSH. Но Vim долго оставался для меня загадкой, и я боялся что сделаю чтото не так. В полном переходе на Vim мне помогли описанные здесь плагины, которые сделали это процесс легче и приятней, добавили удобства в работе, и подтолкнули к дальнейшему изучению этого редактора.

Я периодически трачу время на изучение различных возможностей Vim'а, и каждый раз восхищаюсь этим редактором. Его огромная встроенная и онлайновая документация таят в себе очень много, что он может, и чего я еще не знаю.

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

Я заметил одну психологическую особенность. Начиная работать с новой для себя IDE, которая показалась очень удобной в работе, рабочий процесс становится гораздо приятнее. Но все приедается, становится обыденностью. Это не касается Vim'а. Он очень сильно расширяем благодаря встроенному языку, и имеет поддержку разных языков программирования для увеличения своих возможностей.

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

Уважаемые читатели, вы критики этой статьи. Все описанное в данной статье работает. Но если что-то не заработает у вас, или вы знаете более лучшее решение, прошу написать в комментариях об этом. Ваша конструктивная критика очень важна.

Надеюсь что статья вам понравится и будет полезна.

Обзор плагинов



В рамках данной статьи я рассмотрю следующие общие плагины:
  • bufexplorer — удобная навигация по открытым буферам
  • NERD Commenter — поддержка комментирования кода для разных языков
  • NERD Tree — удобная навигация по дереву файлов и каталогов


И следующие filetype плагины:
  • поддержки подсветки синтаксиса для php и javascript, которые это делают эффективней стандартных.
  • Автодополнение с помощью omnicomplection для php, javascript, xslt, sql
  • автозакрытие тегов для xslt, xsl, xml, xhtml, html.
  • Автоидентация, проверка php скрипта на на наличие ошибок


Все действия я проводил на своем ноутбуке с Ubuntu 8.10 с vim-full.

Настройки vimrc, делающие использование Vim более приятным



Сам файл vimrc у меня находится в /etc/vim/vimrc. У Вас он может находится, к примеру в /etc/vimrc. Как правило, это зависит от дистрибутива.

Изначальной я настраивал файл конфигурации по этой хорошей статье, поэтому здесь я хочу рассказать, то что я потом добавлял и почему.

Мне приходится работать с разными проектами, в одних используется кодировка utf8, в других cp1251, и при использовании
одной из этих кодировок при работе с файлом другой на экране русские буквы корректно не отображаются. Я решил исправить ситуацию и автоматизировать ее, указав Vim'у возможные кодировки файлов и последовательность их определения. Я не помню особенности utf8, но по файлу можно определить, в этой он кодировке или нет. Если нет, то Vim будет использовать вторую.

При такой настройке Vim превосходно справляется с задачей автоопределения кодировки:
" Кодировка терминала, должна совпадать с той, которая используется для вывода в терминал
set termencoding=utf-8

" возможные кодировки файлов и последовательность определения.
set fileencodings=utf8,cp1251


По совету Paul в этомкомментарии желательно еще выставить параметр encoding в ut8:

set encoding=utf8


В документации сказано что это также настоятельно рекомендуется при GTK+ 2. Эта опция никак не меняет кодировку файла. То есть, к примеру, файлы в cp1251 будут корректно отображаться на экране, и сохранятся в своей кодировке.

Чаще всего приходится работать с файлами дампов mysql. Vim имеет поддержку SQL, но СУБД много, и они отличаются друг от друга, например по типам столбцов, и я решил по умолчанию настроить поддержку SQL СУБД MySQL:
if has("autocmd")
    autocmd BufRead *.sql set filetype=mysql      
endif


Общие сведения по установке плагинов



Плагины на сайте Vim'а обычно предоставляются либо в виде архивов, либо просто файл плагина с расширением .vim. На странице плагина обычно описывается тип плагина, что подсказывает в какую папку его класть. А также обычно внизу страницы имеется раздел Install details, где описывается процесс установки и настройки плагина.

Общие плагины, как я заметил(по крайней мере рассмотренные в этой статье), обозначаются как utility и соответственно помещаются в папку ~/.vim/plugin. Часто и сама структура папок в архиве с плагином подсказывает куда класть плагина. Плагины, к примеру обозначенные как syntax, кладутся в папку .vim/syntax. И как очевидно из названия обеспечивают поддержку подсветки синтаксиса определенного языка(языков).

Если я буду отклоняться в установке плагина от инструкции, приводящейся на странице плагина, я буду описывать процесс установки, в остальных случаях подразумевается что плагин установлен точно так, как описано на его странице.

Если к плагину идет файл документации в виде txt файла, то он помещается в директорию ~/.vim/doc. После добавления документации к плагину следует запустить Vim, и выполнить команду генерации(обновления) файла тагов для всей документации в папке doc
:helptags $HOME/.vim/doc


Если команда молча выполнилась, то значит все прошло успешно :) Теперь документация к установленному плагину после перезапуска Vim будет доступна по команде :help. Например для плагина NERD Tree нужно набрать:
:help NERDTree


BufExplorer


ссылка на плагин

image
Очень удобный плагин для переключения между открытыми буферами. Вместе с файлом плагина имеется файл документации. После установки документация будет доступна по команде

:help bufexplorer


Для удобства работы с плагином я создал горячие клавиши на вызов окна со списком открытых буферов и переключения между буферами в файле vimrc:

nmap <C-F5> <Esc>:BufExplorer<cr>
vmap <C-F5> <esc>:BufExplorer<cr>
imap <C-F5> <esc>:BufExplorer<cr>

" F6 - предыдущий буфер
nmap <C-F6> :bp<cr>
vmap <C-F6> <esc>:bp<cr>i
imap <C-F6> <esc>:bp<cr>i

" F7 - следующий буфер
nmap <C-F7> :bn<cr>
vmap <C-F7> <esc>:bn<cr>i
imap <C-F7> <esc>:bn<cr>i


nmap, vmap, imap описывают`поведение комбинации клавишь в нормальном, визуальном и режиме вставки редактора.
<cr> — enter
i в конце команды, которая повешена на комбинацию клавиш, означает перейти в режим вставки.

Так сделано у меня, потому что на F1..F11 повешены команды дебаггера. Вы можете сделать так, как удобней Вам.

NERD Commenter


ссылка на плагин

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

я использую следующие команды:

,cc — закоментировать строку однострочными комментариями. Команда очень эффективна в визуальном режиме. Потому что помещает в комментарии выделенный текст.

,cm — тоже самое, только одним многострочным комментарием

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

,c<space> — инвертирует состояние строки строк. То есть были заккоментированы, становятся расскоментироваными, и наоборот.

,c$ — бывает полезна, когда нужно заккоментировать от курсора до конца строки

NERD Tree


ссылка на плагин
Со страницы плагина:
«What is this „NERD tree“??

Check out this demo www.flickr.com/photos/30496122@N07/2862367534/sizes/o


Да, демо немонстрирует возможности этого плагина. Он с одной стороны довольно прост, с другой стороны это то к чему мы все привыкли в различных IDE — просмотр файлов и каталогов в виде дерева. Он с легкостью может заменить еще и браузер проекта, наподобие такого как Zend Studio, так как любую директорию можно выбрать текущем корнем. По умолчанию Nerd Tree делает корнем директорию из которой запущен Vim.

image
Слева выведенное с помощью NERD Tree дерево каталогов. В верхнем окне открыта документация по NERD Tree. Встроенная документация по нему очень информативна.

Часто используемые команды:

o — Открыть/закрыть каталог в дереве, открыть файл и перейти в окно с файлом.

go — Открыть файл, но курсор остается на NERD Tree

i — открыть файл в отдельном окне, разделение идет по горизонтали.

gi — тоже самое что и i, но курсор остается на NERD Tree

С — сделать корнем текущую директорию

u — сделать корнем директорию выше текущей.

cd — изменить CWD на директорию, на которую указывает курсор. То есть относительные пути в таких командах как :e, :o теперь будут отчитываться от этой директории.

Легкая модификация


Я решил что удобно, когда дерево открывается всегда, поэтому в конец файла NERD_tree.vim добавил строку:

call s:initNerdTree(getcwd())


также я назначил горячие клавиши на открытие и закрытие NERD Tree в vimrc:

nmap <C-N>v :NERDTree<cr>
vmap <C-N>v <esc>:NERDTree<cr>i
imap <C-N>v <esc>:NERDTree<cr>i

nmap <C-N>x :NERDTreeClose<cr>
vmap <C-N>x <esc>:NERDTreeClose<cr>i
imap <C-N>x <esc>:NERDTreeClose<cr>i


Плагины для улучшения поддержки PHP


FileType плагин для PHP


Ссылка на плагин

image

К плагину нет никакого описания, ссылку на плагин я нашел на странице списка плагинов для поддержки разных
языков программмирования — www.vim.org/vimscriptlinks.php. И по видимому этот плагин является рекомендуемым.
Из полезного что я заметил при просмотре кода плагина — это скачки по функциям, методам класса с помощью ]] и [[.

Плагин устанавливается в папку с filetype плагинами. Я предположил что у меня может быть несколько таких плагинов для php и поэтому создал отдельную папку для них — ~/.vim/ftplugin/php/ и положил плагин туда.

Но естественно этого мало и я решил доработать плагин, и добавить в него php мануал в виде встроенной документации вима, возможность просмотра документации по нажатию клавишы K для функции или конструкции языка, над которой находится курсор, подсветку sql, и html для строк в php кодах. А также проверку на отстутствие ошибок в скрипте, который в текущем буфере по команде :make. Еще я добавил словали для автодополнения стандартных функций PHP.

Все строки ниже я добавляю в файл php.vim перед этими последними строками плагина:

" Restore the saved compatibility options.
let &cpo = s:save_cpo


Которые как я понял после отработки плагина на всякий случай устанавливают опции совместимости обратно,
предусмотренно сохраненные до этого в переменную s:save_cpo

Первым делом я добавил проверку PHP скрипта в текущем буфере по команде :make.

" Проверка синтаксиса PHP
set makeprg=php\ -l\ %

 " Формат вывода ошибок PHP
 set errorformat=%m\ in\ %f\ on\ line\ %l


Я нашел мануал по php в формате Vim help по этой ссылке vim.wikia.com/wiki/PHP_manual_in_Vim_help_format
Прямая ссылка на скачивание мануала planetxml.de/php_manual.txt. Также на этой странице Vim Вики есть ссылка на скрипт, с помощью которого был создан этот мануал.

Мануал кладется соответственно в папочку ~/.vim/doc и для него создаются таги. После этого можно получить помощь по любой функции php, например так:

:help func_get_args


Также на странице плагина PHPCollection я нашел две ссылки на словари списка функций и списка прототипов функций для PHP:

www.leon.w-wa.pl/texts/phpfunclist
www.leon.w-wa.pl/texts/phpproto

И положил их в папку ~/.vim/dic/

Также я скачал список функций с сайта Расмуса Лердорфа — lerdorf.com/funclist.txt

и скопировал его в файл ~/.vim/dic/php

И в плагине ниже уже добавленных мной строк я написал:

setlocal dictionary+=$HOME/.vim/dic/phpfunclist
setlocal dictionary+=$HOME/.vim/dic/phpfunclist
setlocal dictionary+=$HOME/.vim/dic/phpproto


image

Далее из плагина PHPCollection, который представляет собой архив из нескольких скриптов я взял скрипт phpmanual.sh, и поместил его в директорию ~/.vim/external/
дал ему права на исполнение

chmod +x phpmanual.sh


и изменил в нем MANUAL_DIR:

MANUAL_DIR="${HOME}/.vim/manual/php/"


Затем нужно скачать с официального сайта php в виде “много html файлов». Это архив, после его распаковки появляется директория html. Все ее содержимое нужно скопировать в папку ~/.vim/manual/php/

Пример распаковки архива в формате tar.gz:

tar zxvf arhive_name.tar.gz


И теперь в тот же плагин для php под уже добавленными строчками я добавил еще одну:

setlocal keywordprg=$HOME/.vim/external/phpmanual.sh


Отлично, теперь при нажатии клавиши K, когда курсор стоит над функцией, по которой я хочу получить документацию, я попадаю в lynx, с открытой страницей документации по этой функции :)

image
Встроенная документация по PHP в Vim

image
После нажатия K на array_shift(… я попал в lynx на страницу документации по этой функции

Плюс стоит добавить подсветку HTML и SQL в строках в PHP коде.
let php_sql_query=1
let php_htmlInStrings=1


PHP Indent Plugin

ссылка на плагин
С помощью этого плагина Vim грамотно делает отступы в PHP коде. Я врядли смогу лучше рассказать о возможностях плагина, его настройке и установке, чем его официальная страница на vim.org.

PHP Syntax Plugin


ссылка на плагин

Этот плагин обеспечивает превосходную подсветку синтаксиса php кода. Из приятных особенностей стоит отметить то что
подсветка стандартных классов, интерфейсов, констант, отличную от подсветки их же, но объявленных программистом.
Пары фигурных скобок различаются по цвету для функций/методов, классов, и блоков циклов и условных блоков. Это бывает необходимо, особенно когда нужно разбираться с чужим кодом, где плохо расставлены отступы, и не всегда видно где кончается условный блок, где функция. Приятна подсветка PCRE регулярных выражений. Все особенности плагина и процесс его установки расписаны на его странице.

image
Подсветка синтаксиса делает разбор кода, даже если он плохо отформатирован, легче. А подсветка SQL в строках увеличивает его читабельность, даже если запросы не разбиты на несколько строк и не форматированы, как например в Drupal/

PDV — phpDocumentor for Vim



ссылка на плагин

Данный плагин сильно упрощает работу с документированием кода в стиле phpDocumentor. Причем делает это гораздо эффективней чем ZendStudio 5.5, которой я долго пользовался(на 6ю так и не пересел, не впечатлила), пока не перешел на Vim :)
Плагин позволяет определить Package к которому относятся классы, файлы, автора исходных кодов, версию, копирайты, и лицензию. За это отвечают следующие переменные в файле плагина:

g:pdv_cfg_Type
g:pdv_cfg_Package
g:pdv_cfg_Version
g:pdv_cfg_Author
g:pdv_cfg_Copyright
g:pdv_cfg_License


Само собой их можно переопределять из командной строки Vim:

:g:pdv_cfg_Package="Core"


И в итоге при комментировании классов будет вставляться тег @package Core

Наиболее часто употребляемая команда это <C-P>, которая создает комментарий над строкой, с учетом того, что это строка представляет. Комментарии для методов и функций, классов, атрибутов классов генерируются по разному.

Установка

Плагин я установил не так как написано на страние плагина, а в папку ftplugin/php/, то есть у меня он лежит по адресу ~/.vim/ftplugin/php/php-doc.vim. Таким образом плагин задействуется только для php файлов.

Доработка плагина


При использовании плагина я заметил что он корректно создает блоки комментариев для атрибутов классов, объявленных как static, и некорректно для объявленных как protected/public/private static, например:

protected static $var = false;


Чтобы исправить эту ситуацию, а со временем она начинает немного огорчать, следует заняться доработкой плагина. Действия описанные ниже, проводятся над последней версией — 1.0.1. И судя по дате релиза, автор перестал поддерживать плагин. Так что лучше доработать самим. Я не буду объяснять каждую строчку кода, думаю Вы сами сможете разобраться что к чему. К тому же я подробно разбираюсь с написанием плагинов и готовлю материал по написанию плагинов на Vim Script, который с радостью потом выложу :)

Строчку 126 плагина, представляющую из себя регулярное выражение нужно заменить на следующую:

let g:pdv_re_attribute = '^\s*\([private\|public\|protected\|var\|static]\+\)\s*\(static\|\s*\)*\$\([^ ;=]\+\)[ =]*\(.*\);\?$'


На строке 103 изменяем значение глобальной переменной:

let g:pdv_cfg_php4guessval = "public"


Внесем изменения в функцию PhpDocVar().

Строки 339 — 342 заменяем на:

let l:modifier = substitute (l:name, g:pdv_re_attribute, '\1', "g")
let l:varname = substitute (l:name, g:pdv_re_attribute, '\3', "g")
let l:default = substitute (l:name, g:pdv_re_attribute, '\4', "g")


заменяем на:

let l:modifier = substitute (l:name, g:pdv_re_attribute, '\1', "g")
let l:static  = substitute (l:name, g:pdv_re_attribute, '\2', "g")
let l:varname = substitute (l:name, g:pdv_re_attribute, '\3', "g")
let l:default = substitute (l:name, g:pdv_re_attribute, '\4', "g")


строку 344:

let l:static = g:pdv_cfg_php4always == 1 ? matchstr(l:modifier, g:pdv_re_static) : ""


заменяем на:

let l:static = match(l:modifier, "static") == 0 ? "static" : l:static


И после этого у нас корректно генерируются теги access и static для переменных вида:

private $var;
protected $var;
public $var;

private static $var;
protected static $var;
public static $var;

static $var;
var $var;


static теперь подставляется всегда, когда указан модификатор переменной static. И для двух последних примеров, когда не указан модификатор доступа, access выставляется в public, благодаря умолчальному значению

g:pdv_cfg_php4guessval


Все, теперь этот удобный плагин для создания комментариев phpDocumentor стал еще лучше :)

image
Комментарий к функции blog_block, представляющий из себя каркас с базовым описанием параметров был сгенерирован с помощью плагина PDV

JavaScript


Здесь я хотел написать про плагины для поддержки синтаксиса и автодополнения яваскрипта. Но у Vim изначально хорошая поддержка яваскрипта плагинами которые устанавливаются вместе с Vim, с автодополнением omnicompletion, доступным по умолчанию по комбинации <C-o><C-p> в режиме редактирования.

image

XML, XHTML, XSL, XSLT


Это все делает один filetype плагин.

Описание на странице плагина впечатляет. Я не берусь его здесь пересказывать. Добавлю, что описанное в инсталляции
создание символических ссылок очень рекомендую сделать. В этом случаи возможности плагина упрощают редактирование XHTML документов. А XHTML является подмножеством XML. И появится поддержка автодополнения тегов XSL, XSLT.

image
Автодополнение XSLT

В написании статьи мне помогли:




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

Tags:
Hubs:
+72
Comments 62
Comments Comments 62

Articles