Как исправить ошибки eslint

Fixing problems

--fix

Эта опция инструктирует ESLint попытаться исправить как можно больше проблем.Исправления делаются в самих файлах,и выводятся только оставшиеся неисправленные проблемы.Не все проблемы можно исправить с помощью этой опции,и эта опция не работает в таких ситуациях:

1. Эта опция вызывает ошибку,когда код передается в ESLint.
2. Эта опция не влияет на код,использующий процессор,если только процессор не разрешает автоисправление.

Если вы хотите исправить код из стандартного stdin или иным образом хотите получить исправления, не записывая их в файл, используйте параметр --fix-dry-run .

--fix-dry-run

Этот параметр имеет тот же эффект, что и --fix , с одним отличием: исправления не сохраняются в файловой системе. Это позволяет исправить код из stdin (при использовании с флагом --stdin ).

Поскольку форматер по умолчанию не выводит фиксированный код, вам придется использовать другой (например , json ), чтобы получить исправления. Вот пример этого шаблона:

getSomeText | npx eslint 

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

--fix-type

Этот параметр позволяет указать тип исправлений, которые следует применять при использовании --fix или --fix-dry-run . Есть четыре типа исправлений:

1. problem — исправить возможные ошибки в коде
2. suggestion — применить исправления к коду, которые улучшают его
3. layout — применить исправления, не меняющие структуру программы (AST)
4. directive — применить исправления к встроенным директивам, таким как // eslint-disable

В командной строке можно указать один или несколько типов исправлений.Приведем несколько примеров:

npx eslint --fix --fix-type suggestion .npx eslint --fix --fix-type suggestion --fix-type problem .npx eslint --fix --fix-type suggestion,layout .

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

Ignoring files

--ignore-path

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

Example:

npx eslint --ignore-path tmp/.eslintignore file.jsnpx eslint --ignore-path .gitignore file.js

--no-ignore

Отключает исключение файлов из .eslintignore , --ignore-path , --ignore-pattern и ignorePatterns в файлах конфигурации.

Example:

npx eslint --no-ignore file.js

--ignore-pattern

Этот параметр позволяет указать шаблоны файлов, которые следует игнорировать (в дополнение к файлам в .eslintignore ). Вы можете повторить опцию, чтобы предоставить несколько шаблонов. Поддерживаемый синтаксис такой же, как и для файлов .eslintignore , которые используют те же шаблоны, что и спецификация .gitignore . Вы должны цитировать свои шаблоны, чтобы избежать интерпретации шаблонов глобусов оболочкой. .gitignore

Example:

npx eslint --ignore-pattern '/lib/' --ignore-pattern '/src/vendor/*' .

Using stdin

--stdin

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

Example:

cat myfile.js | npx eslint --stdin

--stdin-filename

Эта опция позволяет указать имя файла для обработки STDIN как.Это полезно при обработке файлов из STDIN,и у вас есть правила,которые зависят от имени файла.

Example

cat myfile.js | npx eslint --stdin --stdin-filename=myfile.js

Handling warnings

--quiet

Эта опция позволяет отключить отправку отчетов по предупреждениям.Если вы включите эту опцию,то ESLint будет сообщать только об ошибках.

Example:

npx eslint --quiet file.js

--max-warnings

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

Обычно, если ESLint запускается и не находит ошибок (только предупреждения), он завершается с успешным статусом выхода. Однако, если --max-warnings и общее количество предупреждений превышает указанный порог, ESLint выйдет со статусом ошибки. Указание порога -1 или пропуск этой опции предотвратит такое поведение.

Example:

npx eslint --max-warnings 10 file.js

Output

-o, --output-file

Включите запись отчета в файл.

Example:

npx eslint -o ./test/test.html

При указании данный формат выводится в указанное имя файла.

-f, --format

Эта опция задает выходной формат консоли.Возможные форматы:

• checkstyle
• compact
• html
• jslint-xml
• json
• junit
• стильный (по умолчанию)
• tap
• unix
• visualstudio

Example:

npx eslint -f compact file.js

Вы также можете использовать пользовательскую батарею из командной строки,указав путь к файлу пользовательской батареи.

Example:

npx eslint -f ./customformat.js file.js

Установленный npm форматтер разрешается с eslint-formatter- или без него .

Example:

npm install eslint-formatter-prettynpx eslint -f pretty file.js

При указании заданного формата выводятся данные в консоль.Если вы хотите сохранить этот вывод в файл,вы можете сделать это в командной строке следующим образом:

npx eslint -f compact file.js > results.txt

Результат будет сохранен в файле results.txt .

--color, --no-color

Эта опция принудительно включает / выключает цветной вывод. Вы можете использовать это, чтобы переопределить поведение по умолчанию, которое состоит в том, чтобы включить цветной вывод, если не обнаружен TTY, например, при eslint через cat или less .

Examples:

npx eslint 

--no-inline-config

Этот параметр предотвращает любые действия встроенных комментариев, таких как /*eslint-disable*/ или /*global foo*/ . Это позволяет вам установить конфигурацию ESLint без изменения файлов. Все встроенные комментарии к конфигурации игнорируются, например:

• /*eslint-disable*/
• /*eslint-enable*/
• /*global*/
• /*eslint*/
• /*eslint-env*/
• // eslint-disable-line
• // eslint-disable-next-line

Example:

npx eslint --no-inline-config file.js

--report-unused-disable-directives

Эта опция заставляет ESLint сообщать о комментариях директивы, таких как // eslint-disable-line если в этой строке в любом случае не было бы сообщений об ошибках. Это может быть полезно для предотвращения непредвиденного подавления будущих ошибок путем очистки старых комментариев eslint-disable , которые больше не применимы.

Предупреждение : при использовании этой опции возможно, что новые ошибки начнут сообщаться при обновлении ESLint или пользовательских правил. Например, предположим, что в правиле есть ошибка, из-за которой оно сообщает о ложном срабатывании, и eslint-disable комментарий eslint-disable для подавления неверного отчета. Если ошибка затем будет исправлена ​​в выпуске патча ESLint, комментарий eslint-disable перестанет использоваться, поскольку ESLint больше не генерирует неверный отчет. Это приведет к новому сообщению об ошибке для неиспользуемой директивы, если report-unused-disable-directives опция report-unused-disable-directives .

Example:

npx eslint --report-unused-disable-directives file.js

Caching

--cache

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

Примечание. Если вы запустите ESLint с --cache , а затем запустите ESLint без --cache , файл .eslintcache будет удален. Это необходимо, поскольку результаты lint могут измениться и сделать .eslintcache недействительным. Если вы хотите контролировать, когда файл кеша удаляется, используйте --cache-location , чтобы указать альтернативное расположение для файла кеша.

Примечание. Файлы с автофиксацией не помещаются в кеш. Последующий линтинг, который не запускает автоисправление, поместит его в кеш.

--cache-file

Путь к файлу кеша. Если не указан .eslintcache будет использоваться. Файл будет создан в каталоге, где eslint команда eslint . Не рекомендуется : используйте вместо этого --cache-location .

--cache-location

Путь к расположению кеша. Может быть файлом или каталогом. Если местоположение не указано, будет использоваться .eslintcache . В этом случае файл будет создан в каталоге, в котором eslint команда eslint .

Если указан каталог, в указанной папке будет создан файл кеша. Имя файла будет основано на хеш-коде текущего рабочего каталога (CWD). например: .cache_hashOfCWD

Важное примечание: если каталог для кеша не существует, убедитесь, что вы добавили конечный / on * nix systems или in windows. В противном случае путь будет считаться файлом.

Example:

npx eslint "src*.js" --cache --cache-location "/Users/user/.eslintcache/"

--cache-strategy

Стратегия использования кеша для обнаружения измененных файлов. Могут быть либо metadata либо content . Если стратегия не указана, будут использоваться metadata .

content стратегия может быть полезна в тех случаях , когда время модификации файлов изменится , даже если их содержание нет. Например, это может произойти во время операций git, таких как git clone, потому что git не отслеживает время изменения файла.

Example:

npx eslint "src*.js" --cache --cache-strategy content

Miscellaneous

--init

Эта опция запустит npm init @eslint/config , чтобы запустить мастер инициализации конфигурации. Он разработан, чтобы помочь новым пользователям быстро создать файл .eslintrc, ответив на несколько вопросов, выбрав популярное руководство по стилю.

Полученный конфигурационный файл будет создан в текущем каталоге.

--env-info

Эта опция выводит информацию о среде исполнения,включая версию Node,npm,а также локальные и глобальные установки ESLint.Команда ESLint может запросить эту информацию,чтобы помочь в решении ошибок.

--no-error-on-unmatched-pattern

Эта опция предотвращает ошибки, когда шаблон глобуса в кавычках или --ext не имеет соответствия. Это не предотвратит ошибки, когда ваша оболочка не может сопоставить глобус.

--exit-on-fatal-error

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

--debug

Эта опция выводит отладочную информацию на консоль. Эта информация полезна, когда вы видите проблему и вам трудно ее точно определить. Команда ESLint может запросить эту отладочную информацию, чтобы помочь устранить ошибки. Добавьте этот флаг в вызов командной строки ESLint, чтобы получить дополнительную отладочную информацию при выполнении команды (например npx eslint --debug test.js и npx eslint test.js --debug эквивалентны)

-h, --help

Эта опция выводит меню помощи,отображая все доступные опции.Все остальные опции при их наличии игнорируются.

-v, --version

Эта опция выводит текущую версию ESLint на консоль.Все остальные опции при их наличии игнорируются.

--print-config

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

Example:

npx eslint --print-config file.js

Игнорирование файлов из подшивки

ESLint поддерживает файлы .eslintignore для исключения файлов из процесса линтинга, когда ESLint работает с каталогом. Файлы, указанные как отдельные аргументы CLI, не будут исключены. Файл .eslintignore представляет собой обычный текстовый файл, содержащий по одному шаблону в строке. Он может находиться в любом из предков целевого каталога; это повлияет на файлы в содержащем его каталоге, а также на все подкаталоги. Вот простой пример файла .eslintignore :

