Recovery mode
Из песочницы
Всем привет. У Sublime Text 3 есть замечательный плагин Sublime Linter, который позволяет делать проверку кода на наличие синтаксических ошибок. Промучился я как-то с настройкой этого SublimeLinter, аж три дня. Но всё таки мои мучения прошли не зря и теперь Sublime на лету проверяет синтаксис в HTML, CSS, PHP и JS файлах. Вроде бы всё подробно расписано на различных форумах, а он в некоторых случаях не работает — и всё, хоть убей. Поэтому я и пишу эту статью, чтобы охватить всё и сразу.

ВНИМАНИЕ! Статья описывает настройку Sublime Text 3 (далее ST3) на Windows 7 x64 Professional.
Итак, поехали.
1. Представим что вы уже установили ST3 на свой Win 7 и установили Package Control.
2. Теперь необходимо поставить дополнительные пакеты в ST3. Идем в Preferences -> Package Control -> Install Packages
И устанавливаем следующие пакеты:
— SublimeLinter
— SublimeLinter-html-tidy
— SublimeLinter-csslint
— SublimeLinter-jsl
— SublimeLinter-jshint
— SublimeLinter-php
— SublimeLinter-phplint
— LESS
— JSHint
3. Настройка проверки ошибок синтаксиса HTML
3.1. Скачиваем tidy.exe и кладем его в любую понравившуюся вам папку.
3.2. Добавляем путь до этой папки! с tidy.exe в переменную серды пользователя windows (PATH), настройки которой, находятся в Мой компьютер -> Свойства -> Дополнительные параметры системы -> Переменные среды… -> Выбираем переменную «PATH» -> Жмем «Изменить» добавляем путь.
ВНИМАНИЕ! Обратите внимание на точку с запятой «;» после каждого пути и не забудьте её прописать, а так же обратите внимание на обратный слеш.
4. Настройка проверки ошибок синтаксиса CSS
4.1. Скачиваем и устанавливаем node.js
4.2. Добавляем путь до папки (до папки!) с node.js в PATH (путь примерно следующий: C:UsersUser_nameAppDataRoamingnpm )! Незабываем про точку с запятой.
4.3. Устанавливаем csslint. Для этого — запускаем командую строку Windows от имени админа и пишем: npm install -g csslint
5. Настройка проверки ошибок синтаксиса JavaScript
5.1. Если не делали пункты 4.1. и 4.2. — то делаем.
5.2. Устанавливаем jslint и jshint, для этого выполняем ту же самую операцию что и в пункте 4.3. только пишем вместо csslint — jslint и jshint соответственно.
6. Настройка проверки ошибок синтаксиса PHP
6.1. Вот с этиим вобще гемор. Лично я долго искал проблему, почему же не работает подсветка.
6.2. (UPDATE) Дело в том, что многие (в том числе и я) в качестве локального сервера ставят себе Denwer. И черт его знает почему (не вдавался в подробности), но PHP денвера не воспринимается ST3, хоть убей. Он может выводить ошибки PHP в консоль ST3, но подсветки синтаксиса так и не будет.
P.S. Я специально добавил этот пункт, т.к. на многих форумах пишут, что ставим PHP, настраиваем пакеты ST3 и будет вам счастье. Но счастья не происходит, т.к. пункт с установкой PHP обычно сразу опускается из-за надежды на работоспособность(пригодность) denwer-a.
6.3. Поэтому, сразу идем сюды и скачиваем PHP. Установка PHP — просто разархивируйте архив в любую папку и пропишите путь до этой папки в PATH (пункт 3.2.)
6.4. Если у вас был прописан в PATH путь до папки с PHP денвера, то обязательно удалите его.
7. Файл конфигурации SublimeLinter.sublime.settings
НЕОБХОДИМО ПОПРАВИТЬ ПУТИ К tidy.exe и php.exe
{
"user": {
"debug": true,
"delay": 0.25,
"error_color": "D02000",
"gutter_theme": "Packages/SublimeLinter/gutter-themes/Circle/Circle.gutter-theme",
"gutter_theme_excludes": [],
"lint_mode": "background",
"linters": {
"csslint": {
"@disable": false,
"args": [],
"errors": "",
"excludes": [],
"ignore": "",
"warnings": ""
},
"hlint": {
"@disable": false,
"args": [],
"excludes": []
},
"htmltidy": {
"@disable": false,
"args": [],
"excludes": []
},
"jscs": {
"@disable": false,
"args": [],
"excludes": []
},
"jshint": {
"@disable": false,
"args": [],
"excludes": []
},
"jsl": {
"@disable": false,
"args": [],
"excludes": []
},
"php": {
"@disable": false,
"args": [],
"excludes": []
},
"phplint": {
"@disable": false,
"args": [],
"excludes": []
}
},
"mark_style": "outline",
"no_column_highlights_line": false,
"passive_warnings": false,
"paths": {
"linux": [],
"osx": [],
"windows": []
},
"python_paths": {
"linux": [],
"osx": [],
"windows": []
},
"rc_search_limit": 3,
"shell_timeout": 10,
"show_errors_on_save": false,
"show_marks_in_minimap": true,
"sublimelinter": true,
"sublimelinter_executable_map": {
"css": "node",
"html": "Z:\usr\bin\tidy.exe", //путь до вашей папки с tidy.exe, обратите внимание на двойные обратные слеши, они обязательны
"php": "C:\Program Files\PHP_5.6\php.exe" //путь до вашей папки с php.exe
},
"syntax_map": {
"css": "css",
"html (django)": "html",
"html (rails)": "html",
"html 5": "html",
"js": "js",
"php": "php",
"python django": "python"
},
"warning_color": "DDB700",
"wrap_find": true
}
}
8. Перезапускаем Sublime. Profit.
Еще! Бывает что некоторые забывают про режим debug mode у Sublimelinter. Чтобы его включить, жмем правой кнопкой мыши в любое место области редактирования ST3 -> SublimeLinter -> Debug Mode
Термин linting применяется для обозначения процесса обнаружения ошибок в исходных файлах программ, скриптов или документов. Программа такого рода должна иметься в инструментарии каждого разработчика, так как с помощью таких программ можно обнаруживать ошибки в процессе написания кода. Популярный редактор кода Sublime Text не имеет встроенных возможностей для обнаружения ошибок; однако такую ситуацию легко исправить.
При помощи linting‘а можно обнаруживать небольшие ошибки кода “на лету”, в процессе написания этого кода — например, пропущенную точку с запятой в JavaScript-коде. Возможность обнаружения ошибок в редакторе Sublime Text осуществляется с помощью плагина SublimeLinter, который необходимо установить прежде всего.
Если в какой-либо строке кода этот редактор обнаружит ошибку, то данная строка будет подсвечена в gutter редактора Sublime. Более того, если поместить курсор мыши в строку с ошибкой, то в status bar редактора Sublime Text отобразится краткое описание ошибки, что поможет принять меры для ее правильного устранения.
Ниже представлен наглядный пример подсветки ошибок в Sublime Text с помощью плагина SublimeLinter:

