VS Code中如何让ESLint/Prettier在TypeScript代码下标出错误

已在项目目录安装ESLint、Prettier及各类相关插件，VS Code也已启用对应扩展，但代码文件中未出现任何错误警告。例如以下TypeScript代码存在三类ESLint/Prettier问题：

1. 函数缺少返回类型
2. 格式问题：需将换行后4空格的console.log('test')改为2空格并添加分号
3. 格式问题：console.log('test')需补充分号并调整缩进
   但实际编辑器中无任何下划线标注警告：

ngOnInit() {
  
    console.log('test')
  } 

配置文件 #

.eslintrc.json #

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier",
    "prettier/prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "prettier", "@typescript-eslint/eslint-plugin", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

.prettierrc.json #

{
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "trailingComma": "es5",
    "arrowParens": "always",
    "endOfLine": "lf",
    "overrides": [
      {
        "files": "*.component.html",
        "options": {
          "parser": "angular"
        }
      },
      {
        "files": "*.html",
        "options": {
          "parser": "html"
        }
      }
    ]
  }

package.json #

{
  "name": "test-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.1.0",
    "@angular/common": "^14.1.0",
    "@angular/compiler": "^14.1.0",
    "@angular/core": "^14.1.0",
    "@angular/forms": "^14.1.0",
    "@angular/material": "^7.0.0",
    "@angular/platform-browser": "^14.1.0",
    "@angular/platform-browser-dynamic": "^14.1.0",
    "@angular/router": "^14.1.0",
    "bootstrap": "^5.3.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.1.1",
    "@angular-eslint/builder": "16.1.0-alpha.0",
    "@angular-eslint/eslint-plugin": "16.1.0-alpha.0",
    "@angular-eslint/eslint-plugin-template": "16.1.0-alpha.0",
    "@angular-eslint/schematics": "16.1.0-alpha.0",
    "@angular-eslint/template-parser": "16.1.0-alpha.0",
    "@angular/cli": "~14.1.1",
    "@angular/compiler-cli": "^14.1.0",
    "@types/jasmine": "~4.0.0",
    "@typescript-eslint/eslint-plugin": "^6.3.0",
    "@typescript-eslint/parser": "^6.3.0",
    "eslint": "^8.40.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "jasmine-core": "~4.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "prettier": "3.0.1",
    "prettier-eslint": "^15.0.1",
    "typescript": "~4.7.2"
  }
}

排查修复步骤 #

• 修复版本兼容性问题：当前Angular版本为14，但@angular-eslint相关包使用了16.1.0-alpha.0，大版本不兼容会导致ESLint无法正常工作。将@angular-eslint系列包降级到与Angular 14匹配的版本（如14.x.x），修改package.json后重新执行npm install。
• 精简ESLint配置：
  • extends中plugin:prettier/recommended已包含prettier和prettier/prettier的配置，无需重复添加
  • plugins中plugin:prettier/recommended是扩展配置而非插件，需移除；@typescript-eslint已包含@typescript-eslint/eslint-plugin，无需重复声明
    修正后的.eslintrc.json：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

• 手动验证lint功能：在终端执行npm run lint，查看是否输出预期错误。如果命令行能检测到错误但VS Code无提示，检查编辑器配置：
  • 确保VS Code的ESLint扩展设置中eslint.validate包含typescript，在settings.json中添加：

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

  • 重启ESLint服务：打开命令面板（Ctrl+Shift+P），选择ESLint: Restart ESLint Server
• 清理依赖重新安装：删除node_modules和package-lock.json，执行npm install，排除依赖版本冲突问题
• 检查TypeScript配置：确保tsconfig.json中strict模式开启（或至少noImplicitReturns设为true），这样才能检测到函数缺少返回类型的问题

内容的提问来源于stack exchange，提问作者Scott-MEARN-Developer