Sublime Text: валидация синтаксиса, автодополнение (v.1.1)

    UPD: по совету комментаторов, заменил jsl на более новый eslint

    Заметил у себя на работе, что многие JS-разработчики до сих пор используют «голый» Sublime Text, матерясь и чертыхаясь после каждой пропущенной запятой, непарной скобочки или еще какой опечатки. Поэтому написал краткий гайд по исправлению этого недоразумения, которым с вами и делюсь. Итак:

    Подсветка синтаксических ошибок


    картинко

    Если у вас был установлен SublimeLinter-jsl, то его сначала нужно удалить с помощью Cmd-Shift-P → PackageControl: Remove Package и перезапустить Sublime.

    Вам понадобится npm.

    • Установите eslint с помощью npm install -g eslint
    • Запустите Sublime
    • Установите Package Control: https://packagecontrol.io/installation
    • Перезапустите Sublime
    • Нажмите Cmd-Shift-P, наберите Install, выберите Package Control: Install Package
    • Подождите, пока загрузится список пакетов, выберите SublimeLinter
    • Перезапустите Sublime
    • Повторите Cmd-Shift-P → Install Package, выберите пакет SublimeLinter-contrib-eslint
    • Перезапустите Sublime

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


    картинко

    Установите Tern for Sublime. Это плагин для Sublime, осуществляющий интерфейс с Tern — инструмент для «умного» автодополнения в JavaScript, основанный на выводе типов (type inference). Tern устанавливается вместе с плагином.

    Возможно, потребуется вручную выполнить npm install в папке с установленным пакетом (для мака они лежат в ~/Library/Application Support/Sublime Text 3/Packages).

    После установки обратите внимание на дополнительные опции конфигурации (включающие хинтинг аргументов функций, например), они задаются в меню Sublime Preferences → Package Settings → Tern → Settings — Default. По умолчанию они отключены из-за возможной нестабильной работы, но в моем случае проблем не было:

    {
        "tern_argument_hints": true,
        "tern_output_style": "tooltip",
        "tern_argument_completion": true
    }

    Затем создайте в корне проекта файл .tern-project. Структура его примерно следующая:

    {
      "libs": [
        "browser",
        "jquery",
        "underscore"
      ],
      "loadEagerly": [
        "./some_folder/*.js"
      ]
    }

    В loadEagerly указываются файлы, которые нужно парсить (он понимает wildcards). К сожалению, если указать там все-все-все скрипты (в моём случае), то Tern зависает намертво. Поэтому будьте осторожнее с этим, включайте только то, что необходимо.

    UPD: Если юзаете Node/requireJS/angular, в мануале Tern сказано как включить умное разрешение зависимостей для исходников, тогда без явного указания скриптов в loadEagerly можно обойтись. Но я сам это не проверял.

    Массив libs задает список предопределенных библиотек, которые Tern понимает без необходимости их парсить — с помощью заранее сгенерированных/написанных вручную словарей типов. Вот тут можно почитать про то, как это у него устроено. Библиотека browser означает набор встроенных API браузера.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 9

      +8
      Где вы откапали jsl?
      Есть же современный и ошеломительный eslint
        0
        Ну, я им все это время пользовался и проблем не было :) Про eslint просто не знал, т.к. jsl до сих пор работал норм. Но с приходом ES6 видимо все же придется обновиться на eslint. Я поправлю статью когда разберусь с его установкой.
      +1
      Для typescript рекомендую аналогичную настройку – typescript plugin + SublimeLinter + tslint.
        +10
        jsl последней версии вышел почти 10 лет назад. Похоже на некрофилию.
        Есть современные, регулярно обновляющиеся инструменты, вроде eslint и jshint.
          +3
          И JSCS
            0
            Must have! Куда же без него :)
          +1
          Да, ещё Tern судя по всему умеет парсить директивы require, подгружая зависимые скрипты без явного указания в loadEagerly. Для этого надо подключить плагин в конфиге. Думаю многим это было бы полезно. Еще я видел там плагин для зависимостей ангуляра. Все это есть в его мануале: http://ternjs.net/doc/manual.html
            0
            P.S. Чтобы eslint понимал синтаксис ES6, нужно добавить в корень проекта файл .eslintrc со следующим содержанием:
            {
              "parserOptions": {
                "ecmaVersion": 6,
                "sourceType": "script"
              }
            }

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

            Самое читаемое