使用 typescript-eslint 在 VSCode 编辑器中未显示 Typescript 错误

Posted 2023-03-13

【中文标题】使用 typescript-eslint 在 VSCode 编辑器中未显示 Typescript 错误

【英文标题】：Typescript errors not showing in VSCode editor using typescript-eslint

【发布时间】：2020-10-02 14:22:21

【问题描述】：

我的问题是我无法使用 eslint 和 @typescript-eslint 在编辑器中显示打字稿错误（在 VSCode for MacOs 上）。

显示 Eslint 错误，但未显示此屏幕截图中显示的类型错误（tsx 文件）

这里显示了关于未使用变量的问题，但调用typedFunction 时的类型错误不是。如果我在终端中运行tsc，则会引发错误。

Eslint 扩展安装在我的 VSCode 编辑器中。 这是我的 .eslintrc ：

  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "react-app",
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/react"
  ],
  "plugins": [
    "import",
    "prefer-object-spread",
    "prettier",
    "react",
    "@typescript-eslint"
  ],
  "env": 
    "browser": true,
    "es6": true,
    "node": true
  ,
  "globals": 
    "alert": true,
    "document": true,
    "localStorage": true,
    "navigator": true,
    "window": true,
    "htmlElement": true
  ,
  "rules": 
    "prettier/prettier": "error",
    "import/extensions": 0,
    "import/no-extraneous-dependencies": [
      "error",
      
        "devDependencies": true,
        "optionalDependencies": false,
        "peerDependencies": false
      
    ],
    "import/no-unresolved": 0,
    "import/prefer-default-export": 0,
    "prefer-object-spread/prefer-object-spread": 2,
    "react/destructuring-assignment": 0,
    "react/jsx-filename-extension": [1,  "extensions": [".ts", ".tsx"] ],
    "react/no-array-index-key": 2,
    "react/prefer-stateless-function": 0,
    "react/prop-types": 0,
    "react/require-default-props": 0,
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/explicit-member-accessibility": 0,
    "@typescript-eslint/camelcase": 0,
    "@typescript-eslint/interface-name-prefix": 0,
    "complexity": ["error", 8],
    "max-lines": ["error", 200],
    "max-depth": ["error", 3],
    "max-params": ["error", 4]
  

我尝试删除所有 VSCode 扩展，卸载 VSCode，重新启动计算机，但没有任何效果。 我的 VSCode 版本是 1.46.0

【问题讨论】：

打字稿需要 tslint。

不，您可以将 eslint 用于打字稿。 @OP 你能检查一下 VSCode 使用的是什么 Typescript 版本吗？你能试试其他版本吗？在命令面板中选择：Typescript：选择 Typescript 版本

感谢您的回答。当我打开命令调色板类型 Typescript 时，不返回任何结果。我在 MacOs 上可能是这个原因吗？

但是我的存储库中的版本（安装在 node_modules 中）是 3.9.3 版，全局我的版本是 3.9.5 版

【参考方案1】：

在 VSC 的扩展面板中，键入“@builtin”并在“功能”部分查找“TypeScript 和 javascript 语言功能”。它很可能已被禁用。启用它并重新启动您的 VSC。正如 here 的 Matt Bierner 所建议的那样。

【讨论】：

我多年来一直尝试“入门” TS，但从未通过这一步！这非常有效。

谢谢！我的“TypeScript 和 JavaScript 语言功能”已经启用，但无法正常工作，所以我禁用了它，重新加载并重新启用它。像魅力一样工作！

这是为我做的！好答案！

【参考方案2】：

VSCode 没有内置的 typescript linter。 https://code.visualstudio.com/docs/languages/typescript#_linters

从市场安装 ESlint 扩展以解决 JS 和 TS lint 错误。 如果已经安装好，后期引入typescript，重新安装ESlint扩展，重启VSCode即可

【参考方案3】：

您需要将tsconfig.json 文件添加到您的项目中，它会起作用。像这样的

  "exclude": ["node_modules", "node_modules/**/*"],
  "compilerOptions": 
    "baseUrl": "./",
    "lib": ["es5", "es6", "dom", "es2018.promise"],
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./build",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": false,
    "strict": true,
    "strictPropertyInitialization": false,
    "skipLibCheck": true, 
    "suppressImplicitAnyIndexErrors": true