10 CSS и JavaScript Linting Tools для оптимизации кода
Инструменты Linting могут значительно помочь разработчикам написать хорошее качество, оптимизированный код. Linting - это процесс проверки кода, который ищет ошибки в исходном коде и отмечает потенциальные ошибки. Большинство линтеров используют метод статического анализа кода, что означает код проверяется без фактического выполнения.
Вы можете работать в разных ситуациях, например, в режиме реального времени, когда пишете код, когда сохраняете файл, когда фиксируете изменения или перед тем, как код поступит в производство. Каким бы ни был ваш рабочий процесс, важно выпить на регулярной основе, как это может спасти вас от многих головных болей в будущем.
Линтеры не являются исключительно инструментами предотвращения ошибок, но их также можно эффективно использовать во время отладки. чтобы найти ошибки, которые трудно поймать иначе. В этом посте мы рассмотрим 10 мощных инструментов для линтинга, которые вы можете использовать для линтинга ваших файлов CSS и JavaScript, чтобы улучшить качество вашего кода..
1. CSSLint
По общему признанию, CSSLint намеревается «ранить ваши чувства», но взамен это «делает ваш код намного лучше». CSSLint в настоящее время лидирует на рынке CSS-линтинга. Он написан на JavaScript, имеет открытый исходный код и поставляется с множеством настраиваемых параметров..
CSSLint позволяет вам выбрать какие ошибки и предупреждения (совместимость, производительность, дублирование и т. д.) вы хотите проверить на, а также проверяет ваш синтаксис CSS на соответствие выбранным вами правилам.
Он не только работает в браузере, но также имеет интерфейс командной строки, и вы также можете интегрировать его в свою собственную систему сборки.
2. SublimeLinter CSSLint
CSSLint является настолько эффективным CSS-линтером, что трудно найти конкурента, который бы соответствовал этому. Вероятно, это причина, по которой фреймворк для линтинга SublimeLinter создал свой плагин для линтинга CSS поверх него. SublimeLinter это плагин SublimeText, который предоставляет пользователям средства для написания кода (CSS, PHP, Python, Java, Ruby и т. д.) прямо в редакторе SublimeText.р.
Перед установкой самого плагина SublimeLinter CSSLint необходимо установить CSSLint как модуль Node.js. Самое замечательное в этом удобном инструменте то, что вы нужно настроить параметры только один раз, или если вы довольны настройками по умолчанию, которые вам даже не нужны, то вы всегда можете получить соответствующие предупреждения и уведомления в редакторе SublimeText без каких-либо дополнительных хлопот.
3. StyleLint
StyleLint помогает разработчикам избежать ошибок в CSS, SCSS или любых других синтаксисах, которые может анализировать PostCSS. StyleLint тестирует более сотни правил, и вы можете выберите, какие из них вы хотите включить (см. пример конфигурации).
Если вы не хотите создавать свою собственную конфигурацию, вы также можете выбрать предварительно написанную стандартную конфигурацию, которая содержит около 60 правил StyleLint. StyleLint - довольно гибкий инструмент, его можно расширить за счет дополнительных плагинов и использовать в трех различных формах: в качестве инструмента командной строки, в качестве модуля Node.js или в качестве плагина PostCSS.
4. W3C CSS Validator
Несмотря на то, что CSS-валидатор W3C обычно не рассматривается как инструмент для слияния, он дает разработчикам прекрасную возможность проверить исходный код CSS на соответствие официальным стандартам W3C. W3C создал свои валидаторы с намерением предоставить инструмент, похожий на средство проверки программ Lint для языка C.
Сначала они создали валидатор HTML-разметки, за которым последовал CSS-валидатор. У валидатора CSS у W3C не так много опций, как у CSSLint, но возвращает подробные, легкие для понимания сообщения об ошибках и уведомления.
В качестве дополнительной функции вы также можете проверить свой код на соответствие последним стандартам W3C для мобильных веб-сайтов, что не является плохой вещью в эпоху мобильного Интернета..
5. Грязная разметка
Dirty Markup очищает, форматирует и проверяет ваш код HTML, CSS и JavaScript. Это может быть отличным выбором, если вы любите простой дизайн и хотите быстрое решение. Грязная разметка выдает сообщения об ошибках и уведомления в режиме реального времени пока ты написать или изменить свой код в редакторе.
Когда вы нажмете “чистый” кнопка, это сразу исправляет синтаксические ошибки, приводит в порядок формат, но оставляет предупреждения без изменений позволяя вам решать их так, как вы хотите. Вы не можете выбрать, какие правила вы хотите проверить, но все три типа файлов есть несколько настроек, которые позволяют вам выбрать формат очищенной продукции.
6. JSLint
JSLint был впервые выпущен в 2002 году Дугласом Крокфордом и с тех пор не терял оборотов, поэтому можно смело предполагать, что это стабильный и надежный инструмент для JavaScript-раскрашивания.
JSLint может обрабатывать исходный код JavaScript и текст JSON, и он поставляется с готовая конфигурация, соответствующая рекомендациям JS Крокфорд написал в своей книге под названием JavaScript: хорошие части.
JSLint имеет несколько вариантов, которые вы можете выбрать, но вы невозможно добавить свои собственные правила или отключить большинство функций. JSLint уже начал включать в себя последние стандарты ECMAScript 6, вы можете ознакомиться с текущим этапом реализации ES6 здесь.
7. JSHint
JSHint - это очень популярный форк JSLint, который используется крупными технологическими компаниями, такими как Facebook, Twitter и Medium.
JSHint - это проект, управляемый сообществом, который начался с создать более настраиваемую и менее самоуверенную версию JSLint. JSHint позволяет разработчикам настраивать любой из его параметров linting и помещать настроенную конфигурацию в отдельный файл, вариант, который позволяет легко использовать инструмент повторно, и подходит для больших проектов.
Вы можете не только использовать JSHint для компоновки ванильного JavaScript, но и иметь встроенную поддержку многих популярных библиотек JS, таких как jQuery, Mootools, Mocha и Node.js..
8. ESLint
ESLint - это последняя важная вещь в пейзаже JavaScript. Его популярность проистекает из его очень гибкого характера. Вы можете не только настраивать тонны его сложных правил линтинга и интегрировать его со всеми основными редакторами кода, но вы также можете легко расширить его функциональные возможности добавив различные плагины к нему.
Указав параметры парсера, вы также можете выберите, какой стандарт языка JS вы хотите поддерживать во время процесса linting, что означает, что вы можете не только проверять свои скрипты на соответствие синтаксису ECMAScript 5 по умолчанию, но также и на ECMAScript 6, ECMAScript 7 и JSX.
9. ЗАО
JSCS, или JavaScript Code Style - это подключаемый линтер стиля кода для JavaScript, который проверяет правила форматирования кода..
Целью АОС является предоставление средств для программно обеспечить соблюдение определенного руководства по стилю кодирования. Хотя JSCS не проверяет наличие ошибок и ошибок, он все еще используется многими крупными игроками в области технологий, такими как Google, AirBnB и AngularJS, поскольку он помогает разработчикам поддерживать хорошо читаемую и согласованную базу кода..
JSCS позволяет сэкономить время, так как автоматически исправляет ошибки форматирования, поэтому вам не нужно проходить их один за другим. Он имеет много различных пресетов, относящихся к более крупным проектам, таким как пресеты стиля кодирования Google, Grunt или Wikimedia, которые вы можете легко использовать в своих собственных проектах, но Вы также можете создать свою собственную конфигурацию.
10. Стандартные JS
StandardJS или JavaScript Standard Style, как и JSCS, - это стиль кода, но отличается от него простотой и прямолинейностью. StandardJS может быть отличным выбором, если вы не хотите тратить время на настройку, просто хочу эффективный инструмент, который работает из коробки.
StandardJS следует нескольким заранее написанным правилам форматирования, и его основная ценность состоит в том, чтобы ваш рабочий процесс кодирования не отвлекал внимание, поэтому вы не можете изменить правила, с которыми не согласны. Выбирайте StandardJS только в том случае, если вы не хотите иметь пользовательскую конфигурацию и хотите просто обеспечить согласованный стиль кода в файлах JavaScript.
