ESLint: Next-Generation JavaScript ЛИНТЕР

Это было летом 2013 года, и я работал над проектом для моего работодателя, Box.

Я только что закончил проводки до JSDoc 1 как ночной сборки, используя плагин для обнаружения T3 2 узоры в нашем коде и документировать их автоматически.Мне пришло в голову, что эти модели могут быть легко ошибиться, и я начал искать для автоматического обнаружения неправильный patterns.Я сразу же обратился к JSHint 3 потому что мы уже использовали его, и я думал, что это может Поддержка plugins.К сожалению, он не мог .

Тем не менее, я не мог получить представление о СУБД ЛИНТЕР с подключаемыми правил во время выполнения из моей головы.Я только что провел кучу времени на изучение о Esprima __29 | 4 | __8 и абстрактных синтаксических деревьев (Asts), и я подумал: “Это не может быть все, что трудно создать подключаемый JavaScriptЛИНТЕР с использованием AST “Именно из этих первоначальных мыслей, которые . ESLint 5 родился .

Примечание: “ES” в “ESLint” означает “ECMAScript”, название для ядра языка JavaScript.Этот термин стал более популярным благодаря ECMAScript 6 .

ESlint 6
Знакомства ESLint 34 7 , инструмент, который позволяет автоматически обнаруживать неправильные модели в JavaScript .

Наследие Проблемы Link

Я сделал несколько небольших взносов в JSHint на протяжении многих лет, и также совместно создали CSS Lint __70 | | 8__4 , так что мне пришлось приличное количество опыта как письма и модифицирующих пуха.Были некоторые вещи, о JSHint, которые беспокоили меня, и мы пытались решить их в CSS Lint.Тем не менее, я чувствовал, что CSS Lint не было нигде рядом, где я хочу современный ЛИНТЕР быть.Через JSHint и CSS Lint, я видел некоторые проблемы и решили, что, если бы ясоздать новую СУБД ЛИНТЕР, то она должна решить, как многие из этих проблем, как возможной .

Много проблем являются артефакты наследия: это просто способ, которым вещи всегда было сделано.JSHint, в частности, страдает от некоторых наследия JSLint (из которого он был раздвоенным).Но так как я был, начиная с нуля, я имел возможность посмотреть на эти проблемы с глазами и свежими без ограничений по всему пути их решения.Проблемы, которые я был наиболее заинтересован в решении были:

  1. Одноместный runtime
    Как JSHint и CSS Lint работать в обоих Rhino и Node.js;то, что я изначально видел как преимущество в прошлом быстро стал значительным стоимость.Количество времени тратилось на абстрагироваться от лежащего в основе JavaScript двигателя, а также сохранении совместимости между двигателями, является огромным источником боли и отверстие, в которое исчезнет много часов на регулярной основе.Не только получал выполнения работает правильно в обоих двигателей сложных, это было также трудно получить тесты для запуска в обеих системах .
  2. Отключение Rules
    Одним из аспектов JSHint, что всегда беспокоило меня было, как у вас, чтобы выяснить, какие правила были выключены и по умолчанию.В то время как вы можете их отключить, правила есть странные имена, а некоторые из них не имеют имен вообще, только коды (W030, например).Это было проблемой, мы обратились в CSS Lint путем очевидным, которые были включены правила и давая правила человеческого читаемые имена .
  3. Documentation
    JSHint всегда была довольно редкая, когда дело доходит до документации.JSLint почти не документацию, поэтому документация JSHint было улучшение.Тем не менее, выяснить, что W030 имел в виду на самом деле трудно.Мы пошли дальше с
    правила CSS Lint documentation __20 | | 9__19 , и люди, казалось, оценить дополнительные примеры.Я чувствовал сильно, что это было направление любой новый ЛИНТЕР придется идти .
  4. Настройка Rules
    Еще один вопрос у меня с JSHint было, как некоторые правила были быть установлены в true включить, в то время как другие должны были быть установлены в false включить.Это на самом деле не виноват JSHint, поскольку, что странное поведение было унаследовано от своего предшественника, JSLint.Тем не менее, даже после нескольких лет использования JSHint, я всегда был искать какие правила нужно быть сконфигурирован в каком пути .
  5. Ошибка Правило Levels
    JSHint, как JSLint перед ним, заставляет все правила, чтобы иметь ту же степень тяжести: ошибка.По моему опыту, вы часто хотят, чтобы поэтапно использование определенных правил, что позволяет им быть установлен как предупреждение, что не нарушают сборку и потом строго соблюдения их.CSS Lint позволяли вам настраивать предупреждения и ошибки отдельно, и что в конечном итоге работает очень хорошо, поэтому я хотел ESLint иметь те же возможности .
  6. Напишите ваш собственный Rules
    я увидел как JSHint и CSS Lint борьбу сПроблема не в состоянии идти в ногу со спросом на правилах.Были бесконечные дебаты о том было достаточно, чтобы быть включены вообще правило, и если его не было, то пользователь застрял.Я не хочу быть ESLint единственным источником правил.Я не хочу, чтобы эти же дебаты, и единственный способ, что бы произошло, если бы все было бы написать свои собственные правила.Так что я решил, что ESLint должен быть не только инструмент, он должен быть в центре экосистемы, что позволило другим разработчикам расширять его легко .

