Sublime text 3 валидатор html

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

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

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

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

• Установите 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-project . Структура его примерно следующая:

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

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

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

Источник

Установка проверки кода (линтера) для Sublime Text 3

Admin 21.08.2017 , обновлено: 08.08.2020 JavaScript Errors, PHP Errors, Software

Текстовой редактор Sublime Text 3 позволяет проверять программистам и верстальщикам код на наличие ошибок в css, JavaScript, php и т.д. Если вы где-то ошиблись, то на соответствующей строчке высветится ошибка.

Программы для проверки ошибок называются линтерами.

Установка SublimeLinter

Для того, чтобы была возможность проверки кода надо установить из Package Control пакет SublimeLinter.

После установки SublimeLinter появится возможность устанавливать отдельные компоненты, которые и позволят задействовать эти инструменты.

Установка SublimeLinter-jshint

SublimeLinter-jshint — позволяет увидеть ошибки в коде на JavaScript.

Краткая инструкция

1. Перед установкой компонентов на компьютере должен быть установлен Node.js.

2. Открываем Терминал. Пишем команду:

3. В Sublime Text 3 открываем установку пакетов и пишем SublimeLinter-jshint. Нажимаем на него, пакет установлен. Теперь если возникнет ошибка в JavaScript коде, вы сразу об этом узнаете.

Установка SublimeLinter-csslint

SublimeLinter-csslint — показывает ошибки в CSS коде.

Краткая инструкция

1. Точно также должен быть установлен Node.

2. В Терминале запускаем команду:

3. В Sublime Text 3 устанавливаем пакет SublimeLinter-csslint.

Как видно на картинке выше показываются не только ошибки, но и рекомендации. Например, SublimeLinter-у не нравится, что используется описание стиля для идентификатора, а не для стиля.

Установка SublimeLinter-php

Пакет для проверки ошибок в PHP коде.

Краткая инструкция

1. На компьютере должен быть установлен PHP. Возможно он уже установлен у вас, например, вместе с MAMP PRO. Если не установлен, по ссылке выше, есть ссылка на дистрибутивы.

2. В Sublime Text 3 устанавливаем пакет SublimeLinter-php.

Если ничего не заработало

После установки перезапустите программу Sublime Text 3.

Читайте также

У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.

Комментарии к статье “ Установка проверки кода (линтера) для Sublime Text 3 ” (2)

Приветствую!
Такой вопрос — как настроить для JSHint «понимание» синтаксиса ? Вот что он подметил:

Добавить комментарий Отменить ответ

Если возникнут вопросы пишите на электронную почту.

Источник

W3​CValidators

W3C markup validator package for the Sublime Text 2 text editor.

Details

• Version 0.5.0
• Homepage github.​com
• Issues github.​com
• Modified 6 years ago
• Last Seen 35 minutes ago
• First Seen 10 years ago

Installs

Jul 27	Jul 26	Jul 25	Jul 24	Jul 23	Jul 22	Jul 21	Jul 20	Jul 19	Jul 18	Jul 17	Jul 16	Jul 15	Jul 14	Jul 13	Jul 12	Jul 11	Jul 10	Jul 9	Jul 8	Jul 7	Jul 6	Jul 5	Jul 4	Jul 3	Jul 2	Jul 1	Jun 30	Jun 29	Jun 28	Jun 27	Jun 26	Jun 25	Jun 24	Jun 23	Jun 22	Jun 21	Jun 20	Jun 19	Jun 18	Jun 17	Jun 16	Jun 15	Jun 14	Jun 13	Jun 12
Windows	1	4	2	1	0	0	2	0	1	3	2	0	0	0	0	1	1	5	0	0	1	5	1	2	3	1	2	1	2	2	4	1	0	1	2	1	2	3	2	0	0	1	4	0	19	5
Mac	0	1	0	1	0	1	2	0	0	0	0	0	0	0	1	1	0	0	0	0	0	0	0	0	0	0	0	0	3	0	0	0	0	0	0	0	0	1	1	0	0	1	0	2	1	0
Linux	0	0	1	1	1	0	0	0	1	0	1	0	0	0	0	0	0	0	0	0	1	0	1	0	0	0	0	1	0	0	1	0	0	0	0	0	0	0	2	0	0	0	0	0	0	0

Readme

Sublime-W3CValidators

About

This is a simplified markup validator package for the Sublime Text editor that uses the W3C validator web service located at http://validator.w3.org.

Unlike similar packages, curl is not required!

Installation

• Ctrl+Shift+P or Cmd+Shift+P in Linux / Windows / OS X
• Type install , select Package Control: Install Package
• Select W3CValidators

Usage

Open an HTML or SVG file, and from the Tools menu go to W3C Validators, and then select the type of document you’re validating. The results will be displayed in a new buffer.

Design Decisions

Automatic detection of document types has proven unreliable, therefore only explicit document type validation is supported. Not all document types are supported, because most of them should be deprecated in practice.

Источник

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

Всем привет. У 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:\Users\User_name\AppData\Roaming\npm )! Незабываем про точку с запятой.
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

Источник