Настройка проверки синтаксиса «налету» HTML, CSS, JS, PHP в Sublime Text 3 на Windows 7

в 22:28, , рубрики: Песочница, метки: ,

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

ВНИМАНИЕ! Статья описывает настройку Sublime Text 3 (далее SB3) на Windows 7 x64 Professional.

Итак, поехали.

1. Представим что вы уже установили SB 3 на свой Win 7 и установили Package Control.

2. Теперь необходимо поставить дополнительные пакеты в SB3. Идем в 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 в переменную окружения PATH, настройки которой, находятся в Мой компьютер -> Свойства -> Дополнительные параметры системы -> Переменные среды… -> Переменная PACH -> Жмем «Изменить» добавляем путь.
ВНИМАНИЕ! Обратите внимание на точку с запятой ";" после каждого пути и не забудьте её прописать, а так же обратите внимание на обратный слеш.

4. Настройка проверки ошибок синтаксиса CSS
4.1. Скачиваем и устанавливаем node.js
4.2. Добавляем путь до папки (до папки!) с node.js в PACH (путь примерно следующий: 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. А весь гемор в Денвере! Черт его знает почему, но PHP денвера не воспринимается саблаймом, хоть убей. Он может выводить ошибки PHP в консоль SB3, но подсветки синтаксиса так и не будет.
6.3. Поэтому, сразу идем сюды и скачиваем PHP. Установка PHP — просто разархивируйте архив в любую папку и пропишите путь до этой папки в PACH (пункт 3.2.)
6.4. Если у вас был прописан в PACH путь до папки с 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. Чтобы его включить, жмем правой кнопкой мыши в любое место -> SublimeLinter -> Debug Mode

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js