用了 3 年 VSCode，这 20 个插件让我效率翻倍

以下是经过 3 年实战筛选的 VSCode 插件清单。

代码质量

1. Error Lens

把错误信息直接显示在代码行尾，不用鼠标悬停。

const x: number = "hello"  // ❌ Type 'string' is not assignable to type 'number'

2. Prettier + ESLint

代码格式化 + 代码规范检查，保存时自动修复。

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Git 增强

3. GitLens

代码行的 Git Blame、历史对比、分支可视化。

4. Git Graph

可视化的 Git 提交图，比命令行直观。

AI 辅助

5. GitHub Copilot / Cursor

AI 代码补全，省掉大量样板代码。

// 输入注释，AI 生成实现
// 验证邮箱格式
function validateEmail(email: string): boolean {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
}

6. Code Spell Checker

拼写检查，防止变量名拼错。

效率工具

7. Auto Rename Tag

改 HTML 标签名自动同步闭合标签。

8. Path Intellisense

自动补全文件路径。

9. Import Cost

显示每个 import 的包大小。

10. Better Comments

不同颜色标记 TODO、FIXME、NOTE 等注释。

// TODO: 需要重构这里
// FIXME: 这里有 bug
// ! 这里很重要
// ? 这里需要确认
// * 这里是重点

快捷键自定义

{
  "key": "ctrl+shift+r",
  "command": "editor.action.rename",
  "when": "editorHasRenameProvider"
}

总结

| 类别 | 插件 | 作用 |

|------|------|------|

| 代码质量 | Error Lens | 即时错误提示 |

| 代码质量 | Prettier/ESLint | 格式化+检查 |

| Git | GitLens | 提交历史 |

| Git | Git Graph | 可视化图表 |

| AI | Copilot | 代码补全 |

| 效率 | Auto Rename Tag | 标签同步 |

| 效率 | Import Cost | 包大小 |

| 效率 | Better Comments | 注释高亮 |