Использование ESLint с TypeScript (и плагином React Hooks Rule)

TSLint в настоящее время является стандартом для линтинга TypeScript. Однако это изменится. ESLint скоро заменит TSLint, а TSLint будет устарел. Как показано в дорожной карте TypeScript и в этом сообщении в блоге: https://eslint.org/blog/2019/01/future-typescript-eslint

Мы уже можем использовать ESLint с TypeScript, и его поддержка будет только улучшаться, поскольку все правила TypeScript будут перенесены в проект typescript-eslint. Использование ESLint с TypeScript также позволит нам использовать правила ESLint, которые вообще недоступны для TSLint. (Как и правила Lint-хуков, выпущенные несколько часов назад на момент написания).

Добавление ESLint в существующий проект TypeScript

Мы можем установить все наши зависимости с помощью npm

npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

Теперь нам нужно создать .eslintrc.json файл в корневой папке нашего проекта и указать ESLint, как работать с TypeScript. Поместив это 👇 в наш .eslintrc.json файл:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "jsx": true,
    "useJSXTextNode": true
  },
  "extends": ["plugin:@typescript-eslint/recommended"],
  "plugins": ["@typescript-eslint"]
}

Первая строка указывает eslint использовать парсер TypeScript, а parserOptions находится здесь, чтобы сообщить парсеру TypeScript, что мы хотим использовать синтаксис JSX, вы можете удалить это, если вы не используете React или что-то подобное.
Расширение просто означает, что мы хотим использовать рекомендуемые правила, предоставляемые плагином машинописного текста.
Плагин @typescript-eslint фактически включает специфические правила машинописного текста. Все правила можно увидеть здесь: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules

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

При использовании prettier мы можем сказать eslint, что ему не нужно заботиться о правилах форматирования, поскольку Prettier уже работает с ними, установив prettier локально:

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

Затем мы можем расширить нашу конфигурацию eslint из более красивой конфигурации, которая в основном просто отключает все правила, а более симпатичные обрабатывают для нас. Измените свой eslintrc.json файл, чтобы он выглядел примерно так:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "jsx": true,
    "useJSXTextNode": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "plugins": ["@typescript-eslint"]
}

Сообщаем VSCode, что ESLint проверяет наш TypeScript

Существует отличное расширение для VSCode для интеграции ESLint в наш редактор. Неудивительно, что он называется ESLint и публикуется Дирком Баэмером.

После установки расширения нам нужно изменить некоторые настройки VSCode в разделе: File > Preferences > Settings. Здесь мы хотим перейти в представление JSON наших настроек, в правом верхнем углу есть кнопка с {}.
Здесь нам нужно добавить этот конфиг 👇:

"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "typescript",
    "autoFix": true
  },
  {
    "language": "typescriptreact",
    "autoFix": true
  }
]

Вот и все 👍, если вы не хотите добавить правила React Hooks в свой esconfig.

Добавление правил React Hooks

Установите плагин:

npm install eslint-plugin-react-hooks --save-dev

И добавляем в .eslintrc.json файл:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "jsx": true,
    "useJSXTextNode": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "plugins": ["@typescript-eslint", "react-hooks"]
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Новый материал выделен жирным шрифтом.

Вот и все. Серьезно. 🌈