Настройка ESLint для Angular

9/1/2023

Оглавление

ESLint

Для настройки eslint достаточно запустить команду:

ng add @angular-eslint/schematics

Данная команда устанавливает и настраивает eslint в текущий проект, теперь, для того чтобы исправить ошибки в проекте достаточно ввести команду:

ng lint --fix

Prettier

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

Вводим команду

npm install prettier --save-dev

Затем нам нужно добавить файлы .prettierrc.json и .prettierignore в корневой каталог нашего проекта.

Внутри .prettierignore лучше добавить то, что у нас есть внутри файла .gitignore.

Затем мы можем запустить эту команду внутри нашего проекта, чтобы отформатировать его:

npx prettier --write .

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

Пример настроек:

.prettierrc.json

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": true,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "trailingComma": "es5",
  "bracketSameLine": true,
  "printWidth": 180
}

Настройте Prettier для использования в качестве плагина ESLint

Чтобы ESLint и Prettier хорошо работали вместе, нам нужно запустить Prettier как плагин ESLint. Таким образом, мы можем просто вызвать ng lint --fix, и ESLint исправит ошибки, а также отформатирует код.

npm install prettier-eslint eslint-config-prettier eslint-plugin-prettier --save-dev

Теперь нам нужно отредактировать файл .eslintrc.json, чтобы включить более красивый плагин.

.eslintrc.json

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        ...
        "plugin:prettier/recommended"
      ],
    },
  ]
}

Плагин plugin:prettier/recommended необходимо ставить в конце массива extends.

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

tsconfig.json

{
  "compilerOptions": {
    //...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Настройка VSCode и Webstorm

После редактирования файла мы хотим отформатировать его, а затем сохранить. Это то, что мы сейчас настроим как для VS Code, так и для Webstorm.

Сначала убедитесь, что у вас установлены плагины ESLint и Prettier. WebStorm имеет их поддержку из коробки.

VS Code

Для VS Code нам нужно добавить файл .vscode/settings.json с настройками:

.vscode/settings.json

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
}

Webstorm

Включить параметр Run eslint --fix во вкладке Actions On Save на странице настроек редактора.