Введение в ESLint
ESLint — это инструмент проверки кода, который распознает ECMAScript и создает отчеты в соответствии с правилами, используя его, чтобы избежать низкоуровневых ошибок и унифицировать стиль кода. Если код eslint проверяется каждый раз перед отправкой кода, служба не будет аварийно завершать работу из-за таких ошибок, как поле, не определенное как неопределенное или пустое, а качество кода проекта можно будет эффективно контролировать.
Во многом он похож на JSLint, JSHint, за некоторыми исключениями:
- ESLint использует Espree для разбора JavaScript.
- ESLint использует AST для анализа закономерностей в коде.
- ESLint полностью подключаемый. Каждое правило является плагином, и вы можете добавить дополнительные правила во время выполнения.
использовать
Установить
ESLint поддерживает различные методы установки, которые можно установить через npm или использовать в webpack (eslint-loader) и Gulp.js (gulp-eslint).
Установить глобально
npm i -g eslint
Частичная установка (рекомендуется)
npm i -D eslint
инициализация
После завершения установки создайте новый файл конфигурации .eslintrc.js или используйте следующую командную строку для автоматического создания следующей команды:
eslint --init
настроить
Примечание. Если ваша предыдущая версия ниже 1.0.0, проверьтеРуководство по миграции. После запуска eslint --init в вашей папке автоматически создается файл .eslintrc. Содержимое файла примерно такое:
{
"env": {
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "script"
},
"rules": {
"no-console": 0,
"no-unused-vars": "error",
"no-use-before-define": "error",
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
],
"curly": ["error", "all"],
"default-case": "error",
"no-else-return": "error",
"no-empty-function": "error",
"no-implicit-coercion": "error",
"no-invalid-this": "error",
"no-loop-func": "error",
"no-multi-spaces": "error",
"no-new-func": "error",
"no-useless-return": "error",
"global-require": "error",
"no-path-concat": "error",
"no-sync": "error",
"array-bracket-spacing": [
"error",
"never"
],
"block-spacing": [
"error",
"always"
],
"brace-style": [
"error",
"1tbs"
],
"camelcase": "error",
"comma-dangle": [
"error",
"always-multiline"
],
"comma-spacing": [
"error",
{ "before": false, "after": true }
],
"comma-style": [
"error",
"last"
],
"key-spacing": [
"error",
{ "beforeColon": false, "afterColon": true }
],
"lines-around-comment": [
"error",
{ "beforeBlockComment": true }
],
"newline-after-var": [
"error",
"always"
],
"newline-before-return": "error",
"no-multi-assign": "error",
"max-params": [1, 3],
"new-cap": [
"error",
{
"newIsCap": true,
"capIsNew": false
}
],
"no-multiple-empty-lines": [
"error",
{
"max": 2
}
],
"no-shadow-restricted-names": "error",
"no-undef-init": "error",
"keyword-spacing": "error",
"space-before-blocks": [
"error",
"always"
]
}
}
Настраиваемая информация, поддерживаемая ESlint, в основном делится на три категории:
- Среды: в какой среде будет выполняться сценарий Javascript (например, nodejs, браузер, commonjs и т. д.), все среды, поддерживаемые ESlint, можно найти вОфициальный сайтнашел.
- Globals: дополнительные глобальные переменные, к которым скрипт должен получить доступ при выполнении кода.
- Правила: Включите определенные правила, и вы также можете установить уровень правил.
Правила обнаружения
Далее в конфигурационном файле можно задать некоторые правила. Три уровня правил ESLint:
- "off" или 0: отключить правило.
- «предупреждать» или 1: включить правило и действовать как предупреждение (не влияет на код выхода).
- «ошибка» или 2: открыть правило как ошибку (код выхода будет 1).
Например, некоторые правила конфигурации ниже:
-
"console":"off"Отключить консоль. -
"no-unused-vars":2Неиспользуемые переменные запрещены. -
"no-use-before-define":2Переменные нельзя использовать до того, как они будут определены. -
"linebreak-style":[2, "unix"]Принудительно использовать согласованный стиль новой строки. -
"quotes": ["error", "single"]Принудительно использовать согласованные одинарные кавычки. -
"semi":["error", "always"]Управляет номерами деталей в конце строки. -
"curly":["error", "all"]Применять согласованный стиль скобок для всех операторов управления. -
"default-case": "error"Оператор switch принудительно использует ветку по умолчанию, вы также можете добавить комментарий // no default, чтобы скрыть это предупреждение. -
"no-else-return":"error"Запрещено иметь else после возврата в операторе if. -
"no-implicit-coercion": "error"Пустые функции запрещены, если функция содержит комментарий, она не будет считаться проблемной. -
"no-invalid-this": "error"Ключевое слово this запрещено вне классов и объектов класса. -
"no-loop-func":"error"Объявления функций и выражения внутри циклов запрещены. -
"no-multi-spaces":"error"Использование нескольких пробелов запрещено. -
"no-new-func":"error"Использование оператора new для пустых объектов Function запрещено. -
"no-useless-return":"error"Возврат без содержания запрещен; -
"global-require": "error"Требуется, чтобы функция require() отображалась в области модуля верхнего уровня. -
"no-path-concat": "error"запретить объединение строк имени каталога и имени файла -
"no-sync": "error"Отключите методы синхронизации. -
"array-bracket-spacing": ["error", "never"]Элементы указанного массива должны быть разделены пробелами (, после), никогда не должны быть параметрами: пробелы не допускаются до и после [], и всегда должны использоваться параметры: пробелы должны использоваться до и после []. -
"block-spacing": ["error", "always"]Запрещать или применять пробелы в однострочных блоках кода (отключено). "brace-style": ["error", "1tbs"]-
"camelcase": "error"Принудительно использовать имя в верблюжьем регистре. -
"comma-dangle": ["error", "always-multiline"]Последняя запятая пар ключ-значение массива и объекта, параметр never: без запятой в конце, параметр always: должен иметь запятую в конце, always-multiline: многострочный режим должен содержать запятую, однострочный режим не должен содержать запятую. -
"comma-spacing": ["error", { "before": false, "after": true }]Управляет пробелами до и после запятых. -
"comma-style": ["error", "last"]Определяет, будут ли запятые появляться в конце строки или в начале строки (конец строки по умолчанию). -
"key-spacing": ["error", { "beforeColon": false, "afterColon": true }]Это правило указывает, что в синтаксисе литерала объекта пробелы между ключом и значением, отсутствие пробела перед двоеточием и один пробел после двоеточия. -
"lines-around-comment": ["error", { "beforeBlockComment": true }]Требуются пустые строки вокруг комментариев (требуется пустая строка перед комментариями на уровне блока). -
"newline-after-var": ["error", "always"]Требовать или запрещать оператор var после того, как в операторе есть пустая строка. -
"newline-before-return": "error"Перед оператором возврата требуется пустая строка. -
"no-multi-assign": "error"Присваивания связанным переменным могут привести к неожиданным результатам и их трудно читать, а множественные присвоения в одном операторе не допускаются. -
"max-params": [1, 3] functionМаксимальное количество параметров, разрешенных в определении. -
"new-cap": ["error", { "newIsCap": true, "capIsNew": false}]Конструкторы пишутся с большой буквы. -
"no-multiple-empty-lines": ["error", {"max": 2}]Пустые строки не могут превышать 2 строки. -
"no-shadow-restricted-names": "error"Запрещены операции присваивания некоторым ключевым словам или зарезервированным словам, таким как NaN, Infinity, undefined, eval, arguments и т. д. -
"no-undef-init": "error"Запрещено присваивать значение undefined переменной. -
"keyword-spacing": "error"Пробелы необходимы до и после ключевого слова. -
"space-before-blocks": ["error","always"]Принудительно согласовывать пробелы перед блоками.
игнорировать обнаружение
Поскольку существуют правила обнаружения, должны быть и конфигурации, игнорирующие обнаружение. Чтобы добавить правило для игнорирования обнаружения, сначала создайте файл .eslintignore в корневом каталоге проекта, чтобы указать ESLint игнорировать файлы или каталоги, которые не нужно обнаруживать.
Или настроить объекты на игнорирование обнаружения через файл package.json, например:
{
"name": "my_project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": ""
},
"eslintConfig": { // 也可配置eslint
"env": {
"es6": true,
"node": true
}
},
"eslintIgnore": ["test.js"]
}
Использование ESLint в Gulp
Помимо метода npm, ESLint также поддерживает использование подключаемого модуля Gulp, который необходимо установить перед использованием.
npm install gulp-eslint
Если вы хотите использовать gulp-eslint для проверки правил eslint, вы можете использовать следующие методы:
var gulp = require('gulp');
var eslint = require('gulp-eslint');
gulp.task('lint',function(){
return gulp.src(['app/**/*.js']) //指定的校验路径
.pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校验文件
.pipe(eslint.format())
});
Советы ESLint
eslint-config-standard
eslint-config-standard — это стандартная библиотека обнаружения правил ESLint, поэтому вам нужно только установить эту библиотеку, чтобы не настраивать правила ESLint.
{
"extends": "standard"
}
После выполнения вышеуказанных шагов вы можете использовать инструмент ESLint для проверки кода в проекте.
В проекте Vue файл .vue написан в формате, похожем на html, а не в стандартном файле JavaScript.ESLint не может напрямую распознать код JavaScript в файле .vue.Тогда нам нужно установить инструмент в это время.Установка команда выглядит следующим образом:
npm i eslint-plugin-html -D
Поскольку код JavaScript, записанный в файле vue, также записан в теге скрипта, функция этого плагина состоит в том, чтобы идентифицировать код JS в теге скрипта в файле, что официально рекомендуется. Итак, нам нужно добавить новый скрипт в файл .eslintrc:
{
"extends": "standard",
"plugins": [
"html"
]
}
После выполнения вышеуказанных шагов мы переходим к сценариям в файле package.json, чтобы добавить новую команду:
"lint": "eslint --ext .js --ext .jsx --ext .vue src/"
В приведенной выше команде скрипта суффикс указанного файла обнаружения, например .js, .jsx, .vue и т. д., должен быть указан после ext, а затем должен быть указан параметр. какой каталог мы хотим определить.Как правило, файлы проекта находятся в src, поэтому просто напишите src/ сзади.
Теперь мы можем ввести в терминал $npm run lint, чтобы проверить, соответствует ли код в проекте правилам ESLint.
ESLint автоматически исправляет ошибки
Вообще говоря, когда мы используем команду «npm run lint» для обнаружения JavaScript, в основном будет много ошибок, в основном полноэкранные ошибки и предупреждения.
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
Когда мы зайдем в терминал, чтобы выполнить команду: $ npm run lint-fix, вы обнаружите, что красных ошибок не так много, а полноэкранных ошибок и предупреждений нет.
Конечно, есть и универсальный способ: написать /* eslint-disable */ в первой строке JS-файла, сообщающего об ошибке, подробнее см.Command line Interface
eslint-loader
Иногда мы надеемся, что в процессе разработки проекта ESLint можно будет автоматически проверять каждый раз при модификации кода. Поскольку мы делаем проверку в процессе изменения кода, если есть ошибка, мы можем быстро найти проблему и решить проблему. На данный момент мы можем использовать плагин eslint-loader.
npm i eslint-loader babel-eslint -D
После выполнения операции установки нам также необходимо настроить следующий скрипт в файле .eslintrc:
{
"extends": "standard",
"plugins": [
"html"
],
"parser": "babel-eslint"
}
Зачем нам нужно настраивать парсер? Поскольку наш проект основан на веб-пакете, код в проекте должен обрабатываться Babel. Синтаксис, обрабатываемый babel, может не иметь специальной поддержки ESLint, и тогда возникнут некоторые проблемы, когда мы будем использовать загрузчик для обработки ESLint. Так что в целом для разработки проектов мы используем webpack и babel, укажем, что его парсер использует babel-eslint.
В то же время для проектов, построенных с помощью webpack, вам также необходимо добавить в правила под модулем webpack.config.base.js следующий скрипт:
rules: [
{
test: /\.(vue|js|jsx)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
enforce: 'pre'
},
......
]
Затем мы можем использовать команду$ npm run devОбнаружение ошибок ESLint можно выполнить в среде разработки.
Прикрепил:cn.eslint.org/ Ууууу. ИМО OC.com/article/322…