Плагин SublimeLinter сам по себе не выполняет процесса “отлавливания” ошибок в коде, так как является всего-лишь фреймворком, основой для других плагинов (linter), каждый из которых создан для обнаружения ошибок в каком-то определенном языке — JavaScript, PHP, Ruby, Python, HTML, CSS и так далее.
SublimeLinter в Sublime Text
Как уже упоминалось ранее, плагин SublimeLinter является фреймворком, основой для более маленьких плагинов (linter), которые осуществляют непосредственный поиск синтаксических ошибок в программном коде.
Поэтому первоначально необходимо установить этот фреймворк (как плагин) в редактор Sublime Text и самый простой способ это сделать — воспользоваться менеджером пакетов Package Control. Для этого нажимаем сочетание клавиш Shift+Ctrl+P (Linux Windows) или Shift+Cmd+P (Mac OSX). В поле поиска вводим название устанавливаемого пакета — SublimeLinter. Далее — производим установку.
Теперь необходимо определиться с тем, в каких языках программирования необходимо “отлавливать” ошибки. Другими словами, на каких языках программирования вы пишете и в каких из них вам необходима поддержка SublimeLinter.
Допустим, это серверный язык PHP. Тогда для включения возможности обнаружения ошибок в Sublime Text необходимо установить плагин SublimeLinter-php, так же через менеджер пакетов Package Control. Стоит оговориться, что дополнительной зависимостью этого плагина является язык PHP, который предустановлен в операционных системах LinuxMacOSX, но который необходимо заранее установить отдельно в операционной системе Windows.
Примером работы связки SublimeLinter + SublimeLinter-php в редакторе Sublime Text может послужить нижеследующее изображение:

