用类型记录对CRA作出反应，而不是使用eslint

Question

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

在终端上复制的步骤

• create-react-app my-app --typescript
• ./node_modules/.bin/eslint --init
  • 选中以下选项:检查语法、查找问题和强制执行代码样式
  • 选择: JavaScript模块(导入/导出)
  • 选择: React
  • 你的项目是否使用类型记录？
  • 选中:浏览器
  • 流行的风格指南是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"
    }
}

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

然而，这种情况并没有发生。

Answer 1

在VS代码上向settings.json添加以下代码片段是可行的。

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

Answer 2

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

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

由于互联网上有太多(不需要)的信息，我在这里中用一种简单得多的方式写了一篇关于这一点的文章。