temp.js**/vendor/*.js

Более подробную разбивку поддерживаемых шаблонов и каталогов, которые ESLint игнорирует по умолчанию, можно найти в Ignoring Code .

Exit codes

При перетаскивании файлов ESLint выходит с одним из следующих кодов выхода:

• 0 : Линтинг прошел успешно, ошибок линтинга нет. Если флаг --max-warnings установлен в n , количество предупреждений о линтинге не превышает n .
• 1 : Линтинг прошел успешно, и есть хотя бы одна ошибка линтинга, или имеется больше предупреждений линтинга, чем разрешено параметром --max-warnings .
• 2 : Линтинг не удался из-за проблемы конфигурации или внутренней ошибки.

---

© OpenJS Foundation and other contributors
Licensed under the MIT License.
https://eslint.org/docs/latest/user-guide/command-line-interface

---

ESLint

8.30

• yoda

  Требовать или запрещать условия «Йода» Некоторые проблемы, о которых сообщает это правило, автоматически устраняются с помощью параметра командной строки. Условия Йоды названы так.

• Интерфейс командной строки

  Для установки ESLint требуется Node.js.

• Configuration Files

  ESLint поддерживает конфигурационные файлы нескольких форматов:Если в одном каталоге находится несколько конфигурационных файлов,ESLint будет использовать только один.

• Использование конфигурации из плагина

  Плагин — это пакет npm, который может добавлять различные расширения в ESLint.

ESLint — это инструмент, помогающий анализировать написанный на JavaScript код, находить синтаксические ошибки и автоматически их исправлять, писать аккуратный код в едином стиле по определённым правилам.

ESLint в терминале

Если у вас пока нет ESLint, его нужно установить из npm.

Давайте испытаем ESLint в действии. Попробуем написать простую функцию для вывода суммы двух чисел и с помощью ESLint проверить правильность написанного кода. Для это в терминале выполним команду

npm run lint

ESLint показывает, что нашёл 6 ошибок в файле main.js. Цифры слева говорят на какой строке, на каком символе, была найдена ошибка. Дальше в строке идёт описание ошибки. Например:

Текст 5 errors and 0 warnings potentially fixable with the —fix option после списка ошибок говорит о том, что пять из шести найденных ошибок ESLint сможет исправить автоматически.

Обратите внимание, что требования, по которым ESLint проверяет код, на каждом проекте могут быть свои, всё зависит от правил, принятых в команде. Например, в команде может быть принято использование двойных кавычек, в таком случае ESLint не будет ругаться на двойные кавычки, а вот при использовании одинарных возникнет ошибка. Такие правила описываются в специальном файле .eslintrc.

Исправление ошибок

Для исправления ошибок у ESLint есть опция fix. Чтобы воспользоваться этой опцией, выполним в терминале команду

npm run lint -- --fix

Ключ --fix говорит о том, что мы хотим исправить ошибки автоматически, а два подчёркивания -- перед ключом помогают понять терминалу, что ключ относится не к команде npm run lint , а к тому, что за ней скрывается — к eslint.

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

ESLint в редакторе

А что, если нам хочется сразу, в момент написания кода, знать, какие ошибки мы совершаем, и исправлять их на лету? Для этого в редактор можно установить расширение для ESLint, которое будет подсвечивать найденную ошибку прямо в файле, а при наведении подсказывать, в чём именно ошибка.

Установка расширения для ESLint в VS Code

Расширение для ESLint в VS Code может попросить подтвердить его запуск, если пакет eslint установлен локально (наш случай). Когда расширение спросит, откуда брать пакет eslint, нужно нажать «Allow», чтобы разрешить использовать eslint в текущем проекте.

С помощью расширения для ESLint в редакторе можно автоматически исправить ошибки. Для этого нужно навести на подсвеченную ошибку, нажать кнопку Quick fix во всплывающем окошке и выбрать один из предложенных вариантов. Например, можно исправить только конкретную ошибку, а можно и все доступные разом. Если ошибка не может быть автоматически исправлена, вместо кнопки Quick fix появится текст No quick fixes available или будут предложены альтернативные варианты решения.

Установка расширения для ESLint в Atom

В Atom тоже требуется специальное расширение linter-eslint для работы ESLint. Чтобы в Atom установить расширение, нужно перейти в раздел настроек «Install Packages». Открыть его можно из окна команд (сочетание клавиш Ctrl + Shift + P на Windows и Command + Shift + P на macOS), введя в поиске «Install Packages».

Также нужный раздел настроек можно открыть через меню: Edit → Preferences → Install — на Windows, Atom → Preferences → Install — в macOS.

Далее ищем нужное расширение и устанавливаем его:

После установки расширения может появиться всплывающее окно с предложением установить нужные зависимости, то есть другие расширения, с помощью которых работает linter-eslint. Для правильной работы линтера нужно установить все предложенные зависимости.

Теперь можно приступить к исправлению ошибок, исправить большинство ошибок можно автоматически, наведя на ошибку и нажав «Fix» или снова использовать окно команд, где выполнить Linter Eslint: Fix File.

Включение поддержки ESLint в WebStorm

В WebStorm не нужно устанавливать отдельное расширение, ESLint работает в этом редакторе «из коробки», достаточно только включить поддержку ESLint. Откройте окно Preferences с настройками, перейдите на вкладку ESLint (Languages and Frameworks → JavaScript → Code Quality Tools → ESLint) и выберете автоматическую конфигурацию ESLint — Automatic ESLint configuration. При автоматической конфигурации ESLint всегда будет искать в директории проекта файл .eslintrc с правилами оформления кода и ориентироваться на него.

Исправляются ошибки так же просто, достаточно нажать правой кнопкой мыши в файле с ошибками и выбрать из списка «Fix ESLint problems».

Дополнительные материалы:

• 34 инструмента для веб-разработчика на каждый день
• Обзор Chrome DevTools. Решаем основные задачи разработчика
• HTML-шаблонизаторы
• Как проверить валидность HTML-разметки

---

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

The ESLint Command Line Interface (CLI) lets you execute linting from the terminal. The CLI has a variety of options that you can pass to configure ESLint.

Run the CLI

ESLint requires Node.js for installation. Follow the instructions in the Getting Started Guide to install ESLint.

Most users use npx to run ESLint on the command line like this:

npx eslint [options] [file|dir|glob]*

Such as:

# Run on two files
npx eslint file1.js file2.js

# Run on multiple files
npx eslint lib/**

Please note that when passing a glob as a parameter, it is expanded by your shell. The results of the expansion can vary depending on your shell, and its configuration. If you want to use node glob syntax, you have to quote your parameter (using double quotes if you need it to run in Windows), as follows:

npx eslint "lib/**"

Note: You can also use alternative package managers such as Yarn or pnpm to run ESLint. Please refer to your package manager’s documentation for the correct syntax.

Pass Multiple Values to an Option

Options that accept multiple values can be specified by repeating the option or with a comma-delimited list (other than --ignore-pattern, which does not allow the second style).

Examples of options that accept multiple values:

npx eslint --ext .jsx --ext .js lib/
# OR
npx eslint --ext .jsx,.js lib/

Options

You can view all the CLI options by running npx eslint -h.

eslint [options] file.js [file.js] [dir]

Basic configuration:
  --no-eslintrc                   Disable use of configuration from .eslintrc.*
  -c, --config path::String       Use this configuration, overriding .eslintrc.* config options if present
  --env [String]                  Specify environments
  --ext [String]                  Specify JavaScript file extensions
  --global [String]               Define global variables
  --parser String                 Specify the parser to be used
  --parser-options Object         Specify parser options
  --resolve-plugins-relative-to path::String  A folder where plugins should be resolved from, CWD by default

Specify rules and plugins:
  --plugin [String]               Specify plugins
  --rule Object                   Specify rules
  --rulesdir [path::String]       Load additional rules from this directory. Deprecated: Use rules from plugins

Fix problems:
  --fix                           Automatically fix problems
  --fix-dry-run                   Automatically fix problems without saving the changes to the file system
  --fix-type Array                Specify the types of fixes to apply (directive, problem, suggestion, layout)

Ignore files:
  --ignore-path path::String      Specify path of ignore file
  --no-ignore                     Disable use of ignore files and patterns
  --ignore-pattern [String]       Pattern of files to ignore (in addition to those in .eslintignore)

Use stdin:
  --stdin                         Lint code provided on <STDIN> - default: false
  --stdin-filename String         Specify filename to process STDIN as

Handle warnings:
  --quiet                         Report errors only - default: false
  --max-warnings Int              Number of warnings to trigger nonzero exit code - default: -1

Output:
  -o, --output-file path::String  Specify file to write report to
  -f, --format String             Use a specific output format - default: stylish
  --color, --no-color             Force enabling/disabling of color

Inline configuration comments:
  --no-inline-config              Prevent comments from changing config or rules
  --report-unused-disable-directives  Adds reported errors for unused eslint-disable directives

Caching:
  --cache                         Only check changed files - default: false
  --cache-file path::String       Path to the cache file. Deprecated: use --cache-location - default: .eslintcache
  --cache-location path::String   Path to the cache file or directory
  --cache-strategy String         Strategy to use for detecting changed files in the cache - either: metadata or content - default: metadata

Miscellaneous:
  --init                          Run config initialization wizard - default: false
  --env-info                      Output execution environment information - default: false
  --no-error-on-unmatched-pattern  Prevent errors when pattern is unmatched
  --exit-on-fatal-error           Exit with exit code 2 in case of fatal error - default: false
  --debug                         Output debugging information
  -h, --help                      Show help
  -v, --version                   Output the version number
  --print-config path::String     Print the configuration for the given file

Basic Configuration

--no-eslintrc

Disables use of configuration from .eslintrc.* and package.json files.

• Argument Type: No argument.

--no-eslintrc example

npx eslint --no-eslintrc file.js

-c, --config

This option allows you to specify an additional configuration file for ESLint (see Configure ESLint for more).

• Argument Type: String. Path to file.
• Multiple Arguments: No

-c, --config example

npx eslint -c ~/my-eslint.json file.js

This example uses the configuration file at ~/my-eslint.json.

If .eslintrc.* and/or package.json files are also used for configuration (i.e., --no-eslintrc was not specified), the configurations are merged. Options from this configuration file have precedence over the options from .eslintrc.* and package.json files.

--env

This option enables specific environments.

• Argument Type: String. One of the available environments.
• Multiple Arguments: Yes

Details about the global variables defined by each environment are available in the Specifying Environments documentation. This option only enables environments. It does not disable environments set in other configuration files. To specify multiple environments, separate them using commas, or use the option multiple times.

--env example

npx eslint --env browser,node file.js
npx eslint --env browser --env node file.js

--ext

This option allows you to specify which file extensions ESLint uses when searching for target files in the directories you specify.

• Argument Type: String. File extension.
• Multiple Arguments: Yes
• Default Value: .js and the files that match the overrides entries of your configuration.

--ext is only used when the patterns to lint are directories. If you use glob patterns or file names, then --ext is ignored. For example, npx eslint "lib/*" --ext .js matches all files within the lib/ directory, regardless of extension.

--ext example

# Use only .ts extension
npx eslint . --ext .ts

# Use both .js and .ts
npx eslint . --ext .js --ext .ts

# Also use both .js and .ts
npx eslint . --ext .js,.ts

--global

This option defines global variables so that they are not flagged as undefined by the no-undef rule.

• Argument Type: String. Name of the global variable. Any specified global variables are assumed to be read-only by default, but appending :true to a variable’s name ensures that no-undef also allows writes.
• Multiple Arguments: Yes

--global example

npx eslint --global require,exports:true file.js
npx eslint --global require --global exports:true

--parser

This option allows you to specify a parser to be used by ESLint.

• Argument Type: String. Parser to be used by ESLint.
• Multiple Arguments: No
• Default Value: espree

--parser example

# Use TypeScript ESLint parser
npx eslint --parser @typescript-eslint/parser file.ts

--parser-options

This option allows you to specify parser options to be used by ESLint. The available parser options are determined by the parser being used.

• Argument Type: Key/value pair separated by colon (:).
• Multiple Arguments: Yes

--parser-options example

echo '3 ** 4' | npx eslint --stdin --parser-options ecmaVersion:6 # fails with a parsing error
echo '3 ** 4' | npx eslint --stdin --parser-options ecmaVersion:7 # succeeds, yay!

--resolve-plugins-relative-to

Changes the directory where plugins are resolved from.

• Argument Type: String. Path to directory.
• Multiple Arguments: No
• Default Value: By default, plugins are resolved from the directory in which your configuration file is found.

This option should be used when plugins were installed by someone other than the end user. It should be set to the project directory of the project that has a dependency on the necessary plugins.

For example:

• When using a config file that is located outside of the current project (with the --config flag), if the config uses plugins which are installed locally to itself, --resolve-plugins-relative-to should be set to the directory containing the config file.
• If an integration has dependencies on ESLint and a set of plugins, and the tool invokes ESLint on behalf of the user with a preset configuration, the tool should set --resolve-plugins-relative-to to the top-level directory of the tool.

--resolve-plugins-relative-to example

npx eslint --config ~/personal-eslintrc.js 
--resolve-plugins-relative-to /usr/local/lib/

Specify Rules and Plugins

--plugin

This option specifies a plugin to load.

• Argument Type: String. Plugin name. You can optionally omit the prefix eslint-plugin- from the plugin name.
• Multiple Arguments: Yes

Before using the plugin, you have to install it using npm.

--plugin example

npx eslint --plugin jquery file.js
npx eslint --plugin eslint-plugin-mocha file.js

--rule

This option specifies the rules to be used.

• Argument Type: Rules and their configuration specified with levn format.
• Multiple Arguments: Yes

These rules are merged with any rules specified with configuration files. If the rule is defined in a plugin, you have to prefix the rule ID with the plugin name and a /.

To ignore rules in .eslintrc configuration files and only run rules specified in the command line, use the --rules flag in combination with the --no-eslintrc flag.

--rule example

# Apply single rule
npx eslint --rule 'quotes: [error, double]'
# Apply multiple rules
npx eslint --rule 'guard-for-in: error' --rule 'brace-style: [error, 1tbs]'
# Apply rule from jquery plugin
npx eslint --rule 'jquery/dollar-sign: error'
# Only apply rule from the command line
npx eslint --rule 'quotes: [error, double]' --no-eslintrc

--rulesdir

Deprecated: Use rules from plugins instead.

This option allows you to specify another directory from which to load rules files. This allows you to dynamically load new rules at run time. This is useful when you have custom rules that aren’t suitable for being bundled with ESLint.

• Argument Type: String. Path to directory. The rules in your custom rules directory must follow the same format as bundled rules to work properly.
• Multiple Arguments: Yes.

Note that, as with core rules and plugin rules, you still need to enable the rules in configuration or via the --rule CLI option in order to actually run those rules during linting. Specifying a rules directory with --rulesdir does not automatically enable the rules within that directory.

--rulesdir example

npx eslint --rulesdir my-rules/ file.js
npx eslint --rulesdir my-rules/ --rulesdir my-other-rules/ file.js

Fix Problems

--fix

This option instructs ESLint to try to fix as many issues as possible. The fixes are made to the actual files themselves and only the remaining unfixed issues are output.

• Argument Type: No argument.

Not all problems are fixable using this option, and the option does not work in these situations:

1. This option throws an error when code is piped to ESLint.
2. This option has no effect on code that uses a processor, unless the processor opts into allowing autofixes.

If you want to fix code from stdin or otherwise want to get the fixes without actually writing them to the file, use the --fix-dry-run option.

--fix example

npx eslint --fix file.js

--fix-dry-run

This option has the same effect as --fix with the difference that the fixes are not saved to the file system. Because the default formatter does not output the fixed code, you’ll have to use another formatter (e.g. --format json) to get the fixes.

• Argument Type: No argument.

This makes it possible to fix code from stdin when used with the --stdin flag.

This flag can be useful for integrations (e.g. editor plugins) which need to autofix text from the command line without saving it to the filesystem.

--fix-dry-run example

getSomeText | npx eslint --stdin --fix-dry-run --format json

--fix-type

This option allows you to specify the type of fixes to apply when using either --fix or --fix-dry-run.

• Argument Type: String. One of the following fix types:
  1. problem — fix potential errors in the code
  2. suggestion — apply fixes to the code that improve it
  3. layout — apply fixes that do not change the program structure (AST)
  4. directive — apply fixes to inline directives such as // eslint-disable
• Multiple Arguments: Yes

This option is helpful if you are using another program to format your code, but you would still like ESLint to apply other types of fixes.

--fix-type example

npx eslint --fix --fix-type suggestion .
npx eslint --fix --fix-type suggestion --fix-type problem .
npx eslint --fix --fix-type suggestion,layout .

Ignore Files

--ignore-path

This option allows you to specify the file to use as your .eslintignore.

• Argument Type: String. Path to file.
• Multiple Arguments: No
• Default Value: By default, ESLint looks for .eslintignore in the current working directory.

Note: --ignore-path is not supported when using flat configuration (eslint.config.js).

--ignore-path example

npx eslint --ignore-path tmp/.eslintignore file.js
npx eslint --ignore-path .gitignore file.js

--no-ignore

Disables excluding of files from .eslintignore files, --ignore-path flags, --ignore-pattern flags, and the ignorePatterns property in config files.

• Argument Type: No argument.

--no-ignore example

npx eslint --no-ignore file.js

--ignore-pattern

This option allows you to specify patterns of files to ignore (in addition to those in .eslintignore).

• Argument Type: String. The supported syntax is the same as for .eslintignore files, which use the same patterns as the .gitignore specification. You should quote your patterns in order to avoid shell interpretation of glob patterns.
• Multiple Arguments: Yes

--ignore-pattern example

npx eslint --ignore-pattern "/lib/" --ignore-pattern "/src/vendor/*" .

Use stdin

--stdin

This option tells ESLint to read and lint source code from STDIN instead of from files. You can use this to pipe code to ESLint.

• Argument Type: No argument.

--stdin example

cat myfile.js | npx eslint --stdin

--stdin-filename

This option allows you to specify a filename to process STDIN as.

• Argument Type: String. Path to file.
• Multiple Arguments: No

This is useful when processing files from STDIN and you have rules which depend on the filename.

--stdin-filename example

cat myfile.js | npx eslint --stdin --stdin-filename myfile.js

Handle Warnings

--quiet

This option allows you to disable reporting on warnings. If you enable this option, only errors are reported by ESLint.

• Argument Type: No argument.

--quiet example

npx eslint --quiet file.js

--max-warnings

This option allows you to specify a warning threshold, which can be used to force ESLint to exit with an error status if there are too many warning-level rule violations in your project.

• Argument Type: Integer. The maximum number of warnings to allow. To prevent this behavior, do not use this option or specify -1 as the argument.
• Multiple Arguments: No

Normally, if ESLint runs and finds no errors (only warnings), it exits with a success exit status. However, if --max-warnings is specified and the total warning count is greater than the specified threshold, ESLint exits with an error status.

--max-warnings example

npx eslint --max-warnings 10 file.js

Output

-o, --output-file

Write the output of linting results to a specified file.

• Argument Type: String. Path to file.
• Multiple Arguments: No

-o, --output-file example

npx eslint -o ./test/test.html

-f, --format

This option specifies the output format for the console.

• Argument Type: String. One of the built-in formatters or a custom formatter.
• Multiple Arguments: No
• Default Value: stylish

If you are using a custom formatter defined in a local file, you can specify the path to the custom formatter file.

An npm-installed formatter is resolved with or without eslint-formatter- prefix.

When specified, the given format is output to the console. If you’d like to save that output into a file, you can do so on the command line like so:

# Saves the output into the `results.txt` file.
npx eslint -f compact file.js > results.txt

-f, --format example

Use the built-in compact formatter:

npx eslint --format compact file.js

Use a local custom formatter:

npx eslint -f ./customformat.js file.js

Use an npm-installed formatter:

npm install eslint-formatter-pretty

# Then run one of the following commands
npx eslint -f pretty file.js
# or alternatively
npx eslint -f eslint-formatter-pretty file.js

--color and --no-color

These options force the enabling/disabling of colorized output.

• Argument Type: No argument.

You can use these options to override the default behavior, which is to enable colorized output unless no TTY is detected, such as when piping eslint through cat or less.

--color and --no-color example

npx eslint --color file.js | cat
npx eslint --no-color file.js

--no-inline-config

This option prevents inline comments like /*eslint-disable*/ or
/*global foo*/ from having any effect.

