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

Posted 2023-03-13

【中文标题】VSC 中的 ESLint 不适用于 .ts 和 .tsx 文件

【英文标题】：ESLint in VSC not working for .ts and .tsx files

【发布时间】：2019-10-26 17:15:47

【问题描述】：

我在 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，整个项目都会被正确地 linted。我需要做什么才能让项目在 VSC 中使用红色波浪线动态 lint？

【参考方案1】：

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

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

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

【讨论】：

这很棒。我在 ESLint 配置和文档上花费了太多时间，这解决了它！

@Siva-Dev-Wizard 我不再 100% 确定这个答案是“正确的方法”。我认为 vscode 中的 eslint 插件现在应该开箱即用地扫描 TypeScript/ReactTS 文件。我会在稍后对其进行研究后更新此答案，但要尽可能保持正确。

有道理。我也会检查一下。

添加上述行后仍然无法正常工作。

“不工作”不可调试。发生什么了？ JS 好用吗？等等。