代码整洁之道：利用no-unused-vars提升项目可维护性

一、为什么需要禁止未使用变量？

未使用的变量通常是代码冗余或重构遗漏的标志（如未清理的临时变量、废弃参数），会导致：

1. 代码可读性下降：无关变量干扰逻辑主线；
2. 潜在内存占用（部分场景下）；
3. 协作冲突：他人可能误认为变量有作用而误修改 。

二、配置步骤详解

1. 修改 .eslintrc.js 文件

module.exports = {
  rules: {
    'no-unused-vars': 'error', // 开启错误级别检查
    // 针对 TypeScript 项目需替换为：
    '@typescript-eslint/no-unused-vars': 'error' // 替代基础规则
  }
};

2. 执行检查命令

npx eslint src/ --ext .js,.ts,.vue  # 指定扩展名，覆盖所有文件

• 关键参数说明：
  • --ext：定义待检测文件后缀（例如 Vue 或 TS 项目需补充 .vue/.ts）；
  • --fix：自动修复部分问题（如删除未使用变量，但无法修复所有场景）。

三、常见问题与解决方案

问题1：TypeScript 项目报错但变量实际已使用

原因：基础规则 no-unused-vars 对 TS 类型支持不足。
解决：

// .eslintrc.js
{
  "rules": {
    "no-unused-vars": "off", // 关闭基础规则
    "@typescript-eslint/no-unused-vars": "error" // 启用 TS 专用规则
  },
  "plugins": ["@typescript-eslint"] // 确保已加载插件
}

需安装依赖：npm i -D @typescript-eslint/eslint-plugin 。

问题2：Vue SFC 中 <script setup> 的变量误报

场景：defineProps 定义的变量被标记未使用。
解决：启用 Vue 插件规则：

// .eslintrc.js
{
  plugins: ["vue"],
  rules: {
    "vue/script-setup-uses-vars": "error", // 识别 setup 语法糖中的变量
    "no-unused-vars": "off", // 关闭冲突规则
    "@typescript-eslint/no-unused-vars": "error" 
  }
}

问题3：忽略特定变量（如 _ 占位参数）

通过正则忽略以下划线开头的变量：

// .eslintrc.js
{
  rules: {
    '@typescript-eslint/no-unused-vars': [
      'error',
      { 
        argsIgnorePattern: '^_',  // 忽略如 `(_foo) => {}`
        varsIgnorePattern: '^_'   // 忽略如 `const _bar = 1`
      }
    ]
  }
}

四、最佳实践建议

1. 层级配置：
   • 根目录配置通用规则，子目录通过 .eslintrc 覆盖特殊需求（如测试文件忽略未使用变量）；
2. 注释豁免：

   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const unusedVar = 42; // 临时豁免
   

3. 结合 IDE 插件：
   VS Code 的 ESLint 扩展可实时高亮未使用变量，减少终端检查频率。

数据参考：ESLint 官方统计显示，未使用变量是开源项目中最高频的规则违反之一，占所有问题的 12% 以上 。通过自动化检查，团队可减少 20% 的代码维护成本 。

通过以上配置和优化，你的项目能更高效地清除代码“垃圾”，提升长期可维护性。遇到复杂场景时，可结合官方文档进一步调试 。