Eslint. Как правильно настроить

Eslint поможет избежать стандартных ошибок JavaScript с помощью статического анализа кода.

Устанавливаем последнюю версию Eslint, дополнительные пакеты с конфигурациями и плагин для Prettier.

npm i -D eslint \
eslint-config-airbnb-base \
eslint-config-prettier \
eslint-plugin-prettier

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

Для Drupal темы конфигурационные файлы отличаются, так как мы наследуем конфигурацию Eslint конфигурацию ядра Drupal.

npm i -D eslint \
eslint-config-airbnb \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-jsx-a11y \
eslint-plugin-prettier \
eslint-plugin-react

Игнорирование 3rd party библиотек#

Разработчику не нужно проверять код 3rd party библиотек или скомпилированного кода для production. Отключение лишних проверок сэкономит ресурсы IDE.

Для настройки игнорирования можно использовать файл .eslintignore.

Пример моего файла .eslintignore:

node_modules/**
vendor/**
dist/**

Синтаксис прост и схож с синтаксисом .gitignore.

Игнорирование файлов или отдельных строк#

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

Игнорирование всего JS файла:

// eslint-ignore

или

// eslint-disable

Игнорирование строки или фрагмента кода:

// eslint-disable
console.log('hi')
// eslint-enable

// eslint-disable-next-line
console.log('hi')

Игнорирование определённого правила:

// eslint-disable no-console

// eslint-disable-next-line no-console
console.log('hi')

// eslint-disable no-console
console.log('hi')
// eslint-enable no-console

Интеграция с Prettier#

Для интеграции Eslint с Prettier добавляем в конфигурационный файл .eslintrc.json следующую строку:

{
  "plugins": ["prettier"]
}

Примеры конфигурационных файлов#

Eslint для статического сайта#

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

{
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "root": true,
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "globals": {},
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "consistent-return": ["off"],
    "no-underscore-dangle": ["off"],
    "max-nested-callbacks": ["warn", 3],
    "import/no-mutable-exports": ["warn"],
    "import/extensions": ["off"],
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true
      }
    ],
    "no-plusplus": [
      "warn",
      {
        "allowForLoopAfterthoughts": true
      }
    ],
    "no-param-reassign": ["off"],
    "no-prototype-builtins": ["off"],
    "valid-jsdoc": [
      "warn",
      {
        "prefer": {
          "returns": "return",
          "property": "prop"
        },
        "requireReturn": false
      }
    ],
    "no-unused-vars": ["warn"],
    "operator-linebreak": ["error", "after", { "overrides": { "?": "ignore", ":": "ignore" } }],
    "quotes": ["error", "single"],
    "comma-dangle": [
      "error",
      {
        "arrays": "always-multiline",
        "objects": "always-multiline",
        "imports": "always-multiline",
        "exports": "always-multiline",
        "functions": "never"
      }
    ]
  }
}

Eslint для темы Drupal#

Конфигурация для темы Drupal отличается от конфигурации статического сайта тем, что она наследует .eslintrc.json из Drupal core.

Конфигурационный файл из ядра Drupal мы можем расширить правилами, которые считаем нужными, или которые приняты в команде. В моём случае, я вывожу ошибку при использовании jQuery.once и добавляю несколько мелких правил, связанных с запятой в конце строки и кавычками. Список правил Eslint огромен, его можно подсмотреть в документации.

{
  "extends": ["../../../core/.eslintrc.json"],
  "globals": {
    "context": true,
    "settings": true,
    "once": true
  },
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "quotes": ["error", "single"],
    "comma-dangle": [
      "error",
      {
        "arrays": "always-multiline",
        "objects": "always-multiline",
        "imports": "always-multiline",
        "exports": "always-multiline",
        "functions": "never"
      }
    ],
    "no-restricted-syntax": [
      "error",
      {
        "selector": "MemberExpression[property.name = 'once']",
        "message": "jQuery once is not allowed. Use native Drupal once implementation."
      }
    ]
  }
}

Eslint для legacy кода в Drupal#

Такая конфигурация подходит для модулей, которые никто не удосужился перевести на стандарт ES6+.

Мы наследуем legacy .eslintrc.json из Drupal core, и добавляем правила, которые считаем нужными.

{
  "extends": ["../../../core/.eslintrc.legacy.json"],
  "env": {
    "es6": false
  }
}

Надеюсь, вам не придётся больше писать legacy JavaScript, потому как это занятие не из приятных.

Хорошего кода!

Ссылки:

• Eslint docs