Сводка по использованию ESlint

ESLint

Вот два распространенных стиля программирования при написании кода Js.

const foo = 'Foo'

const foo = "Foo";

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

ESlintИнструменты могут не только унифицировать этот стиль, но и проверять код на грамматическое соответствие во время написания.

использование эслинта

  1. Установить
npm install eslint -g  ## 为了使用 eslint cli 功能， 这里使用了全局安装
  1. Создайте новый проект в корневом каталоге проекта.eslintrcдокумент
{
    "rules": {
      "indent": 2,
      "no-unused-vars": 2,
      "no-alert": 2
    }, 
    "env": {
       "browser": true
    }
}
  1. новыйindex.jsдокумент
var unused = 'I have no purpose!'

alert(unused)

function foo () {
    var message = 'Hello, World!';
        alert(message);
}

foo()
  1. использоватьeslint index.jsПроверьте код.

В командной строке выводятся три ошибки и возникает ошибка行:列 错误等级 错误说明 对应的 eslint rule

 7:1  error  Expected indentation of 4 spaces but found 8  indent
  1. использовать--fixпараметры, чтобы решить проблему.
eslint index.js --fix

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

Способ настройки ESlint

  1. использоватьeslintrc.js,eslintrc.json,eslintrc.yml,.eslintrcконфигурация файла.

  2. Помимо использования файла конфигурации, его также можно настроить внутри файла.eslintправило.

// index.js

var unused = 'I have no purpose!'

// eslint-disable-next-line no-alert  
alert(unused)

function foo () {
    var message = 'Hello, World!';
    // eslint-disable-next-line indent
        console.log(message);
}

foo()
  1. существуетpackage.jsonиспользуется вeslintConfigполя для настройки
{
    "eslintConfig": {
        "rules": {
            ...
        }, 
        "extends": []
    }
}

Укажите поддерживаемую версию JavaScript

при использовании в кодеconst letЖдатьES6грамматика,ESlintсообщит об ошибке.

Это потому чтоESlintПоддержка по умолчаниюJavaScript3 и 5 версии. вышеESПоддержка синтаксиса требует ручной настройки.

ESlintПараметры парсера можно использовать в файле конфигурацииparserOptionsнастройки свойств. Доступные варианты:

  1. ecmaVersionЗначение по умолчанию — 3, 5 (по умолчанию), вы можете использовать 6, 7, 8 или 9, чтобы указать версию ECMAScript, которую вы хотите использовать. Вы также можете использовать номер версии с названием года, чтобы указать 2015 (аналогично 6), 2016 (аналогично 7), 2017 (аналогично 8) или 2018 (аналогично 9)

  2. sourceTypeУстановите «скрипт» (по умолчанию) или «модуль» (если ваш код является модулем ECMAScript).

  3. ecmaFeaturesЭто объект, представляющий дополнительные возможности языка, которые вы хотите использовать:

    • globalReturnРазрешить оператор возврата в глобальной области видимости
    • impliedStrictвключить глобальныйstrict mode
    • jsxВключить JSX
    • experimentalObjectRestSpreadВключить поддержку свойств rest/spread экспериментального объекта
{
    "paarserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    }
}

::: tip

  1. , поддержка синтаксиса JSX не используется для поддержки React. React использует определенный синтаксис JSX, который ESLint не распознает. Если вы используете React и хотите получить семантическую поддержку React, используйтеeslint-plugin-react.
  2. Поддержка синтаксиса ES6 не означает поддержку новых глобальных переменных или типов ES6 (таких как новые типы, такие как Set), за исключением того, что вам нужно использовать{ "parserOptions": { "ecmaVersion": 6 } }включатьES6поддержка синтаксиса, также требуется{"env": {"es6": true}}(Когда эта конфигурация включена, сопряжение будет автоматически включеноES6поддержка синтаксиса) :::

Настройка среды выполнения

