Использование 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" } }
Новый материал выделен жирным шрифтом.
Вот и все. Серьезно. 🌈