Что все это в виду, и с помощью более чем 200 участников в последние два года, ESLint стал твердый, гибкий JavaScript ЛИНТЕР Я всегда надеялся, что может быть .

Начало работы Link

Самая трудная часть о включении нового СУБД ЛИНТЕР в проекте получать его настроить впервые.От установки до исходной конфигурации, это может занять значительное количество времени, просто чтобы получить эти первые результаты пылеобразования, чтобы показать и быть полезным.С ESLint, команда упорно трудились, чтобы сделать получение начал как можно быстрее .

Вы можете установить ESLint от npm __13 | | 10__6 введя:

$ npm install -g eslint

Это устанавливает ESLint в глобальном масштабе, который является полезным для демонстрационных целей.Многие проекты установки ESLint локально (просто удалить -g), так что он может взаимодействовать с их процесс сборки .

Большинство пух требуют, чтобы вручную пройти и настроить параметры конфигурации перед пыление впервые.Это может включать копаться документации, чтобы попытаться выяснить, какие правила вы хотите применить.В то время как вы можете сделать это в конце концов, ESLint может направить вас по основам создания начальной настройки.Переключение в каталог с файлами, которые вы хотите, чтобы нити и типа:

$ eslint --init

Вам будет предложено ответить на несколько вопросов о стиле JavaScript вы пишете, что позволяет ESLint создать соответствующий файл конфигурации, чтобы начать .

$ eslint --init
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Double
? What line endings do you use? Unix
? Do you require semicolons? Yes
? Are you using ECMAScript 6 features? No
? Where will your code run? Browser
? Do you use JSX? No
? What format do you want your config file to be in? css
Successfully created .eslintrc file in c:\Users\Nicholas\projects\personal\tmp

Обратите внимание, что вы спросили, если вы используете ECMAScript 6 и JSX;из коробки, ESLint поддерживает через язык options __27 | | 11__6 .На самом деле, ESLint был первым ЛИНТЕР полностью поддерживает ECMAScript 6 и JSX, который сделал его довольно популярным среди тех, кто использует React 12 и webpack 13 .

Команда eslint --init Процесс устанавливает файл конфигурации, ESLint | .eslintrc__46, в текущем каталоге.ESLint использует этот файл, чтобы определить,какие правила применять при оценке вашего кода.Файлы конфигурации могут быть в формате JSON или CSS, и мы находим большинство пользователей предпочитают CSS .

После этого, вы можете начать пыление файлы, передавая в одном или нескольких файлов или каталогов:

$ eslint test.js src/

Файлы конфигурации Link

Конфигурация files 14 то, что делает ESLint настолько гибким.Внутри вашего | .eslintrc__15 файл, вы можете указать несколько параметров, в том числе:

  • Правила вы хотите работать на files
  • Глобальные переменные, которые должны присутствовать в files
  • Среды, в которых файлы run
  • База конфигурацию inherit
  • Плагины для load
  • Альтернативные анализаторы для use

Чтобы лучше понять конфигурационные файлы, полезно взглянуть на пример.Вот пример файла генерируется из eslint --init:

rules:
  indent:
    - 2
    - tab
  quotes:
    - 1
    - double
  linebreak-style:
    - 2
    - unix
  semi:
    - 2
    - always
env:
  browser: true
extends: 'eslint:recommended'

Первый раздел в этом файле rules, который определяет правило settings __36 | | 15__5 .Имена indent, quotes, linebreak-style 26 и ~ | все соответствуют ESLint правила.Каждое правило настроен с массивом, первый элемент которого является тяжесть правило.Тяжесть правило одно из трех значений:

  • 0: отключить правило completely
  • 1: включить правило в warning
  • 2: включить правило в качестве error

Разница между предупреждений и ошибок, что предупреждения не повлияет на код выхода ESLint.Например, если у вас есть десять предупреждения и без ошибок, код завершения еще 0. Правила настроенные как ошибки будут вызывать код выхода будет 1, если эта ошибка присутствует.Таким образом, вы можете включить новые правила, не блокируя процесс сборки, установив их в качестве предупреждения.Вы можете изменить правила, чтобы быть ошибки позже, когда you’ повторно готовый .

Каждое правило может также иметь несколько вариантов, связанных с ним.В предыдущем примере, indent правило имеет tab указано в качестве опции.Это говорит правило, что эти файлы должны использовать вкладки для отступов вместо пробелов.Другие правила имеют свои собственные варианты, и варианты каждого правила будут прописаны по собственной Документация | page__5 __54 | | 16__5 .

Вы можете указать environments __62 | | 17__5 использованием env ключ.Среды обеспечить предопределенные глобальн …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.