Почему ESLint и Prettier?

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

Prettier форматирует ваш код по конверсиям и шаблонам. Это делает ваш код «красивее», как следует из названия.

Настройка кода Visual Studio

Прежде всего, установите расширения ESLint и Prettier.

  1. Откройте VSC и на левой панели найдите «Расширения».
  2. Найдите ESLint и нажмите «установить».
  3. Найдите Prettier — средство форматирования кода и также установите его.

Во-вторых, убедитесь, что ESLint включен в настройках VSC.

Для этого нажмите шестеренку «Управление» в левом нижнем углу VSC, выберите «Настройки» и введите «ESLint». Просмотрите параметры на вкладке «Рабочая область» и убедитесь, что ESLint включен.

Настройка проекта

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

npx eslint yourfile.js // to view issues
npx eslint --fix yourfile.js // to fix issues automatically

Расширение VSC ESLint будет работать с вашими средствами проверки качества кода, настроенными в файле .eslintrc.

Вам понадобятся следующие пакеты для установки через npm: eslint, typescript, @typescript-eslint/eslint-plugin, @ typescript-eslint/parser, prettier, eslint-plugin-prettier, eslint-config-prettier.

 npm -i -D eslint typescript prettier

@typescript-eslint/eslint-plugin и @typescript-eslint/parser для анализа файлов машинописного текста.

npm -i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

eslint-plugin-prettier — это подключаемый модуль ESLInt для форматирования кода. Он содержит Prettier под капотом и реализует дополнительные правила, которые будет проверять ESLint.

eslint-config-prettier — это конфигурация ESLint. Он отключает связанные с форматированием правила, которые могут конфликтовать с Prettier, позволяя вам использовать Prettier с другими конфигурациями ESLint.

eslint-plugin-prettierи eslint-config-prettier работают вместе.

 npm -i -D eslint-plugin-prettier eslint-config-prettier

Также можно установить другие средства проверки качества кода (например, eslint-plugin-playwright).

Плагины должны быть зарегистрированы в plugins разделах, а их наборы правил активированы в extends разделе.

Чтобы настроить файл .eslintrc, выполните следующую команду и ответьте на вопросы при появлении запроса:

npx eslint --init

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

Чтобы VSC выделял более красивые ошибки, установите в .eslintrc.json следующее правило:

"prettier/prettier": "error"

Если вы получаете ошибки «[eslint] Удалить `CR` [prettier/prettier]», установите правило следующим образом:

"rules": { "prettier/prettier": [ "error", { "endOfLine": "auto" } ] }

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

//.eslintrc.json
{
   "env":{
      "browser":true,
      "es6":true
   },
   "plugins":[ // plugins used
      "@typescript-eslint",
      "eslint-plugin-playwright",
      "prettier"
   ],
   "extends":[ // rule sets used
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:playwright/playwright-test",
      "plugin:prettier/recommended",
      "prettier"
   ],
   "parser":"@typescript-eslint/parser",
   "parserOptions":{
      "ecmaVersion":"latest",
      "sourceType":"module"
   },
   "rules":{
      "prettier/prettier":[
         "error",
         {
            "endOfLine":"auto"
         }
      ]
   }
}
// .prettierrc.json
{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 80
}

Автоматическое исправление проблем с линтером при сохранении файла

Файл .vscode\settings.json со следующими настройками включает автоматическое исправление для всех автоматически устраняемых проблем ESLint/Prettier в VSC для вашего проекта:

// .vscode\settings.json
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // same as eslint --fix
    },
    "eslint.validate": [
        "typescript"
      ]
}