使用打字稿反应CRA不能与eslint一起使用

Question

我正在尝试将linting集成到使用CRA（使用打字稿）创建的应用中。

在终端上重现的步骤

• create-react-app my-app --typescript
• ./node_modules/.bin/eslint --init
  • 选择：检查语法，发现问题并强制执行代码样式
  • select：JavaScript模块（导入/导出）
  • 选择：反应
  • y for your project use typescript
  • 选择：浏览器
  • 使用的流行风格指南是airbnb

我的.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"
    }
}

我通常通过删除半冒号来查看vs代码是否突出显示，从而检查皮棉是否有效。

但是这不会发生。

Answer 1

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

"eslint.validate": [
  "javascript",
  "javascriptreact",
  {"language": "typescript","autoFix": true},
  {"language": "typescriptreact","autoFix": true}
],

Answer 2

React CRA中有两种类型的设置ESLint。

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

由于互联网上有太多（不需要的）信息，所以我在here中以一种更为简单的方式撰写了有关此信息的文章。