Използване на ESLint с TypeScript (и приставката React Hooks Rule)
TSLint в момента е стандартът за linting TypeScript. Това обаче ще се промени. ESLint скоро ще замени TSLint и TSLint ще бъде премахнат. Както е показано в пътната карта на TypeScript и тази публикация в блога: https://eslint.org/blog/2019/01/future-typescript-eslint
Вече можем да използваме ESLint с TypeScript и поддръжката за него само ще се подобрява, тъй като всички правила на TypeScript ще бъдат пренесени в проекта typescript-eslint
. Използването на ESLint с TypeScript също ще ни позволи да използваме ESLint правила, които изобщо не са налични за TSLint. (Като правилата на React-hooks 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.
Плъгинът @typescript-eslint
всъщност включва специфични правила за typescript. Всички правила могат да се видят тук: 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 и е публикуван от Dirk Baeumer.
След като инсталираме разширението, трябва да променим някои настройки на 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" } }
Новите неща са смели.
Сега това е. Наистина. 🌈