用 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和保存文件時）

由於互聯網上有太多（不需要）信息，我在這里以更簡單的方式創建了一篇關於此的文章。