Рассмотрим другой случай, когда в редакторе Sublime Text используется язык программирования JavaScript. Тогда для возможности отлавливания ошибок в JS-коде необходимо установить плагин SublimeLinter-jshint. В этом случае вопрос зависимостей этого пакета выглядит несколько сложнее. Плагин SublimeLinter-jshint основывает свою работу на JSHint, который необходимо установить в виде пакета под Node.js и устанавливается с помощью менеджера пакетов npm. Поэтому в операционной системе заранее должны быть установлены Node.js, npm и JSHint.
Примером работы плагина SublimeLinter-jshint может послужить нижеследующее изображение:

Рассмотрим еще один случай, когда в редакторе Sublime Text используется язык таблиц каскадных стилей CSS (куда же без него?). Тогда необходимо доустановить в Sublime Text плагин SublimeLinter-csslint.
Рассмотрение подобных плагинов (linter) можно продолжать еще долго. Поэтому ограничимся только тремя вышеприведенными. Стоит сказать, что для поиска какого-либо конкретного плагина (linter) удобно воспользоваться online-сервисом Package Control, в поисковой строке которого достаточно ввести начало названия искомого пакета, например, так — “SublimeLinter-“. Система автоматически выдаст список все плагинов под фреймворк SublimeLinter.
Как нетрудно заметить, окончание (суффикс) в названии каждого из плагинов является подсказкой, для поддержки какого языка был создан этот плагин. Например, для языка Ruby существует плагин SublimeLinter-ruby, для препроцессора Haml имеется плагин SublimeLinter-haml.
Также стоит сказать, что необходимо внимательно читать описание к каждому из тех плагинов, которые планируется установить, так как каждый из них имеет разные зависимости. Наглядный пример зависимостей у плагинов SublimeLinter-php и SublimeLinter-jshint был приведен выше.
Настройка SublimeLint
В плагине SublimeLint имеется большое количество настроек. Однако, с большинством из них не составит труда разобраться. Ниже приведено краткое описание некоторых из них.
Linting Modes
Эта настройка отвечает за поведение плагина SublimeLinter — когда плагин должен оповещать об обнаруженной ошибке в коде программы или документа.
- Background — это поведение по умолчанию плагина SublimeLinter. Сообщения об обнаруженных ошибках будут появляться по мере их обнаружения (другими словами — по мере написания строк кода) и будут обновляться каждый раз, когда будет производиться исправление обнаруженных ошибок. Такой режим может показаться излишне назойливым, так как иногда сообщение об ошибке может появиться прежде, чем будет дописана до конца инструкция, в которой вкралась ошибка.
- LoadSave — в этом случае сообщения об ошибках будут отображаться плагином только после сохранения или загрузки сохраненного документа.
- Save Only — сообщения об обнаруженных ошибках будут отображаться только при сохранении документа.
- Manual — ручной вызов проверки на ошибки, из командной панели редактора Sublime Text.
Лично я предпочитаю режим LoadSave, так как в этом случае плагин SublimeLinter не мешает работать с кодом до тех пор, пора не будет выполнено сохранение этого кода в файле. Режим Background может показаться излишне назойливым, так как сообщения об ошибках будут появляться постоянно, мешая работе.
Для того, чтобы изменить поведение плагина SublimeLinter через настройку Linting Modes, необходимо зайти в командную панель редактора Sublime Text с помощью сочетания клавиш (Shift+Ctrl+P или Shift+Cmd+P) и ввести в строке поиска следующее:
sublimelinter lint mode
… откроется выпадающий список со всеми настройками плагина SublimeLinter, из которого необходимо выбрать SublimeLinter: Choose Lint Mode:

