Използване на 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"
  }
}

Новите неща са смели.

Сега това е. Наистина. 🌈