• Argument Type: No argument.

This allows you to set an ESLint config without files modifying it. All inline config comments are ignored, such as:

• /*eslint-disable*/
• /*eslint-enable*/
• /*global*/
• /*eslint*/
• /*eslint-env*/
• // eslint-disable-line
• // eslint-disable-next-line

--no-inline-config example

npx eslint --no-inline-config file.js

--report-unused-disable-directives

This option causes ESLint to report directive comments like // eslint-disable-line when no errors would have been reported on that line anyway.

• Argument Type: No argument.

This can be useful to prevent future errors from unexpectedly being suppressed, by cleaning up old eslint-disable comments which are no longer applicable.

--report-unused-disable-directives example

npx eslint --report-unused-disable-directives file.js

Caching

--cache

Store the info about processed files in order to only operate on the changed ones. Enabling this option can dramatically improve ESLint’s run time performance by ensuring that only changed files are linted.
The cache is stored in .eslintcache by default.

• Argument Type: No argument.

If you run ESLint with --cache and then run ESLint without --cache, the .eslintcache file will be deleted. This is necessary because the results of the lint might change and make .eslintcache invalid. If you want to control when the cache file is deleted, then use --cache-location to specify an alternate location for the cache file.

Autofixed files are not placed in the cache. Subsequent linting that does not trigger an autofix will place it in the cache.

--cache example

npx eslint --cache file.js

--cache-file

Deprecated: Use --cache-location instead.

Path to the cache file. If none specified .eslintcache is used. The file is created in the directory where the eslint command is executed.

--cache-location

Specify the path to the cache location. Can be a file or a directory.

• Argument Type: String. Path to file or directory. If a directory is specified, a cache file is created inside the specified folder. The name of the file is based on the hash of the current working directory, e.g.: .cache_hashOfCWD.
• Multiple Arguments: No
• Default Value: If no location is specified, .eslintcache is used. The file is created in the directory where the eslint command is executed.

If the directory for the cache does not exist make sure you add a trailing / on *nix systems or on Windows. Otherwise, the path is assumed to be a file.

--cache-location example

npx eslint "src/**/*.js" --cache --cache-location "/Users/user/.eslintcache/"

--cache-strategy

Strategy for the cache to use for detecting changed files.

• Argument Type: String. One of the following values:
  1. metadata
  2. content
• Multiple Arguments: No
• Default Value: metadata

The content strategy can be useful in cases where the modification time of your files changes even if their contents have not. For example, this can happen during git operations like git clone because git does not track file modification time.

--cache-strategy example

npx eslint "src/**/*.js" --cache --cache-strategy content

Miscellaneous

--init

This option runs npm init @eslint/config to start the config initialization wizard. It’s designed to help new users quickly create an .eslintrc file by answering a few questions. When you use this flag, the CLI does not perform linting.

• Argument Type: No argument.

The resulting configuration file is created in the current directory.

--init example

npx eslint --init

--env-info

This option outputs information about the execution environment, including the version of Node.js, npm, and local and global installations of ESLint.

• Argument Type: No argument.

The ESLint team may ask for this information to help solve bugs. When you use this flag, the CLI does not perform linting.

--env-info example

npx eslint --env-info

--no-error-on-unmatched-pattern

This option prevents errors when a quoted glob pattern or --ext is unmatched. This does not prevent errors when your shell can’t match a glob.

• Argument Type: No argument.

--no-error-on-unmatched-pattern example

npx eslint --no-error-on-unmatched-pattern --ext .ts "lib/*"

--exit-on-fatal-error

This option causes ESLint to exit with exit code 2 if one or more fatal parsing errors occur. Without this option, ESLint reports fatal parsing errors as rule violations.

• Argument Type: No argument.

--exit-on-fatal-error example

npx eslint --exit-on-fatal-error file.js

--debug

This option outputs debugging information to the console. Add this flag to an ESLint command line invocation in order to get extra debugging information while the command runs.

• Argument Type: No argument.

This information is useful when you’re seeing a problem and having a hard time pinpointing it. The ESLint team may ask for this debugging information to help solve bugs.

--debug example

npx eslint --debug test.js

-h, --help

This option outputs the help menu, displaying all of the available options. All other options are ignored when this is present. When you use this flag, the CLI does not perform linting.

• Argument Type: No argument.

-h, --help example

npx eslint --help

-v, --version

This option outputs the current ESLint version onto the console. All other options are ignored when this is present. When you use this flag, the CLI does not perform linting.

• Argument Type: No argument.

-v, --version example

npx eslint --version

--print-config

This option outputs the configuration to be used for the file passed. When present, no linting is performed and only config-related options are valid. When you use this flag, the CLI does not perform linting.

• Argument Type: String. Path to file.
• Multiple Arguments: No

--print-config example

npx eslint --print-config file.js

Exit Codes

When linting files, ESLint exits with one of the following exit codes:

• 0: Linting was successful and there are no linting errors. If the --max-warnings flag is set to n, the number of linting warnings is at most n.
• 1: Linting was successful and there is at least one linting error, or there are more linting warnings than allowed by the --max-warnings option.
• 2: Linting was unsuccessful due to a configuration problem or an internal error.

Поскольку JavaScript — это интерпретируемый язык, ошибки, допущенные в коде, выявляются во время его выполнения. Чтобы увидеть ошибки до запуска кода, используется инструмент, который называется линтер. Для поиска ошибок применяется статический анализ и используются особые правила.

ESLint — это инструмент для поиска и исправления ошибок в коде JavaScript и ECMAScript. Он находит синтаксические ошибки, проблемы в шаблонах проектирования и отклонения от стиля. Наряду с большим количеством встроенных правил в нем можно использовать собственные правила или готовые плагины с правилами. Благодаря модульной структуре и множеству возможностей настройки можно настроить ESLint именно так, как нужно для вашего проекта.

