用 typescript 反应 CRA 不能与 eslint 一起使用

Question

我正在尝试将 linting 集成到使用 CRA 创建的应用程序中，该应用程序使用 typescript。

在终端上重现的步骤

• create-react-app my-app --typescript
• ./node_modules/.bin/eslint --init
  • select：检查语法、发现问题和强制代码风格
  • select：JavaScript 模块（导入/导出）
  • select：反应
  • y 你的项目是否使用 typescript
  • select：浏览器
  • 使用的流行风格指南是airbnb

My.eslintrc json 文件如下所示

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "airbnb"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
      "semi":"warn"
    }
}

我通常通过删除分号来检查 lint 是否有效，以查看 vs 代码是否突出显示。

然而它不会发生。

Answer 1

将以下代码段添加到 VS 代码上的 settings.json 有效。

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
],

Answer 2

在 React CRA 中有两种设置 ESLint。

1. 本地 ESLint（仅影响 VSCode 等编辑器）
2. 编译时的 ESLint（运行yarn start和保存文件时）

由于互联网上有太多（不需要）信息，我在这里以更简单的方式创建了一篇关于此的文章。