typescript - VSC 中的 ESLint 不适用于 .ts 和 .tsx 文件

Question

我在 VSC 中安装了 ESLint 扩展，它适用于 .js 文件。现在我已经在我的 React 项目中引入了 Typescript，ESLint 不再在 VSC 中运行。

我的项目根目录中有一个 .eslintrc 文件，如下所示：

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended"
  ],
  "env": {
    "browser": true,
    "node": true,
    "serviceworker": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "@typescript-eslint/indent": ["error", 2],
    "indent": "off",
    "jsx-a11y/anchor-is-valid": ["error", {
      "aspects": ["invalidHref", "preferButton"]
    }],
    "no-console": ["error", {
      "allow": ["error", "info"]
    }],
    "react/no-danger": 0
  }
}

我有一个如下所示的 npm 脚本：

"scripts": {
  "eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
},

如果我运行npm run eslint，整个项目都会被正确地整理。我需要做些什么才能让项目在 VSC 中使用红色波浪线即时进行 lint？

标签： typescriptvisual-studio-codeeslint

Answer 1

假设您已eslint在 Visual Studio Code 上安装了扩展，您应该将以下内容添加到您的设置中。

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

这将使 eslint 查看 typescript 文件以及 javascript 文件。