Как работать с ESLint: шаг за шагом

Перед установкой ESLint нужно установить Node.js с поддержкой SSL и npm. Предположим, что вы уже сделали это заранее.

Для начала создайте каталог для проекта и поместите в него файл index.js с таким содержимым:

let i = 0;
do {
    alert( i );
    i++;

} while (true);

Затем инициализируйте npm в этом каталоге, если еще этого не сделали:

npm init

В результате будет создан файл package.json с параметрами пакета.

Установите ESLint в каталоге проекта. Для этого запустите в терминале следующую команду:

npm install eslint --save-dev

ESLint будет установлен локально. Существует возможность глобальной установки (с помощью команды npm install eslint --global), но не рекомендуем использовать такой подход. Все модули и совместно используемые файлы конфигурации в любом случае следует устанавливать локально.

Для настройки файла конфигурации выполните следующую команду:

npx eslint --init

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

Укажем, что будут использованы модули JavaScript:

В примере мы не используем ни React, ни Vue.js, ни TypeScript:

Предположим, код будет выполняться в браузере:

Укажем, что будем применять инструкции по стилю и выберем Airbnb:

Пусть файл конфигурации будет создан в формате JSON:

Установим зависимости:

В результате в каталоге проекта будет создан файл .eslintrc.json (или с другим расширением — в зависимости от выбранного вами формата).

В нем будет находиться примерно такой код:

module.exports = {
    'env': {
        'browser': true,
        'es2021': true
    },
    'extends': 'eslint:recommended',
    'parserOptions': {
        'ecmaVersion': 12,
        'sourceType': 'module'
    },
    'rules': {
    }
};

Проверяем проект

Теперь можно проверить проект, вызвав линтер для какого-либо файла или каталога. Вызовем eslint, передав в качестве аргумента текущий каталог (обозначенный точкой): node_modules.bineslint .

В результате получим:

Мы видим четыре ошибки и два предупреждения с указанием их позиций в файле. Также в таблице приведены описания и указаны нарушенные правила.

В сообщении указано, что три ошибки можно исправить, указав опцию --fix. Давайте так и сделаем: введем ту же команду и укажем эту опцию:

node_modules.bineslint . --fix

Вывод будет таким:

Видим, что линтер сам справился с тремя ошибками, а нам оставил остальные. Код в файле изменен:

let i = 0;
do {
    alert(i);
    i++;

} while (true);

Обратите внимание: вставлен символ новой строки и убраны пробелы в скобках.

Rules: правила проверки кода

В конфигурации примера выше мы использовали имеющиеся правила проверки. Но можно добавить и свои правила. В файле .eslintrc.json есть раздел rules.

Если при создании проекта указать не имеющийся набор инструкций, а задать свои правила (выбрав пункт Answer questins about your style), то в разделе правил в файле .eslintrc.json можно будет увидеть примерно такие правила:

'rules': {
        'indent': [
            'error',
            4
        ],
        'linebreak-style': [
            'error',
            'unix'
        ],
        'quotes': [
            'error',
            'single'
        ],
        'semi': [
            'error',
            'always'
 ]
    }

Структура правила проста. Рассмотрим первое правило из приведенного выше примера.

Слово indent — это имя правила. Первый элемент в списке обозначает уровень ошибки и может принимать следующие значения:

• off или 0 — выключить правило;
• warn или 1 — включить правило как предупреждение (не влияет на код выхода);
• error или 2 — включить правило как ошибку (с кодом выхода 1).

Второй элемент в этом случае означает количество пробелов. Второй аргумент зависит от правила.

Итак, приведенные выше правила указывают, что следует использовать отступ в четыре пробела, завершение строк в стиле UNIX, одинарные кавычки и не пропускать точку с запятой.

Правила делятся на несколько категорий. Существуют правила проверки на наличие возможных синтаксических и логических ошибок в коде:

• getter-return (обязательное применение оператора возврата в методах чтения);
• no-setter-return (запрет применения оператора возврата в методах изменения значения);
• no-dupe-args (запрет дублирующихся аргументов в определениях функций).

Есть правила проверки соблюдения передовой практики, например, accessor-pairs (обязательное применение пар методов чтения и изменения значений в объектах и классах).

Правила относительно переменных (no-unused-vars — запрет на неиспользуемые переменные), стилистические правила (eol-last — разрешение или запрет символа новой строки в конце файла) и правила для ECMAScript 6.

Вернемся к коду, немного изменим файл index.js и отправим его на проверку:

let i = 0
do {
    alert("Loop " + i);
    i++;

} while (true);

Будут выданы такие сообщения об ошибках:

Здесь сообщается, что пропущена точка с запятой, используется отступ в два пробела вместо четырех и двойные кавычки вместо одинарных, а в цикле использовано константное условие.

Полный список правил ESLint можно просмотреть по этой ссылке.

Чтобы не вводить одни и те же команды каждый раз, можно в разделе scripts в файле package.json указать сценарий для запуска eslint. Он может выглядеть так:

"scripts": {

    "lint": "eslint . --fix"

  },

Вывод будет примерно таким:

Эти сообщения об ошибках можно проигнорировать.

Проверку можно отключать как для отдельных строк, так и для нескольких.

Для отключения отдельной строки ее нужно завершить комментарием:

// eslint-disable-line

Чтобы отключить проверку для нескольких строк, перед ними следует вставить комментарий /* eslint-disable */, а после — /* eslint-enable */:

let i = 0;

do {

    alert('Loop ' + i);

    i++;

/* eslint-disable */

} while (true);

/* eslint-enable */

Также можно отключить одно или несколько конкретных правил. Для этого в комментарии /* eslint-disable */ их перечисляют через запятую:

/* eslint-disable semi, quotes */

Заключение

ESLint — эффективный инструмент, который можно настраивать и расширять в соответствии с потребностями разных проектов.

ESLint продолжает активно развиваться и интегрируется с Sublime Text 3, Vim, Visual Studio Code, IntelliJ IDEA, Emacs, Eclipse и многими другими средами разработки.

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

4 марта, 2021 1:31 пп
20 258 views
| Комментариев нет

Development, Java

Если вы пишете JavaScript в редакторе, например в Visual Studio Code, у вас есть несколько способов убедиться, что ваш код имеет правильный синтаксис и соответствует передовым практикам. Для этого можно использовать линтер. Линтеры – это программы, которые проверяют ваш код на наличие синтаксических ошибок и выделяют их, чтобы вы могли быстро их найти и исправить. ESLint – это линтер, который вы можете интегрировать в Visual Studio Code, чтобы обеспечить целостность вашего кода.

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

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

Требования

• П​оследняя версия Visual Studio Code на вашем компьютере. В этом руководстве используется Visual Studio Code 1.43.0.
• Последняя версия Node на вашем компьютере. Вы можете следовать инструкциям по установке Node.js в macOS, Debian 10, CentOS 8, Ubuntu 20.04.

1: Создание простого кода JavaScript

Мы начнем с подготовки тестового проекта, на примере которого рассмотрим функции линтера. Создайте для своего проекта каталог с помощью следующей команды:

mkdir linting

Теперь, когда папка для проекта готова, перейдите в нее:

cd linting

Находясь внутри каталога linting, создайте файл JavaScript по имени app.js:

touch app.js

Откройте app.js в Visual Studio Code. Поместите следующий код JavaScript в файл app.js:

const name = 'James'

const person = {first: name}

console.log(person)

const sayHelloLinting = (fName) => {

console.log(`Hello linting, ${fName}`);

};

С точки зрения форматирования вы можете сразу заметить несколько вещей, которые можно улучшить:

• Кавычки использованы непоследовательно.
• Точка с запятой – тоже.
• Интервалы установлены неправильно.

Подготовив этот файл JavaScript, вы можете инициализировать этот проект. Для этого вернитесь в командную строку и в каталоге linting выполните следующую команду:

npm init

Команда npm init при инициализации вашего проекта создаст в каталоге linting файл package.json. В package.json будут храниться зависимости и другие важные параметры конфигурации вашего проекта.

Теперь, когда тестовый проект JavaScript готов, мы можем установить ESLint.

2: Установка и настройка ESLint

Чтобы установить ESLint, введите:

npm install eslint --save-dev

В эту команду важно включить флаг –save-dev, поскольку он сохраняет пакет как зависимость разработки – и тогда он будет использован только в разработке, но не в производстве. Пакет eslint нужен только тогда, когда вы активно работаете над кодом и вносите изменения в свой проект. Как только ваш проект будет на стадии производства, eslint больше не понадобится. И флаг –save-dev гарантирует, что eslint будет указан в вашем файле package.json только как зависимость разработки.

Теперь, когда ESLint установлен, вы можете инициализировать конфигурацию ESLint для своего проекта, используя для этого следующую команду:

./node_modules/.bin/eslint --init

Важным элементом этой команды является флаг –init. Раздел ./node_modules/.bin/eslint этой команды – это путь к ESLint в вашем проекте. Флаг –init активирует ESLint для вашего проекта. Процедура активации или инициализации ESLint создаст конфигурационный файл, который позволит вам настроить ESLint для вашего проекта.

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

Первый вопрос будет выглядеть так:

? How would you like to use ESLint? …

  To check syntax only

  To check syntax and find problems

❯ To check syntax, find problems, and enforce code style

Здесь мы выберем To check syntax, find problems, and enforce code style – чтобы программа проверяла синтаксис, сообщала о проблемах и поддерживала единый стиль кода.

Следующий вопрос выглядит так:

What type of modules does your project use? …

  JavaScript modules (import/export)

❯ CommonJS (require/exports)

  None of these

Выберите опцию CommonJS, чтобы использовать глобальные переменные CommonJS.

В следующем вопросе будет сказано:

? Which framework does your project use? …

  React

  Vue.js

❯ None of these

Выберите вариант None of these.

Затем программа спросит:

? Does your project use TypeScript? › No / Yes

Выберите вариант No.

Затем появится такой вопрос:

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)

✔ Browser

✔ Node

Выберите Browser.

Затем вы увидите такой вопрос:

✔ How would you like to define a style for your project? …

❯ Use a popular style guide

  Answer questions about your style

  Inspect your JavaScript file(s)

Выберите ответ Use a popular style guide.

На вопрос:

Which style guide do you want to follow? 

Ответьте Airbnb: https://github.com/airbnb/javascript.

Затем будет такой вопрос:

? What format do you want your config file to be in? …

  JavaScript

  YAML

❯ JSON

Нужно выбрать JSON.

Вы получите такое сообщение:

Checking peerDependencies of eslint-config-airbnb-base@latest

The config that you've selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2

Последний вопрос программы выглядит так:

? Would you like to install them now with npm? › No / Yes

Выберите вариант Yes, чтобы установить зависимости с помощью npm.

Вам также будет предложено установить дополнительные пакеты. Выберите yes.

После всех вопросов вы заметите, что в ваш каталог linting был добавлен файл .eslintrc.json. Теперь инструмент ESLint установлен. Код в app.js пока не изменился – и это связано с тем, что ESLint необходимо интегрировать с Visual Studio Code.

3: Настройка ESLint

Чтобы интегрировать ESLint в Visual Studio Code, вам необходимо установить расширение ESLint для VS Code. Вернитесь в Visual Studio Code и найдите ESLint во вкладке Extensions. После того, как вы найдете это расширение, нажмите Install.

После установки расширения ESLint вы заметите красочное подчеркивание в файле app.js – это линтер выделил ошибки в файле. Отметки в ESLint имеют разные цвета в зависимости от степени серьезности. Если вы наведете курсор на подчеркнутый код, вы увидите сообщение, объясняющее вам ошибку. Таким образом, ESLint помогает находить ошибки в коде и устранять их.

ESLint может сделать для вас даже больше: к примеру, он может автоматически исправлять ошибки при каждом сохранении файла (для этого требуется отдельная настройка).

4: Форматирование при сохранении

