如何让 ESLint/Prettier 在 TypeScript for VS Code 中的代码中为错误添加下划线

问：

我已经在我的项目文件夹中安装了 ESLint 和 Prettier，以及我能找到的几乎所有帮助解决问题的附加组件。我还安装并启用了扩展。但是，我的文件中没有收到任何错误警告。例如，以下代码应警告我以下 eslintprettier/prettier 错误：

1. 函数上缺少返回类型，
2. 替换为 '··console/log（'测试'）;,⏎····console/log('test')
3. 替换为.log('test')·/·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"
  }
}

我知道它应该可以工作，因为我的计算机上有另一个具有相同配置的项目文件夹，并且在我键入时它会在错误下划线并给我自动更正选项。我不明白为什么这个不起作用。