Erreur d'analyse typographique lorsque EXTEND_ESLINT = true dans create-react-app

Question

Démonstration dépouillée - GitHub

Nous avons actuellement un projet create-react-app qui subit une migration incrémentielle de Flow vers TypeScript. Cela signifiait désactiver certaines règles ESLint indésirables. Afin de personnaliser ESLint, j'ai ajouté EXTEND_ESLINT=true à la .env fichier.

Avant d'ajouter ce paramètre, mon code TypeScript compile correctement. Ensuite, j'obtiens des erreurs d'analyse sur certaines grammaires TypeScript (mais pas toutes).

// Type guards
export function f0<T>(x: T|undefined): x is T { ...

// Constrained generics
export function f1<T extends number>(x: T) { ...

// Type assertions
... return x as T

Il peut y avoir d'autres syntaxes non reconnues que je n'ai pas encore trouvées.

Jusqu'à présent

• Je n'ai trouvé aucun problème ou rapport de bogue similaire. Je comprends que certaines fonctionnalités TypeScript ne sont pas disponibles dans la version actuelle de CRA, comme const enum, mais je n'ai trouvé aucune mention des fonctionnalités répertoriées ci-dessus. Je suis également sûr que mes les versions TypeScript et ESLint sont compatibles avec TypeScript-eslint.

• J'ai essayé de nombreux .eslintrc combinaisons. J'ai laissé quelques-uns des plus prometteurs dans le .eslintrc.js fichier dans le référentiel attaché. La configuration actuelle est celle recommandée par create-react-app , où le linting TypeScript est configuré dans la section overrides.

• La configuration ESLint TypeScript a été installée en suivant les instructions de TypeScript-eslint monorepo , en particulier, TypeScript-eslint/parser et TypeScript-eslint/eslint-plugin

Solutions

• L'éjection n'est pas une option. Si aucune autre solution ne peut être trouvée, je préfère simplement faire la conversion Flow -> TS en une seule fois.

• Nous étendons actuellement notre configuration CRA avec personnaliser-cra . Les solutions impliquant cela sont les bienvenues.

• J'apprécie la flexibilité du .eslintrc me donne mais je suis heureux de le supprimer, à condition de pouvoir encore fixer des règles sur les peluches.

Notes

• J'ai inclus customize-cra dans le dépôt de démonstration pour refléter fidèlement notre projet, mais le problème persiste sans customize-cra, indiquant que ce n'est probablement pas le coupable.

• Voir src/components/TestComponent/fn.ts pour des exemples de la syntaxe du problème.

• Mon hypothèse actuelle est qu'il y a une configuration dans la configuration CRA ESLint qui n'est pas reportée lorsque EXTEND_ESLINT=true.

Mises à jour

• J'ai ouvert un problème sur create-react-app
• Solution de contournement partielle répertoriée sur le problème. Toujours pas idéal.

Answer 1

Pour toute autre personne rencontrant ce problème, il existe un problème ouvert à l'ARC qui semble être la cause.