Чтобы ESLint мог автоматически исправлять синтаксис и устранять ошибки форматирования при каждом сохранении, вам нужно открыть меню настроек. Меню в Visual Studio Code – это значок шестеренки в левом нижнем углу. Нажмите его и выберите Settings.

В меню настроек найдите Code Actions on Save. Первой идет опция Editor: Code Actions on Save, а ниже – Edit in settings.json, и как раз она нам нужна.

Файл settings.json откроется в редакторе кода. Чтобы ESLint исправлял ошибки при сохранении файла, вам нужно добавить следующий код в settings.json:

"editor.codeActionsOnSave": {

  "source.fixAll.eslint": true

},

"eslint.validate": ["javascript"]

С помощью этого кода ESLint сможет автоматически исправляет ошибки и проверяет JavaScript при сохранении.

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

• Теперь одинарные кавычки использованы последовательно.
• Точки с запятой – тоже.
• Отступ внутри функции расставлены правильно.

ESLint автоматически будет устранять синтаксические ошибки при сохранении файла app.js. Но пока у нас еще остались сообщения об ошибках. Их можно исправить, настроив ESLint для обнаружения или игнорирования определенных ошибок и проблем с форматированием.

5: Пользовательская настройка ESLint

«Из коробки» ESLint подчеркивает все операторы console.log() в app.js. В некоторых случаях распознавание операторов console.log в качестве ошибки может быть не в приоритете. Вы можете игнорировать операторы console.log.

Правила конфигурации ESLint можно изменить в файле .eslintrc.json.

Откройте файл .eslintrc.json. В этом файле вы увидите такой код:

{

    "env": {

        "browser": true,

        "commonjs": true,

        "es2021": true

    },

    "extends": [

        "airbnb-base"

    ],

    "parserOptions": {

        "ecmaVersion": 12

    },

    "rules": {

    }

}

В конце файла .eslintrc.json вы увидите объект «rules». Чтобы настроить триггеры ESLint (или отключить реакцию ESLint на определенные фрагменты кода), нужно добавить пары «ключ-значение» к объекту «rules». Ключ – это название правила, которое нужно добавить или изменить. Значение задает уровень серьезности проблемы. ESLint поддерживает три уровня серьезности:

• error – подчеркивается красным
• warn – подчеркивается желтое
• off – ничего неподчеркивается.

Если вы не хотите подчеркивать операторы console.log как ошибки, вы можете назвать правило no-console и указать это имя в качестве ключа. Используйте off как значение:

"rules" : {

  "no-console": "off"

}

Это правило удаляет подчеркивание операторов console.log в app.js.

Некоторые правила требуют нескольких фрагментов данных, включая уровень серьезности и значение. К примеру, чтобы указать тип кавычек, которые вы хотите использовать в своем коде, вы должны передать и выбранный тип кавычек, и уровень серьезности:

"rules" : {

  "no-console": "off",

   "quotes": [

      "error",

      "double"

    ]

}

Если теперь вы включите в код одинарные кавычки, ESLint выдаст ошибку.

Заключение

Это руководство вкратце знакомит с некоторыми функциями интеграции ESLint в Visual Studio Code. Инструменты линтинга, такие как ESLint, помогут вам сэкономить время для более сложных задач за счет автоматизации и упрощения проверки синтаксиса и остальных требований к коду.

Если вам нужна дополнительная информация о правилах и о том, какие пары «ключ-значение» вы можете использовать для настройки ESLint, вы можете ознакомиться с документацией.

Tags: ESLint, Javascript, Node.js, Visual Studio Code

Когда мы взаимодействуем в каком-либо проекте, то лучше всего придерживаться некоего общего стиля написания кода. Это облегчит коллегам его чтение и сократит временные затраты. Но как же понять, знают ли все этот общепринятый стиль? И как убедиться, что все ему следуют?

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

На второй вопрос можно ответить добавлением предкоммитного перехватчика в Git, который будет давать ESLint команду о запуске анализа кода прежде, чем его коммитить. В случае отклонения от указанного стандарта он обратит на это внимание разработчика и не допустит коммит кода.

Мы будем использовать husky для добавления git перехватчиков в наш проект. 

Нам также следует добавить его в CI пайплайн на случай, если разработчику удастся обойти git перехватчики.

Часть 1: Добавление ESLint в проект

Мы используем Express generator для создания скелета приложения.

Теперь давайте его запустим при помощи следующих команд:

cd myapp
npm install
DEBUG=myapp:* npm start

Итак, наш проект готов и запущен. Теперь нам нужно добавить ESLint.

Мы это сделаем посредством следующей команды:

npm install --save-dev eslint

Нам не стоит производить полную установку ESLint, достаточно будет инсталлировать его в качестве dev-зависимости. 

Для запуска конфигурации мы введем:

./node_modules/.bin/eslint --init

Здесь программа задаст нам несколько вопросов. Ниже я прикрепил все восемь в виде скриншотов. Где необходимо я дал пояснения в подписи. 

Я сам постоянно пользуюсь стилем Airbnb. Рекомендую ознакомиться — он весьма интересный.

Это действие создаст .eslintrc.json в корне нашего проекта.

Часть 2: Использование ESLint

Мы можем проверить весь проект, запустив следующую команду:

./node_modules/.bin/eslint . # . represent the current directory

Обратите внимание, что eslint является исполняемой, и мы будем использовать версию, которая содержится в нашем проекте. Все исполняемые файлы расположены в директории .bin, находящейся в каталоге node_modules. Это дает нам возможность хранить различные версии ESLint для применения в нескольких проектах без необходимости их полной установки. На самом деле лучше все исполняемые применять именно таким образом (например, nodemon, pm2, и т.д).

В результате вывода мы видим множество файловых ошибок и предупреждений. В конце же отображен полный отчет.

Для запуска ESLint для одного файла мы используем следующую команду:

./node_modules/.bin/eslint app.js

Мы также можем активировать функцию автоматической корректировки. В этом случае ESLint исправит все, что может, самостоятельно.

./node_modules/.bin/eslint app.js --fix

Исправлено 14 ошибок. Осталась только одна неиспользованная переменная. Для обнаружения источника этой ошибки нам понадобится сначала найти правило no-unused-vars, т.к. для понимания стандарта стилистики Airbnb требуется время. 

Теперь давайте запустим ESLint с командой fix для всего проекта.

./node_modules/.bin/eslint . --fix

Большинство ошибок было исправлено. 

Часть 3: Добавление команды в package.json

Достаточно тяжело каждый раз печатать команду снова и снова. Поэтому я предпочитаю создавать сокращенные варианты в виде скриптов в package.json.

Теперь для запуска ESLint мы можем просто использовать:

npm run lint

На выводе мы видим в конце npm ERR!. Это результат выдачи ESLint ненулевого кода выхода, которую можно проигнорировать.

Все это легко запоминается и применяется любым разработчиком.

Часть 4: Переопределение правил

Что, если мы захотим отключить правило no-unsed-vars? Мы просто изменим его в нашем файле .eslintrc.json.

После этого ESLint больше не будет выдавать эту ошибку.

Используя Google, вы можете разобраться в настройках различных правил. Вы освоите это в рабочем порядке, когда ESLint будет подключен к проекту и запущен.

Часть 5: Заключение

Использование какого-либо линтера совместно со стандартом стиля весьма полезно, но также важно совмещать его работу с предкоммитным перехватчиком. Случается, что разработчики обходят git перехватчики, поэтому еще важнее добавить его в CI. 

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

• Основы JavaScript: управление DOM элементами (часть 1)
• 3 способа клонирования объектов в JavaScript
• Советы по анимации с CSS и JavaScript

---

Перевод статьи Tushar Tuteja: Using ESLint Right

Many React projects have ESLint set up and devs are fixing lint errors as they code. This is great for reducing bugs, and keeping code cleanly formatted.

However, sometimes there’s a situation where a project can have a lot of linting errors (i.e. adding ESLint to an existing project) and it would be tedious for a dev to fix them manually. Don’t worry, ESLint has a command for auto-fixing: eslint --fix!

In this article I’ll discuss the flags available for ‘fix’, the types of issues (problem, suggestion, layout) that ‘fix’ can resolve automatically, and options such as how to limit the amount of warnings, print to a file, and more.

Whether or not you have experience with ESLint, the primary thing you need to know for using ESLint commands is that it will only lint and fix according to the rules set in your .eslintrc.json file*. An .eslintrc.json file with lots of preconfigured rules can be found here at this ESLint playground (scroll to the bottom for the download).

---

Related: Test your TypeScript knowledge against these 50 difficult TypeScript questions.

---

*If you are running ‘fix’ from the eslint-cli, you can set rules with the --rule option.

There are three ways that ESLint fix can be run:

• eslint --fix
• eslint --fix-dry-run
• eslint --fix --fix-type

eslint --fix will fix every rule violation it is capable of fixing, actually overwrite the code, and print out any warnings or errors it was incapable of fixing.

Most errors are not actually automatically fixable. Take a look at this documentation, the items with the ‘wrench’ image can be auto-fixed.

Here’s an interesting example: 0 == 0 can be automatically fixed (to 0 === 0), but comparing a variable likely won’t be fixed (i.e. x == 0). The linter has to err on the side of caution. It generally fixes redundancies and situations where typing can be certain.

The output from eslint --fix will be a list of errors and warnings. If desired, warnings can be silenced with the --quiet flag. Conversely, if desired, a maximum number of errors can be specified as ‘too many’ (--max-warnings [number]), and the linter will succeed but end with exit code 1 (more on that below).

eslint --fix-dry-run acts like fix but will not actually overwrite the file. Instead, specify an output location and a formatting option such as eslint --fix-dry-run --format=json -o ./test.test.json. This output will be quite verbose, naming the files that were linted and results.

eslint --fix --fix-type enables targeting of specific categories of issues to fix. We’ll discuss the types in more detail below, but an example command would be eslint --fix --fix-type layout. This would fix an issue such as having too much whitespace before a line of code, if the rule is designated in your .eslintrc.json file (this rule in particular would be “indent”: [“error”, 4] to limit whitespace to four characters).

Below is output from my project when I ran eslint --fix --fix-type problem ”src/**/*.tsx” . This command targeted all problems in my .tsx files under src folder.

*A note on these commands: notice that--fix-type is preceded by -fix , while --fix-dry-run is not.

The Three Types of Fixable Issues

The three types of issue either fixed or reported by --fix are:

• problem
• suggestion
• layout

According to the ESLint documentation:

• a problem is code that will cause an error or confusion
• a suggestion is code that could be done in a better way
• layout deals with how the code looks

Now that we are familiar with the fix-type flag, let’s look again at the 0 == 0 issue. This is fixable as a suggestion. Issues such as whitespace count before the start of a code statement or extra parenthesis are fixable as layout.

ESLint –fix Warnings

When running eslint --fix, some rule violations result in warnings instead of errors. Take a look at the below TypeScript rule violations:

warning IObservableArray is defined but never used @typescript-eslint/no-unused-varswarning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any

Generally, warnings don’t directly result in problems at runtime. However, many rules can be configured to show errors instead of warnings (or vice versa). For example, both of the issues listed above are included as warnings when extending @typescript-eslint/recommended like below in .eslintrc.json:

extends: [
  'plugin:@typescript-eslint/recommended'
]

However, I could have specified the below instead:

rules: [
  "no-unused-vars": "error"
]

This would make the IObservableArray violation appear as an error instead of a warning. Error vs warning is partly a difference in what rules a particular team finds most critical to enforce.

The Three Exit Codes of ESLint fix Command

ESLint’s fix command has three possible exit codes:

• 0: success and no lint errors, less warnings than max warnings
• 1: linting was successful, at least one lint error or more warnings than max-warnings
• 2: linting unsuccessful due to config error or internal error

The exit code will be at the end of the output and appear like this:

It’s best to fix the errors of course. However, keep in mind there is also the option (preferably only during testing) to ignore rules for individual lines. For example, // eslint-disable-next-line @typescript-eslint/no-explicit-any could be used to bypass the no-explicit-any warning mentioned previously.

TSLint –fix Differences