Mark Style
Настройка Mark Style отвечает за внешний вид выделения ошибки в строке кода. Значением по умолчанию является outline. Но можно выбрать любое другое значение из предустановленных настроек.
В соответствии с официальной документацией SublimeLinter имеются несколько вариантов выделения ошибок в строке кода:
- fill
- outline
- solid underline
- squiggly underline
- stippled underline
Аналогично с режимом Linting Modes, режим Mark Style настраивается через командную панель редактора Sublime Text — Shift+Ctrl+P (Linux Windows) или Shift+Cmd+P (Mac OSX). В выпадающм списке нужно выбрать строку Sublime Linter: Choose Mark Style.
Ниже представлены скриншоты всех пяти режимов выделения ошибок в строке, чтобы можно было сравнить и выбрать наиболее подходящий вариант.
Fill

Outline

Solid Underline

Squiggly Underline

Stippled Underline

Gutter Themes
В дополнение к настройке выделения ошибок в строке кода, можно выполнить настройку иконок, который помещаются в области gutter редактора Sublime Text напротив строки с обнаруженной ошибкой. Такое выделение строки служит для большей информативности.
В плагине SublimeLinter имеется набор предустановленных иконок, наглядное изображение которых представлено ниже.
Blueberry – cross

Blueberry – round

Circle

Danish Royalty

Hands

Knob – simple

Knob – symbol

Koloria

ProjectIcons
![]()
Изменить настройки отображения иконок можно, зайдя в командную панель редактора Sublime Text и выбрав в выпадающем списке строку Sublime Linter: Choose Gutter Theme.
Заключение
Плагин SublimeLinter является очень мощным и гибким, а количество поддерживаемых им язык — очень большое. Вы можете посетить страницу поддерживаемых языков, чтобы убедиться в богатом выборе поддерживаемых языков программирования, разметки и многих других.
Рассмотренные в этой статье возможности плагина SublimeLinter являются далеко не исчерпывающими. На официальной странице документации вы всегда найдете для себя что-то новое. Для этого нужно только периодически просматривать эту документацию.
Текстовой редактор Sublime Text 3 позволяет проверять программистам и верстальщикам код на наличие ошибок в css, JavaScript, php и т.д. Если вы где-то ошиблись, то на соответствующей строчке высветится ошибка.
Программы для проверки ошибок называются линтерами.
Установка SublimeLinter
Для того, чтобы была возможность проверки кода надо установить из Package Control пакет SublimeLinter.
После установки SublimeLinter появится возможность устанавливать отдельные компоненты, которые и позволят задействовать эти инструменты.

Установка SublimeLinter-jshint
SublimeLinter-jshint — позволяет увидеть ошибки в коде на JavaScript.
Ссылка на инструкцию:
https://github.com/SublimeLinter/SublimeLinter-jshint
Краткая инструкция
1. Перед установкой компонентов на компьютере должен быть установлен Node.js.
2. Открываем Терминал. Пишем команду:
sudo npm install -g jshint
3. В Sublime Text 3 открываем установку пакетов и пишем SublimeLinter-jshint. Нажимаем на него, пакет установлен. Теперь если возникнет ошибка в JavaScript коде, вы сразу об этом узнаете.

