@astral/eslint-config-react-ts

@astral/eslint-config-react-ts

Eslint config for react with typescript

Usage

Migration Guide 2.0

Отказ от поддержки prettier v2

Были обновлены пакеты:

• prettier: "^3.0.3",
• eslint: "^8.52.0",
• eslint-plugin-prettier: "^5.0.1"
• stylelint: "^15.11.0",
• stylelint-config-standard: "^34.0.0",
• stylelint-prettier: "^4.0.2"

Для корректной работы нужно будет обновить зависимости которые используются у вас в проекте.

Разделение импорта типов и реализации

Было добавлено новое правило:

 "@typescript-eslint/consistent-type-imports": "error" 

Пример правильного использования

import { type Foo } from 'Foo';
import type Bar from 'Bar';
type T = Foo;
const x: Bar = 1;

Installation

Npm

npm i eslint prettier @astral/eslint-config-react-ts --save-dev

Yarn

yarn add eslint prettier @astral/eslint-config-react-ts -D

.eslintrc

{
  "extends": ["@astral/eslint-config-react-ts"]
}

.prettierrc файл не нужен так, как он сконфигурирован внутри @astral/eslint-config-react-ts

Troubleshooting

1. Производительность ESLint

При использовании данного конфига, могут возникнуть следующие проблемы:

• [FATAL ERROR]: Reached heap limit Allocation failed – JavaScript heap out of memory
• No results for Component.tsx after 20 sec
• Problem with ESLint reformatting: Component.tsx: Cannot start language service process
• Очень долгий парсинг первого файла (видно при запуске линтера с --debug флагом)

Плагин import внутри себя использует собственный парсер, который не дружит с большим количеством path aliases.

Парсер @typescript-eslint/parser не дружит с монорепозиторием (see: https://github.com/typescript-eslint/typescript-eslint/issues/1192)

Решение

Создать копию tsconfig без "paths": {...} и с опцией "forceConsistentCasingInFileNames": false

Пример получившегося tsconfig.eslint.json:

{
  "extends": "../../../tooling/client/tsconfig.json",
  "include": ["./**/*.js", "./**/*.ts", "./**/*.tsx"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "baseUrl": ".",
    "forceConsistentCasingInFileNames": false
  }
}

В .eslintrc файле указать путь к новому config файлу:

  "parserOptions": {
    "project": "tsconfig.eslint.json"
  },