Even though TSLint is deprecated in favor of ESLint, many devs are still using TSLint (based on how many Google searches are still happening for TSLint topics).

TSLint has a --fix option, but it has no flags (i.e. no --dry-run option). TSLint also has different exit codes. From Palantir’s docs:

0: Linting succeeded without errors (warnings may have occurred)

1: An invalid command line argument or combination thereof was used

2: Linting failed with one or more rule violations with severity error

If you are still using TSLint, consider upgrading to typescript-eslint. Many of the commands and directives are the same, such as the directives for ignoring lines or rules.

Resources

Here’s how and when to specify global variables in your .eslintrc file.

Here’s how to configure the @typescript-eslint/ban-types rule in your project.

Expand your JavaScript knowledge with these 50 difficult JavaScript questions!

Normally I link to example React code and show screenshots of a working app. This article is different: the codebase doesn’t matter much, it’s all about the ESLint commands and the output. In addition to the code snippets and screenshots above, take a look at the below docs. They provide very detailed information about all the capabilities of ESLint fix.

• ESLint docs: https://eslint.org/docs/user-guide/command-line-interface#fixing-problems
• Old TSLint ‘fix’ command: https://palantir.github.io/tslint/usage/cli/
• This is a good start to your .eslintrc.json file:

parser: '@typescript-eslint/parser',
extends: [
  'eslint:recommended',
  'plugin:react/recommended',
  'plugin:@typescript-eslint/recommended'
],
plugins: [
  'react-hooks'
]

• This is an excellent resource: https://eslint.org/demo. You can scroll to the bottom and download the .eslintrc.json used for the rules in the demo. You likely will want to incorporate some of these rules in your own project.

Олег Бидзан

Технический директор Simtech Development

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

Как все начиналось

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

Во-первых, бесконечные споры о том, как писать и форматировать код. Это действительно надоевшая всем тема, по крайней мере, для меня. Личным предпочтениям тут не место. Есть более важные вещи, на которые стоит обратить внимание.

Во-вторых, я не хочу казаться беспомощным, когда коллеги начнут задавать вопросы во время демонстрации. Они потеряют интерес, если вы не отвечаете на вопросы или не сможете раскрутить тему.

В-третьих, мощь этих инструментов. Они помогают заниматься действительно важными вещами вместо того, чтобы отвлекаться от процесса, если, например, код отформатирован неправильно, на что чаще всего обращают внимание на code review.

И, в конце концов, это всё про бизнес, неважно насколько нам нравится то, что мы делаем. Это просто трата времени. Вы можете потратить его эффективнее.

Как вы заметили, у разработчиков в течение рабочего дня очень много отвлекающих факторов. Давайте устраним их, используя устоявшиеся инструменты.

Инфо Скорее всего поддержки TSLint в Angular не будет в ближайшее время т.к. TypeScript решили внедрить ESLint вместо TSLint. Команда Angular уже работает нам переездом с TSLint на ESLint. См. issue.

ESLint — это утилита, которая может анализировать написанный код. Фактически, это статический анализатор кода, и он может находить синтаксические ошибки, баги или неточности форматирования. В других языках, например, Go, это является неотъемлемой частью языка программирования.

Что я должен сделать, чтобы начать использовать ESLint?

Я рассчитываю, что у вас уже установлены node и npm, и вы знакомы с ними.

Создание рабочей папки

Перейдите в папку, где находится ваш JavaScript или TypeScript проект, или, как я, создайте тестовую папку lint-examples, где мы можем работать по ходу статьи. В операционных системах на основе Linux наберите mkdir lint-examples в командной строке и затем перейдите в созданную папку с помощью команды cd lint-examples.

Установка ESLint

Теперь давайте создадим package.json, чтобы мы могли установить ESLint. Выполнение команды npm init создаст package.json, который необходим для установки eslint в вашу папку.

Добавьте eslint в ваши npm скрипты

{
  "name": "eslint-examples",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "eslint": "eslint"
  },
  "devDependencies": {
    "eslint": "7.1.0"
  }
}

Подсказка "eslint": "eslint" в скриптах — это сокращение для node_modules/.bin/eslint.

Создайте test.js

Давайте создадим простой JavaScript-файл в папке lint-example, куда мы установили ESLint. Не переживайте о плохом форматировании примера. Нам нужно это для старта.

var foo = 1
console.log(foo)
var bar
bar = 1
function test(


    ) {
  console.log(baz)
}
var baz = 123

Первая попытка в командной строке

Если вы сейчас запустите test.js, используя ESLint, ничего не случится. По умолчанию ESLint проверяет только синтаксические ошибки. Он будет использовать ES5 по умолчанию. Описание опций парсинга можно найти по ссылке.

Если вы использовали const или let в примере выше, ESLint генерирует ошибку, потому что, как уже говорилось, ES5 выбран по умолчанию.

Подсказка Используя -- вы можете передать аргументы через npm-скрипты в командную строку eslint.

npm run eslint -- ./test.js

Становится интереснее!

В зависимости от того насколько современен ваш проект, вы должны выставить правильные опции. В наших примерах мы предполагаем, что вы хотите использовать современный ES6 синтаксис.

Давайте создадим наш первый .eslintrc.

Существует несколько способов передать конфигурации в ESLint. Я предпочитаю .eslintrc. По ссылке вы найдете другие способы.

{
  "env": {
    "es6": true
  }
}

Инфо env обязателен для глобальных переменных. Когда мы настраиваем параметры env, устанавливая es6 в true, ESLint включит глобальность для всех новых типов, таких как Set. Это так же включит ES6 синтаксис, например, let и const. Смотрите установка опций парсера.

Сейчас мы должны добавить несколько правил в наш .eslintrc

Можем ли мы просто определить правила? Да, потому что установили ESLint, который содержит множество правил из коробки. Для особых правил, таких как TypeScript или новых функций, которые не поддерживаются ESLint, мы должны установить модули eslint-config-xxx или eslint-plugin-xxx. Но мы можем вернуться к этому позже. Вы можете посмотреть правила по ссылке.

{
  "env": {
    "es6": true
  },
  "rules": {
    "no-var": "error",
    "semi": "error",
    "indent": "error",
    "no-multi-spaces": "error",
    "space-in-parens": "error",
    "no-multiple-empty-lines": "error",
    "prefer-const": "error",
    "no-use-before-define": "error"
  }
}

Если вы запустите npm run eslint, то должны получить результат в точности как ниже:

error 'foo' is never reassigned. Use 'const' instead prefer-const
error Missing semicolon semi
error Expected indentation of 0 spaces but found 4 indent
error 'bar' is never reassigned. Use 'const' instead prefer-const
error Multiple spaces found before ')' no-multi-spaces
error There should be no space after this paren space-in-parens
error There should be no space before this paren space-in-parens
error More than 2 blank lines not allowed no-multiple-empty-lines
error 'baz' was used before it was defined no-use-before-define
error 'baz' is never reassigned. Use 'const' instead prefer-const

26 problems (26 errors, 0 warnings)
20 errors and 0 warnings potentially fixable with the `--fix` option.

Мы сделали большой шаг и теперь знаем, какими должны быть наши стандарты кодирования и форматирования кода, но в реальной жизни правил, конечно же, гораздо больше.

Возможно, вы увидели в выводе результата ESLint, что 20 проблем из 26 могут быть решены автоматически. Мы вернемся к этому в следующем разделе.

ESLint и форматирование кода?

ESLint может автоматически форматировать ваш код до определенной стадии. Как вы возможно видели в выводе лога, дополнительный флаг --fix может быть использован для форматирования написанного кода, основываясь на правилах eslint. Например, пропущенная точка с запятой может быть добавлена автоматически, а несколько пустых строк подряд будут удалены. Это так же работает для других правил.

Давайте исправим код, выполнив npm run eslint -- ./ --fix

var foo = 1;
console.log(foo);
var bar;
var = 1;
function test(

) {
    console.log(baz);
}
var baz = 123;

1:1 error Unexpected var, use let or const instead no-var
3:1 error Unexpected var, use let or const instead no-var
11:1 error Unexpected var, use let or const instead no-var

3 problems (3 errors, 0 warnings)

Вы видите, что ESLint исправляет не все правила. Оставшиеся три ошибки необходимо поправить вручную, однако остальные ошибки из отчета ESLint (такие как «Пропущенная точка с запятой», «Неправильные отступы», «Множественные пробелы») были исправлены автоматически.

Обратите внимание Причина, по которой var не может быть исправлена, — в каких-то действиях с контекстом браузера. Вы можете почитать подробнее по ссылке.

В документации ESLint вы можете найти, какие правила можно активировать с помощью иконки «check mark». Код, который может быть отформатирован автоматически, подсвечивается с помощью иконки гаечного ключа.

• Правила можно найти по ссылке.
• Существует примерно 300 правил, и их число постоянно растет.
• Примерно 100 из этих правил делают автоформатирование.

Всё это становится мощнее, если код форматируется вашей IDE при изменении (сохранении) файла, или если любой инструмент автоматизации, например travis-ci, может взять на себя эту задачу, когда что-то отправляется в Git.

Если ESLint может форматировать ваш код, что тогда делает Prettier?

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

Что надо сделать, чтобы начать использовать Prettier?

Не так много. Просто добавьте в ваши npm-скрипты "prettier": "prettier" и запустите npm install prettier.

Как мы помним, этот код был отформатирован ESLint, и он не очень хорошо оформлен.

// test.js
const foo = 1;
console.log(foo);
let bar;
bar = 1;
function test(

) {
    console.log(baz);
}
const baz = 123;

После выполнения npm run prettier -- --write ./test.js код выглядит опрятнее.

const foo = 1;
console.log(foo);
let bar;
bar = 1;
function test() {
  console.log(baz);
}
const baz = 123;

Так намного лучше. Чем больше кода, тем лучше результат.

Могу ли я настраивать Prettier?

Да. Настроек в парсере Prettier не так много, как в ESLint. С Prettier вы полностью во власти парсера Prettier. Основываясь на небольшом количестве опций, он сам решает, как будет выглядеть ваш код.

Это мои настройки, которые описаны в файле .prettierrc. Полный список опций вы можете найти по ссылке. Давайте создадим .prettierrc-файл с такими опциями.

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "avoid"
}

Запускать ли ESLint и Prettier одновременно?

Не рекомендуется запускать ESLint и Prettier по отдельности, чтобы применить правила написания кода и форматирования. Более того, ESLint и Prettier будут мешать друг другу т.к. у них есть пересекающиеся правила, и это может привести к непредсказуемым последствиям. В следующем разделе мы рассмотрим эту проблему и решим ее. Если кратко, то вы просто запускаете eslint в командной строке, а prettier будет уже включаться туда.

Как всё это начиналось!

Как я писал в начале статьи, я никогда не использовал ESLint и Prettier прежде. Следовательно, я не знал, как эти утилиты работают. Как любой разработчик, я копировал наилучший кусок кода из глубин интернета в мой .eslintrc-файл без понимания, что это даст. Главной целью было, чтобы это работало.

Вот небольшой кусочек кода из моего .eslintrc-файла, который я скопировал из нескольких источников и адаптировал под себя, постепенно понимая, что делает конфиг.

Если коротко, то там настройки и плагины для ESLint, предоставленные сообществом открытого исходного кода. Мы не должны делать их сами. Главное понимать, как это работает под капотом.

.eslintrc

{
  "plugins": [
    "@typescript-eslint",
    "prettier",
    "unicorn" ,
    "import"
  ],
  "extends": [
    "airbnb-typescript/base",
    "plugin:@typescript-eslint/recommended",
    "plugin:unicorn/recommended",
    "plugin:prettier/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "rules": {
    "no-debugger": "off",
    "no-console": 0
  }
}

Заметка Возможно, вы заметили prettier в плагинах, и вы все еще помните, что я писал выше: «Должны ли мы одновременно запускать ESLint и Prettier для форматирования кода?» Ответ нет, потому что eslint-plulgin-prettier и eslint-config-prettier сделают всю работу за вас.

Что означают эти настройки и опции?

