VIM и JSLint

Вышло так, что я почти не пишу на хабрахабр — тому есть свои причины. Но очень хотелось бы поделиться одной вещью, которая наверняка будет полезна всем тем, кто работает с JavaScript'ом в vim’е, к тому же на хабрахабре я подобного материала не нашёл.


Кому-то это может показаться странным, но работать в vim’е действительно удобно (особенно в консольном — я отвязан от gui, потому могу спокойно работать через ssh; впрочем то же самое можно устроить и с gui). В этом я полностью согласен с Derek’ом Wyatt’ом — автором замечательных скринкастов по vim'у. Правда стоит заметить, что удобно будет после того, как поймешь, что vim — это несколько иной редактор (из-за чего к нему нужно привыкать), а также немного настроишь его под себя. О настройке под себя и пойдёт речь.

Те, кто много и профессионально программируют, знают, что качество кода влияет на количество ошибок (естественно это не единственный фактор). Также, зачастую они знают о существовании lint-инструментов (начавшихся с программы lint, написанной в Bell Labs Стивеном Джонсоном), помогающих программисту проверять свой и чужой код на наличие подозрительных, потенциально опасных конструкций, а также просто ошибок в синтаксисе. И если для php включить lint-режим достаточно легко — достаточно лишь добавить в ~/.vim/ftplugin/php.vim две строчки (Слайды и файлы Андрея Змиевского).

set makeprg=php\ -l\ %
set errorformat=%m\ in\ %f\ on\ line\ %l

и использовать :make для проверки, то для проверки JavaScript нужно приложить несколько больше усилий, о которых я и собираюсь рассказать.

Для JavaScript существует JSLint — онлайн инструмент для проверки js-кода. Наша задача в том, чтобы запустить его оффлайн.

Для этого, в зависимости от операционной системы и имеющихся программ, нам понадобятся

1. Немного времени
2. Естественно, сам VIM
3. Исходники JSLint'а
4. Один из JavaScript-движков — например SpiderMonkey, Rhino, или любой другой движок. Владельцам OSX повезло чуть больше — в ней есть готовый к использованию JavaScriptCore (движок для Webkit'а).

Допустим, что у вас есть vim, а также уже установлен какой-нибудь JavaScript-движок (если будут вопросы по установке, лучше всего их задавать в комментариях). Также отдельно стоит уточнить ситуацию с WSH Command Line и Rhino — для них есть специальные версии — www.jslint.com/wsh/index.html и www.jslint.com/rhino/index.html, соответственно. Я же расскажу о том, как запустить JSLint для SpiderMonkey/JavaScriptCore.

Чтобы достичь цели, понадобится отредактировать ~/.vim/ftplugin/javascript.vim, добавив туда такие строчки

if filereadable( 'PATH_TO_JS_ENGINE' )
set makeprg=PATH_TO_JS_ENGINE\ ~/.vim/jslint_runner.js\ <\ %:p
set errorformat=Line\ %l\ column\ %c:\ %m
endif

где PATH_TO_JS_ENGINE — путь до вашего js-движка (для mac это /System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc, а для установивших SpiderMonkey это по умолчанию /usr/local/spidermonkey/bin/js).

После этого нужно добавить в конец fulljslint.js следующий код

var body = [],
    line,
    num_empty_lines = 0;

// Т.к. в большинстве js-движков нет механизма проверки на конец файла,
// а после конца файла нам валятся пустые строки, используем некоторый
// разумный предел пустых строк, в данном случае 50
while ( 50 > num_empty_lines ) {
    line = readline();
    body.push( line );

    if ( 0 === line.length ) {
      // blank line, so increment
      num_empty_lines += 1;
    } else {
      // not blank, so reset
      num_empty_lines = 0;
    }
}

body.splice( -num_empty_lines );
body = body.join( "\n" );

// Набор настроек из «Good Part», но без проверки whitespace
options = {
    bitwise    : true,  // if bitwise operators should not be allowed
    eqeqeq     : true,  // if === should be required
    glovar     : true,  // if HTML fragments should be allowed
    regexp     : true,  // if the . should not be allowed in regexp literals
    undef      : false, // if variables should be declared before used
    onevar     : true,  // if only one var statement per function should be allowed.
    newcap     : true,  // if Initial Caps must be used with constructor functions
    immed      : true,  // if immediate function invocations must be wrapped in parens
    plusplus   : true,  // if increment/decrement should not be allowed
    nomen      : true   // if names should be checked
};

// Следующий комментарий устанавливает такие же параметры, если помещён
// в начало js-файла
/*jslint onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, strict: true, newcap: true, immed: true */

var result = JSLINT( body, options );
if ( !result ) {
    for ( i = 0; i < JSLINT.errors.length; i+=1 ) {
        var err = JSLINT.errors[i];
        print(
            'Line ' + err.line + ' column ' + err.character + ': ' + err.reason
        );
    }
} else {
    print( 'No errors found' );
}

и сохранить получившийся файл как ~/.vim/jslint_runner.js.

Последний код — не мой личный, я нашёл его в интернете и лишь немного отредактировал.

После того, как ~/.vim/ftplugin/javascript.vim и ~/.vim/jslint_runner.js будут говтовы, нужно выполнить :so ~/.vim/ftplugin/javascript.vim, или просто перезапустить vim. После этого можно смело выполнять :make, и если ошибки есть — перемещаться по ним с помощью :cn и :cp (:h quickfix).

Я также знаю, что существуют плагины для vim'а (пример) и другие обсуждения данной задачи (пример). Если вы знаете ещё что-то полезное по этой теме — добро пожаловать в комментарии, я буду благодарен.

ps. Для Windows есть ещё несколько отличий, кроме WSH — домашняя папка vim'а находится в другом месте, а .vimrc превращается в vimrc.

pps. Статья подготовлена с помощью vim.