Среда определяет предопределенный набор глобальных переменных.JsПри работе в разных средах будут разные глобальные переменные, например, вNodeбудет существовать в окружающей средеglobalпеременная, при запускеbrowserбудет существовать вwindowПеременная.ESlintГлобальные переменные в коде будут идентифицированы в соответствии с текущей рабочей средой.Если среда выполнения не соответствует глобальным переменным, будет сообщено об ошибке.

Используйте ключевое слово env, чтобы указать среды, которые вы хотите включить в файле конфигурации, и установите для них значение true.

{
    "env": {
        "browser": true,
        "node": true
    }
}

болееenvСправочник по конфигурацииSpecifying Environments

Определение специальных глобальных переменных

При доступе к имени переменной, которое не определено в исходном файле,no-undefБудет выдано предупреждение. Это доступно вESlintиспользуется в файле конфигурацииglobalsУстановите только глобальную переменную.

{
    "globals": {
        "var1": true,
        "var2": true
    }
}

Таким образом, вы не можете определить в кодеvar1 var2Эти две переменные используются напрямую.

Настройка правил

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

кindentВозьмем для примера правило, по умолчанию там четыре пробела.Когда вам нужно изменить это правило, вы можете написать его следующими способами:

// 使用默认4个空格。 错误等级为 2 
"indent": 2

// 使用 2 个空格。 错误等级为 2
"indent": [2, 2]

// 使用 tab 缩进。 错误等级为 2
"indent": [2, "tab"]

// 缩进为2个空格, 同时，switch...case结构的case也必须缩进
"indent": [2, 2, {"SwitchCase": 2}]

можно увидеть,RulesПравило конфигурации для представляет собой массив, который может содержать три параметра (только первый может быть строкой):

  1. Первый параметр — это уровень ошибки, вы можете использовать 0 илиoff(не правило), 1 илиwarn(включить правило, использовать ошибки уровня предупреждений, не вызывать выход из программы), 2 илиerror(Включите правило, используйте ошибку уровня ошибки, это приведет к выходу из программы)

  2. Второй параметр — вариант правила, который в примере настраивается отдельноindentпо умолчанию 4 пробела, 2 пробела,tabотступ.

  3. Третий параметр — это дополнительный параметр, который используется в примере для включенияswitch...caseПроверка отступа.

Расширить конфигурацию

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

eslint:recommended

ESlintпри условииeslint:recommendedконфигурация, которая предоставляет набор основных правил, которые можно использоватьextendsсвойства, чтобы наследовать эти правила.

"extends": "eslint:recommended"

::: tip

  1. eslint:recommendedОписаны описание и конфигурация по умолчанию для каждого правила.
  2. extendsКогда есть только одно значение атрибута, это может быть строка, а когда их больше одного, это массив строк. :::

Другие наборы правил

В дополнение к наследованию по умолчаниюeslint:recommended, также могут наследовать некоторые отличные наборы правил с открытым исходным кодом, такие какeslint-plugin-standard, метод использования также относительно прост.

  1. Установить npm-пакет
npm install -D eslint-plugin-standard
  1. настроить
{
    "extends": ["eslint:recommended", "standard"]
}

::: tip

  1. В ESlint при использовании внешних пакетов npm опустите предыдущийexlint-plugin-
  2. Переопределить, если необходимоextendsконфигурация в , можно найти вrulesперезаписать поле :::

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

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

  1. установить одинESlintизnpmМешок.
npm install eslint-plugin-react --save-dev
  1. использоватьpluginsплагин импорта атрибутов
{
    "plugins": "react"
}

::: наконечник В ESlint при использовании внешних пакетов npm опустите предыдущийexlint-plugin- :::

  1. использоватьextendsНаследовать правило от плагина
{
    "plugins": "react", 
    "extends": ["eslint:recommended", "plugin:react/recommended"]
}

игнорировать конфигурацию файла

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

**/*.js

или также вpackage.jsonконфигурация в файлеeslintIgnoreполе для указания игнорирования файлов

{
    "eslintIgnore": ["hello.js", "world.js"]
}
Категории