После того, как я заставил систему работать, то задался вопросом, а что это всё значит. Это буквально выбило меня из колеи. Если вы запустите ESLint в вашей консоли с этими опциями, то получите сообщение об ошибке, что конфига (расширения) и плагины не установлены. Но откуда мы можем знать, что устанавливать? Каждый знаком с процессом, вы находите кусок кода на StackOverflow или в каком-то репозитории и потом не знаете, как правильно запустить его.

Вы должны помнить, что все модули внутри extends и plugins могут быть установлены. Но сначала вы должны узнать, как интерпретировать соглашение об именах в свойствах, чтобы иметь возможность устанавливать их через npm.

Что такое опции «плагина»?

Плагины содержат правила написанные с использованием парсера. Это могут быть правила на рассмотрении из TC39, которые еще не поддерживаются ESLint, или специальные рекомендации по написанию кода, которые не представлены в ESLint, например, unicorn/better-regex, import/no-self-import.

Представьте, что вы хотите ввести правило, которое гласит, что в начале файла перед написанием какой-либо строки кода всегда должен быть комментарий, начинающийся со смайлика. Звучит странно, но вы можете сделать это с помощью ESLint Plugin.

// :penguin: emoji

Давайте узнаем, как интерпретировать соглашение об именах плагинов

Если имя плагина начинается не с eslint-plugin- или @ или ./, вы просто должны добавить префикс eslint-plugin-.

plugins: [
  "prettier", // npm module "eslint-plugin-prettier"
  "unicorn"   // npm module "eslint-plugin-unicorn"
]

Еще пример, работает так же:

plugins: [
  "eslint-plugin-prettier", // the same as "prettier"
  "eslint-plugin-unicorn"   // the same as "unicorn"
]

Становится немного сложнее, когда вы сталкиваетесь с именами плагинов, которые начинаются с @ (пространство имен). Как видно из приведенного ниже примера, использование / ограничено одним уровнем. Вы должны учитывать, что @mylint и @mylint/foo находятся в одном и том же пространстве имен, но это два разных плагина (npm-модуля).

plugins: [
  "@typescript-eslint", // npm module "@typescript-eslint/eslint-plugin"
  "@mylint",        	// npm module "@mylint/eslint-plugin"
  "@mylint/foo",        // npm module "@mylint/eslint-plugin-foo"
  "./path/to/plugin.js  // Error: cannot includes file paths
]

Код примера ниже такой же, как и сверху.

plugins: [
  "@typescript-eslint/eslint-plugin", // the same as "@typescript-eslint"
  "@mylint/eslint-plugin",            // the same as "@mylint"
  "@mylint/eslint-plugin-foo"         // the same as "@mylint/foo"
]

Подсказка Используйте сокращенную форму (из первого примера) вместо длинной формы (из второго примера). Главное, чтобы вы понимали, как ESLint это конвертирует внутри.

Теперь мы знаем, как работает соглашение об именах для плагинов. Установите следующие плагины ESLint через npm.

npm i eslint-plugin-prettier eslint-plugin-unicorn

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

Для тестирования ваш .eslintrc должен выглядеть следующим образом:

{
  "plugins": [
    "prettier",
    "unicorn"
  ],
  "env": {
    "es6": true
  }
}

Prettier: ESLint плагин для форматирования кода.

Unicorn: дополнительные правила, которые не поддерживаются ESLint.

Теперь, если вы запустите npm run eslint в командной строке, вы не получите сообщение об ошибке, но также не получите и вывод ESLint. Это потому, что мы должны зарегистрировать модуль плагина в свойстве extends нашего .eslintrc-файла или применить его, активировав в разделе rules.

Давайте выясним, как интерпретировать соглашение об именах в расширениях

Прежде всего, если вы считаете, что соглашение об именах в разделе extends такое же, как и у плагинов, я должен вас разочаровать. Есть отличия. Должен честно признать, что мне потребовалось много времени, чтобы заметить разницу. Это было отчасти потому, что ESLint — сложная и обширная тема, по крайней мере, для меня.

Пока вы используете только простое имя (например, foo) без префикса пространства имен (@) или с (./to/my/config.js), принцип соглашений об именах в extends такой же, как и с параметром plugins. Таким образом, foo становится eslint-config-foo

extends: [
  "airbnb-base", // npm module "eslint-config-airbnb-base"
  "prettier"     // npm module "eslint-config-prettier"
]

идентичен

extends: [
  "eslint-config-airbnb-base", // shortform is "airbnb-base"
  "eslint-config-prettier"     // shortform is "prettier"
]

Итак, мы подошли к тому, что существуют различия в соглашении об именах между plugins и extends. Это тот случай, когда вы используете пространства имен (@) в разделе extends. Следующая конфигурация ESLint @mylint все та же, она указывает на модуль npm @mylint/eslint-config, но @mylint/foo может привести к ошибке при использовании в extends из-за отсутствия префикса eslint-config- в @mylint/eslint-config-foo.

extends: [
  "@bar",                   // npm module "@bar/eslint-config"
  "@bar/eslint-config-foo", // npm module "@bar/eslint-config-foo"
  "@bar/my-config"          // npm module "@bar/eslint-config/my-config"
]

Как я писал в введении к предыдущему разделу, следующий @mylint/my-config немного особенный, поскольку он содержит модуль npm, но в то же время он указывает изнутри ESLint на набор правил (my-config). Мы скоро это выясним. Вот официальная документация по соглашению об именах extends.

Давайте установим остальные модули npm для нашего примера.

npm i eslint-config-airbnb-base eslint-config-prettier

Примечание: возможно, вы заметили, что сначала мы установили eslint-plugin-prettier, а теперь установили eslint-config-prettier. Это разные модули, но работают только вместе. Мы обсудим это позже.

Что конкретно делает extends в .eslintrc?

Конфиг предоставляет предварительно настроенные правила. Эти правила могут состоять из правил ESLint, правил сторонних плагинов или других конфигураций, таких как синтаксический анализатор (babel, esprima, и т.д.), параметров (sourceType, и т.д.), окружений (ES6, и т.д.) и других.

Звучит неплохо? Да, потому что мы не должны делать всё сами. Продвинутые разработчики и команды уже потратили на это много времени. Всё, что нужно сделать, это активировать правила, указав конфиг или набор правил плагинов.

Где я могу найти эти наборы правил?

Есть разные способы их найти.

Во-первых, вы должны посмотреть на README.md соответствующего репозитория и прочитать именно то, что написано. Обычно, эти наборы правил называются «рекомендованными» и должны быть активированы для plugins. Для extends это не всегда необходимо.

Во-вторых, знание того, какой набор правил использовать даже без чтения README.md — вот, что я считаю гораздо более эффективным. Особенно, если файл README.md является неполным или неправильным.

По сути, вы можете сказать, что «плагины» указывают на один файл, где конфигурации (наборы правил), содержащиеся в объекте и «расширениях», указывают на наборы правил, которые находятся в разных файлах.

eslint-config-airbnb-base

eslint-config-airbnb-base (repository)
| -- index.js
| -- legacy.js
| -- whitespace.js

Вы можете активировать все конфигурации одновременно, но будьте осторожны. Вы должны заранее знать, что они делают. Обычно я предварительно изучаю связанные README.md файлы или непосредственно соответствующие наборы правил конфигурации. Довольно легко, когда вы поймете, как их активировать, верно?

Использование:

"extends": [
  "airbnb-base",            // index.js
  "airbnb-base/whitespace"  // whitespace.js
]

Держите в уме Порядок играет роль, потому что набор правил будет расширять или перезаписывать предыдущие. Так что не переусердствуйте с конфигами и плагинами. Смотрите хорошее объяснение на StackOverflow.

eslint-plugin-prettier

Теперь мы подошли к захватывающей части статьи. Как мы можем использовать Prettier напрямую в ESLint, не запуская его в качестве отдельной службы в нашей командной строке или IDE?

Мы начнём с активации eslint-plugin-prettier в разделе extends, а затем связанного с ним config eslint-config-prettier, который отвечает за деактивацию некоторых наборов правил ESLint, которые могут конфликтовать с Prettier.

eslint-plugin-mylint (repository)
| -- eslint-plugin-prettier.js (because this is specified as entrypoint in package.json)

eslint-plugin-prettier.js