Установка SublimeLinter-csslint
SublimeLinter-csslint — показывает ошибки в CSS коде.
Ссылка на инструкцию:
https://github.com/SublimeLinter/SublimeLinter-csslint
Краткая инструкция
1. Точно также должен быть установлен Node.
2. В Терминале запускаем команду:
3. В Sublime Text 3 устанавливаем пакет SublimeLinter-csslint.

Как видно на картинке выше показываются не только ошибки, но и рекомендации. Например, SublimeLinter-у не нравится, что используется описание стиля для идентификатора, а не для стиля.
Установка SublimeLinter-php
Пакет для проверки ошибок в PHP коде.
Ссылка на инструкцию:
https://github.com/SublimeLinter/SublimeLinter-php
Краткая инструкция
1. На компьютере должен быть установлен PHP. Возможно он уже установлен у вас, например, вместе с MAMP PRO. Если не установлен, по ссылке выше, есть ссылка на дистрибутивы.
2. В Sublime Text 3 устанавливаем пакет SublimeLinter-php.
Если ничего не заработало
После установки перезапустите программу Sublime Text 3.
This is a plugin for Sublime Text which provides checkstyle reports using the following tools (all optional):
- PHP_CodeSniffer (phpcs)
- Linter (php -l)
- PHP Mess Detector (phpmd)
- Scheck (scheck, part of Facebook’s pfff toolchain)
You can also configure the plugin to fix the issues using either
- PHP Coding Standards Fixer (php-cs-fixer)
- PHP Code Beautifier (phpcbf) application
Requirements
Requirements for this plugin, should you want all the options to work:
- PHP_CodeSniffer 3.5+ (potentially works with lower versions, but this hasn’t been tested) — Install
- PHPMD 2.8+ (potentially works with lower versions, but this hasn’t been tested) — Install
- PHP CS Fixer version 2.6+ (potentially works with lower versions, but this hasn’t been tested) — Install
This plugin has been tested on:
- Mac OS X 10.8.2
- Ubuntu 11.10
- Windows 7
- Sublime Text 2
- Sublime Text 3
Installation
Use Sublime Text’s Package Control (Preferences -> Package Control -> Install Package -> Phpcs) to install this plugin. This is the recommended installation path.
Or
Simply checkout the git repo into “~/Library/Application Support/Sublime Text [VERSION NUMBER]/Packages/ or the equivalent folder on Windows or Linux.
cd ~/Library/Application Support/Sublime Text 2/Packages/
git clone git://github.com/benmatselby/sublime-phpcs.git Phpcs
In both cases, you may need to then configure the following with the actual path to the application:
- “phpcs_php_path”
- “phpcs_executable_path”
- “phpmd_executable_path”
- “php_cs_fixer_executable_path”
They are optional for the plugin. The path needs to include the application such as “/usr/local/bin/phpcs”.
In order to get the path of the application (On a Mac/Linux based environment), you can use:
which phpcs
which phpmd
which php-cs-fixer
which phpcbf
Features
- Ability to run PHP_CodeSniffer
- Ability to run php -l on the open file
- Ability to run PHP Mess Detector on the open file
- Ability to run Scheck on the open file
- Show cached results from PHP_CodeSniffer in open file
- Show errors in the Quick Panel
- Show errors in the Gutter
- Highlight the errors in the editor
- Show the error for a given line in the status bar
- Ability to specify the regular expression of the linter errors
- Ability to specify the location of the PHP_CodeSniffer application
- Ability to specify the location of the PHP Mess Detector application
- Ability to run the PHP Coding Standards Fixer tool which fixes most issues in your code when you want to follow the PHP coding standards as defined in the PSR-1 and PSR-2 documents
- Ability to run the PHP Code Beautifier tool which fixes most issues in your code when you want to follow PHP coding standards
Once you have right clicked on a file and selected “PHP CodeSniffer” > “Sniff this file…” you will get the output as shown below (depending on the settings you have defined):
Configuration
You can also define the configuration for the following settings, be it for a project, user settings or the default settings:
Plugin
- show_debug – Do you want the debug information to be sent to the console?
- extensions_to_execute – Which filetypes do you want the plugin to execute for?
- extensions_to_blacklist – Override the extensions_to_execute in case you have a sub extension such as twig.php etc.
- phpcs_execute_on_save – Do you want the code sniffer plugin to run on file save for php files?
- phpcs_show_errors_on_save – Do you want the errors to be displayed in quick_panel on save?
- phpcs_show_gutter_marks – Do you want the errors to be displayed in the gutter?
- phpcs_outline_for_errors – Do you want the errors to be highlighted in the editor?
- phpcs_show_errors_in_status – Do you want the errors to be displayed in status bar when clicking on the line with error?
- phpcs_show_quick_panel – Do you want the errors to be displayed in the quick panel?
- phpcs_php_prefix_path – Needed on windows for phar based applications. Also if you cannot make phar executable. Avoid if possible
- phpcs_commands_to_php_prefix – List of commands you want the php path to prefix. This would be useful, if you have some commands as a phar that cannot be run without the php prefix, and others using native command.
- phpcs_icon_scope_color — What colour to stylise the icon. This needs knowledge of theming of Sublime Test, as it uses scope colours from the theme to “tint” the dot icon. See here
PHP_CodeSniffer
- phpcs_sniffer_run – Do you want the PHPCS checker to run?
- phpcs_command_on_save – Do you want the command to execute on save?
- phpcs_executable_path – The path to the phpcs executable. If empty string, use PATH to find it
- phpcs_additional_args – This is the extra information you want to pass to the phpcs command. For example which “standard” you want to run, and if you want to show warnings or not
PHP CodeSniffer Fixer
- php_cs_fixer_on_save – Do you want to run the fixer on file save?
- php_cs_fixer_show_quick_panel – Do you want the quick panel to display on execution?
- php_cs_fixer_executable_path – The path to the php-cs-fixer application.
- php_cs_fixer_additional_args – This is the extra information you want to pass to the php-cs-fixer command. For example which “fixers” you want to run
PHP Code Beautifier
- phpcbf_on_save – Do you want to run the fixer on file save?
- phpcbf_show_quick_panel – Do you want the quick panel to display on execution?
- phpcbf_executable_path – The path to the phpcbf application.
- phpcbf_additional_args – This is the extra information you want to pass to the phpcbf command. For example which “standard” to use in order to fix the issues
PHP Linter
- phpcs_linter_run – Do you want the PHP linter to run?
- phpcs_linter_command_on_save – Do you want the command to execute on save?
- phpcs_php_path – The path to the PHP executable. If empty string, use PATH to find it
- phpcs_linter_regex – The regex for the PHP linter output
PHP Mess Detector
- phpmd_run – Do you want the PHPMD to run? Off by default
- phpmd_command_on_save – Do you want the command to execute on save?
- phpmd_executable_path – The path to the phpmd executable. If empty string, use PATH to find it
- phpmd_additional_args – This is the extra information you want to pass to the phpmd command. For example which “rulesets” you want to run
Scheck
- scheck_run — Do you want the scheck application to run? Off by default
- scheck_command_on_save — Do you want the command to execute on save?
- scheck_executable_path — The path to the scheck executable. If empty string, use PATH to find it
- scheck_additional_args — This is the extra information you want to pass to the scheck command.
Examples of the settings files can be found here
Project Based Settings
Your .project file should look something like this:
{
"folders": [{}],
"settings": {
"phpcs": {
"phpcs_additional_args": {
"--standard": "/path/to/.composer/vendor/drupal/coder/coder_sniffer/Drupal"
}
}
}
}
Of course this is a example to apply Drupal code sniffer. This could be anything. Whatever you can have on this package settings it can be overwritten under the settings -> phpcs
Changelog
To track the changes more frequently, you can review the Changelog here