如何让VS Code为Vue+TS项目中未使用的参数/属性显示问题标识？

要让VS Code高亮Vue类组件里的未使用属性，仅靠editor.showUnused配置不够，需要结合TypeScript和ESLint的规则实现，具体步骤如下：

1. 配置TypeScript基础检测 #

确保tsconfig.json启用必要编译选项，尤其是装饰器支持（适配vue-property-decorator）：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts", "src/**/*.vue"]
}

2. 用ESLint检测未使用类属性 #

TypeScript原生的noUnusedLocals不检测类成员，需借助ESLint的@typescript-eslint/no-unused-vars规则：

安装依赖 #

如果未安装相关插件，执行：

npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue

配置ESLint规则 #

在项目根目录的.eslintrc.js中添加配置：

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020
  },
  extends: [
    'plugin:vue/essential',
    '@vue/typescript/recommended'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': [
      'warn',
      {
        vars: 'all',
        // 启用类属性和私有成员的检测
        classPrivateProperties: 'all',
        classPrivateMethods: 'all',
        // 可选：忽略以下划线开头的变量
        varsIgnorePattern: '^_'
      }
    ]
  }
}

3. 调整VS Code相关设置 #

更新settings.json，确保ESLint生效并自定义高亮样式：

{
  "editor.showUnused": true,
  "eslint.enable": true,
  "eslint.validate": ["javascript", "typescript", "vue"],
  "workbench.colorCustomizations": {
    "editorUnnecessaryCode.border": "#ff0000",
    // 自定义ESLint警告（未使用属性）的颜色
    "editorWarning.foreground": "#ff9900",
    "editorWarning.border": "#ff9900"
  }
}

完成配置后重启VS Code，未使用的组件属性（比如示例中的bla）就会被高亮标记。

内容的提问来源于stack exchange，提问作者Dan Sørensen