module.exports = {
  configs: {
    recommended: {
      extends: ['prettier'],
      plugins: ['prettier'],
      rules: {
        'prettier/prettier': 'error'
      }
    }
  }
  ...
  ...
  ...

Использование:

"extends": [
  "plugin:prettier/recommended"
]

Подсказка Плагины должны быть зарегистрированы в plugins и активированы в extends с использованием :plugin префикс.

eslint-config-prettier

eslint-config-prettier (repository)
| -- index.js
| -- @typescript-eslint.js
| -- babel.js
| -- flowtype.js
| -- react.js
| -- standard.js
| -- unicorn.js
| -- vue.js

Использование:

"extends": [
  "prettier",                   // index.js
  "prettier/unicorn",           // unicorn.js
  "prettier/@typescript-eslint" // @typescript-eslint.js
]

Примечание Отдельно "prettier" в extends требуется для отключения некоторых правил ядра ESLint. В остальных случаях "prettier." необходимы для отключения правил в unicorn и @typescript-eslint.

Мой личный конфиг ESLint выглядит как приведенный выше пример. Я использую TypeScript и плагин Unicorn. Не хочу, чтобы они конфликтовали с ESLint. Поэтому некоторые правила TypeScript и Unicorn отключены через Prettier.

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

Активировать всё самостоятельно вместо использования набора правил не имеет смысла. Но часто случается так, что вы не согласны с тем или иным правилом или его настройками. В этом случае вы можете отключить одно правило.

.eslintrc

"rules": {
  "unicorn/prevent-abbreviations": "off"
}

Итак, вернёемся к нашему тестовому примеру. Теперь наш .eslintrc-файл должен выглядеть следующим образом:

{
  "plugins": [
    "prettier",
    "unicorn"
  ],
  "extends": [
    "airbnb-base",
    "plugin:unicorn/recommended",
    "plugin:prettier/recommended",
    "prettier",
    "prettier/unicorn"
  ],
  "env": {
    "es6": true,
    "browser": true
  },
  rules: {
    "unicorn/prevent-abbreviations": "off"
  }
}

Стратегия При переходе на ESLint может случиться так, что в выводе ESLint отображается много ошибок. Правка по ходу дела может занять много времени или даже привести к побочным эффектам. Если вы хотите переходить постепенно, рекомендуется оставить правила в режиме warning, а не error.

Если вы теперь запустите наш пример через ESLint, используя npm run eslint -- --fix, Prettier будет выполняться через ESLint, так что вам потребуется только одна команда для запуска обоих инструментов.

Как мы можем интегрировать это в IDE?

Все современные IDE (IntelliJ и VS Code) поддерживают ESLint. Важно отметить, что в некоторых случаях вы должны передавать параметр --fix в качестве аргумента в настройках IDE, чтобы всё работало автоматически.

Почему существуют разные типы парсеров «ESLint»?

ESLint поддерживает только новый синтаксис JavaScript, который находится на финальной стадии в TC39. Возможно, не многие знают это, но компилятор Babel поддерживает функции, которые ещё не находятся на финальной стадии. Хорошо известная функция — decorator. От функции, на которой был основан Angular, отказались. Новая же функция имеет другой синтаксис и семантику. Предыдущая функция находится на второй стадии, а новая — на раннем этапе.

В этом случае ESLint вам не поможет. Либо вам нужно найти подходящий плагин для него, либо вы пишете свой собственный плагин eslint, который использует, например, анализатор babel вместо анализатора espree, который является анализатором по умолчанию в ESLint.

Смотрите настройки eslint-parser.

Как насчёт Angular и ESLint?

Команда Angular придерживается мнения, что нам следует подождать с применением ESLint. Это допустимо, потому что они хотят сделать переход как можно более плавным, но если вы всё же хотите попробовать, вот несколько советов.

Производительность и ESLint?

Может случиться, что ESLint не так эффективен, как можно было бы ожидать в некоторых частях кода, но это нормально и может произойти также в TSLint. Для решения проблемы вы можете использовать внутреннее кэширование ESLint или другого демона ESLint. Здесь вы можете найти очень полезные советы, см. пост на StackOverflow.

Prettier существует только для Javascript?

Prettier официально поддерживает несколько других языков. К ним относятся PHP, Ruby, Swift и так далее. Кроме того, существуют плагины сообщества для таких языков как Java, Kotlin, Svelte и многих других.

Как насчет ESLint v7?

Все примеры в нашей статье изначально были основаны на версии ESLint v6, но недавно была выпущена версия ESLint v7. Не волнуйтесь, даже в версии 7 ESLint работает без каких-либо изменений. Если вас интересует, что было изменено или добавлено, вы можете ознакомиться с примечаниями к выпуску ESLint v7.

Перевод статьи «Setting up efficient workflows with ESLint, Prettier and TypeScript»

Fixing problems

--fix

Эта опция инструктирует ESLint попытаться исправить как можно больше проблем.Исправления делаются в самих файлах,и выводятся только оставшиеся неисправленные проблемы.Не все проблемы можно исправить с помощью этой опции,и эта опция не работает в таких ситуациях:

1. Эта опция вызывает ошибку,когда код передается в ESLint.
2. Эта опция не влияет на код,использующий процессор,если только процессор не разрешает автоисправление.

Если вы хотите исправить код из стандартного stdin или иным образом хотите получить исправления, не записывая их в файл, используйте параметр --fix-dry-run .

--fix-dry-run

Этот параметр имеет тот же эффект, что и --fix , с одним отличием: исправления не сохраняются в файловой системе. Это позволяет исправить код из stdin (при использовании с флагом --stdin ).

Поскольку форматер по умолчанию не выводит фиксированный код, вам придется использовать другой (например , json ), чтобы получить исправления. Вот пример этого шаблона:

getSomeText | npx eslint 

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

--fix-type

Этот параметр позволяет указать тип исправлений, которые следует применять при использовании --fix или --fix-dry-run . Есть четыре типа исправлений:

1. problem — исправить возможные ошибки в коде
2. suggestion — применить исправления к коду, которые улучшают его
3. layout — применить исправления, не меняющие структуру программы (AST)
4. directive — применить исправления к встроенным директивам, таким как // eslint-disable

В командной строке можно указать один или несколько типов исправлений.Приведем несколько примеров:

npx eslint --fix --fix-type suggestion .npx eslint --fix --fix-type suggestion --fix-type problem .npx eslint --fix --fix-type suggestion,layout .

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

Ignoring files

--ignore-path

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

Example:

npx eslint --ignore-path tmp/.eslintignore file.jsnpx eslint --ignore-path .gitignore file.js

--no-ignore

Отключает исключение файлов из .eslintignore , --ignore-path , --ignore-pattern и ignorePatterns в файлах конфигурации.

Example:

npx eslint --no-ignore file.js

--ignore-pattern

Этот параметр позволяет указать шаблоны файлов, которые следует игнорировать (в дополнение к файлам в .eslintignore ). Вы можете повторить опцию, чтобы предоставить несколько шаблонов. Поддерживаемый синтаксис такой же, как и для файлов .eslintignore , которые используют те же шаблоны, что и спецификация .gitignore . Вы должны цитировать свои шаблоны, чтобы избежать интерпретации шаблонов глобусов оболочкой. .gitignore

Example:

npx eslint --ignore-pattern '/lib/' --ignore-pattern '/src/vendor/*' .

Using stdin

--stdin

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

Example:

cat myfile.js | npx eslint --stdin

--stdin-filename

Эта опция позволяет указать имя файла для обработки STDIN как.Это полезно при обработке файлов из STDIN,и у вас есть правила,которые зависят от имени файла.

Example

cat myfile.js | npx eslint --stdin --stdin-filename=myfile.js

Handling warnings

--quiet

Эта опция позволяет отключить отправку отчетов по предупреждениям.Если вы включите эту опцию,то ESLint будет сообщать только об ошибках.

Example:

npx eslint --quiet file.js

--max-warnings

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

Обычно, если ESLint запускается и не находит ошибок (только предупреждения), он завершается с успешным статусом выхода. Однако, если --max-warnings и общее количество предупреждений превышает указанный порог, ESLint выйдет со статусом ошибки. Указание порога -1 или пропуск этой опции предотвратит такое поведение.

Example:

npx eslint --max-warnings 10 file.js

Output

-o, --output-file

Включите запись отчета в файл.

Example:

npx eslint -o ./test/test.html

При указании данный формат выводится в указанное имя файла.

-f, --format

Эта опция задает выходной формат консоли.Возможные форматы:

• checkstyle
• compact
• html
• jslint-xml
• json
• junit
• стильный (по умолчанию)
• tap
• unix
• visualstudio

Example:

npx eslint -f compact file.js

Вы также можете использовать пользовательскую батарею из командной строки,указав путь к файлу пользовательской батареи.

Example:

npx eslint -f ./customformat.js file.js

Установленный npm форматтер разрешается с eslint-formatter- или без него .

Example:

npm install eslint-formatter-prettynpx eslint -f pretty file.js

При указании заданного формата выводятся данные в консоль.Если вы хотите сохранить этот вывод в файл,вы можете сделать это в командной строке следующим образом:

npx eslint -f compact file.js > results.txt

Результат будет сохранен в файле results.txt .

--color, --no-color

Эта опция принудительно включает / выключает цветной вывод. Вы можете использовать это, чтобы переопределить поведение по умолчанию, которое состоит в том, чтобы включить цветной вывод, если не обнаружен TTY, например, при eslint через cat или less .

Examples:

npx eslint 

--no-inline-config

Этот параметр предотвращает любые действия встроенных комментариев, таких как /*eslint-disable*/ или /*global foo*/ . Это позволяет вам установить конфигурацию ESLint без изменения файлов. Все встроенные комментарии к конфигурации игнорируются, например:

• /*eslint-disable*/
• /*eslint-enable*/
• /*global*/
• /*eslint*/
• /*eslint-env*/
• // eslint-disable-line
• // eslint-disable-next-line

Example:

npx eslint --no-inline-config file.js

--report-unused-disable-directives

Эта опция заставляет ESLint сообщать о комментариях директивы, таких как // eslint-disable-line если в этой строке в любом случае не было бы сообщений об ошибках. Это может быть полезно для предотвращения непредвиденного подавления будущих ошибок путем очистки старых комментариев eslint-disable , которые больше не применимы.

Предупреждение : при использовании этой опции возможно, что новые ошибки начнут сообщаться при обновлении ESLint или пользовательских правил. Например, предположим, что в правиле есть ошибка, из-за которой оно сообщает о ложном срабатывании, и eslint-disable комментарий eslint-disable для подавления неверного отчета. Если ошибка затем будет исправлена ​​в выпуске патча ESLint, комментарий eslint-disable перестанет использоваться, поскольку ESLint больше не генерирует неверный отчет. Это приведет к новому сообщению об ошибке для неиспользуемой директивы, если report-unused-disable-directives опция report-unused-disable-directives .

Example:

npx eslint --report-unused-disable-directives file.js

Caching

--cache

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

Примечание. Если вы запустите ESLint с --cache , а затем запустите ESLint без --cache , файл .eslintcache будет удален. Это необходимо, поскольку результаты lint могут измениться и сделать .eslintcache недействительным. Если вы хотите контролировать, когда файл кеша удаляется, используйте --cache-location , чтобы указать альтернативное расположение для файла кеша.

Примечание. Файлы с автофиксацией не помещаются в кеш. Последующий линтинг, который не запускает автоисправление, поместит его в кеш.

--cache-file

Путь к файлу кеша. Если не указан .eslintcache будет использоваться. Файл будет создан в каталоге, где eslint команда eslint . Не рекомендуется : используйте вместо этого --cache-location .

--cache-location

Путь к расположению кеша. Может быть файлом или каталогом. Если местоположение не указано, будет использоваться .eslintcache . В этом случае файл будет создан в каталоге, в котором eslint команда eslint .

Если указан каталог, в указанной папке будет создан файл кеша. Имя файла будет основано на хеш-коде текущего рабочего каталога (CWD). например: .cache_hashOfCWD

Важное примечание: если каталог для кеша не существует, убедитесь, что вы добавили конечный / on * nix systems или in windows. В противном случае путь будет считаться файлом.

Example:

npx eslint "src*.js" --cache --cache-location "/Users/user/.eslintcache/"

--cache-strategy

Стратегия использования кеша для обнаружения измененных файлов. Могут быть либо metadata либо content . Если стратегия не указана, будут использоваться metadata .

content стратегия может быть полезна в тех случаях , когда время модификации файлов изменится , даже если их содержание нет. Например, это может произойти во время операций git, таких как git clone, потому что git не отслеживает время изменения файла.

Example:

npx eslint "src*.js" --cache --cache-strategy content

Miscellaneous

--init

Эта опция запустит npm init @eslint/config , чтобы запустить мастер инициализации конфигурации. Он разработан, чтобы помочь новым пользователям быстро создать файл .eslintrc, ответив на несколько вопросов, выбрав популярное руководство по стилю.

Полученный конфигурационный файл будет создан в текущем каталоге.

--env-info

Эта опция выводит информацию о среде исполнения,включая версию Node,npm,а также локальные и глобальные установки ESLint.Команда ESLint может запросить эту информацию,чтобы помочь в решении ошибок.

--no-error-on-unmatched-pattern

Эта опция предотвращает ошибки, когда шаблон глобуса в кавычках или --ext не имеет соответствия. Это не предотвратит ошибки, когда ваша оболочка не может сопоставить глобус.

--exit-on-fatal-error

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

--debug

Эта опция выводит отладочную информацию на консоль. Эта информация полезна, когда вы видите проблему и вам трудно ее точно определить. Команда ESLint может запросить эту отладочную информацию, чтобы помочь устранить ошибки. Добавьте этот флаг в вызов командной строки ESLint, чтобы получить дополнительную отладочную информацию при выполнении команды (например npx eslint --debug test.js и npx eslint test.js --debug эквивалентны)

-h, --help

Эта опция выводит меню помощи,отображая все доступные опции.Все остальные опции при их наличии игнорируются.

-v, --version

Эта опция выводит текущую версию ESLint на консоль.Все остальные опции при их наличии игнорируются.

--print-config

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

Example:

npx eslint --print-config file.js

Игнорирование файлов из подшивки

ESLint поддерживает файлы .eslintignore для исключения файлов из процесса линтинга, когда ESLint работает с каталогом. Файлы, указанные как отдельные аргументы CLI, не будут исключены. Файл .eslintignore представляет собой обычный текстовый файл, содержащий по одному шаблону в строке. Он может находиться в любом из предков целевого каталога; это повлияет на файлы в содержащем его каталоге, а также на все подкаталоги. Вот простой пример файла .eslintignore :

temp.js**/vendor/*.js

Более подробную разбивку поддерживаемых шаблонов и каталогов, которые ESLint игнорирует по умолчанию, можно найти в Ignoring Code .

Exit codes

При перетаскивании файлов ESLint выходит с одним из следующих кодов выхода:

• 0 : Линтинг прошел успешно, ошибок линтинга нет. Если флаг --max-warnings установлен в n , количество предупреждений о линтинге не превышает n .
• 1 : Линтинг прошел успешно, и есть хотя бы одна ошибка линтинга, или имеется больше предупреждений линтинга, чем разрешено параметром --max-warnings .
• 2 : Линтинг не удался из-за проблемы конфигурации или внутренней ошибки.

---

© OpenJS Foundation and other contributors
Licensed under the MIT License.
https://eslint.org/docs/latest/user-guide/command-line-interface

---

---

ESLint

8.30

yoda

Требовать или запрещать условия «Йода» Некоторые проблемы, о которых сообщает это правило, автоматически устраняются с помощью параметра командной строки. Условия Йоды названы так.

Интерфейс командной строки

Для установки ESLint требуется Node.js.

Configuration Files

ESLint supports configuration files several formats: If there are multiple configuration files in same directory, ESLint will only use one.

Using a configuration from a plugin

A plugin is an npm package that can add various extensions to ESLint.