VS Code 插件精选:按需安装、配置与安全边界
本文目录
插件清单不是越长越好。每个 VS Code 扩展都可能像编辑器本身一样读取或修改文件、联网和启动进程;下载量、Verified Publisher 或 Marketplace 签名是信号,不代表没有风险。先解决一个真实重复问题,再核对发布者、源代码/许可、更新记录、问题响应、权限和隐私政策。
1. 先别安装:这些能力已经内置
- JavaScript/TypeScript 调试由 VS Code 内置 JavaScript Debugger 提供,旧的 Debugger for Chrome 扩展通常不再是首选;先试 Run and Debug 和项目
launch.json。 - 括号对着色、括号范围提示、HTML 自动闭合/重命名等常用能力已内置;不要为相同功能叠装多年未维护的旧插件。
- Git 状态、diff、分支和提交功能已集成。先熟悉 Source Control 与 Git CLI,只有确实需要 blame/历史视图时再加 GitLens。
- 格式化优先使用项目的 formatter 与配置;不要同时开启多个插件在保存时争抢同一种文件。
VS Code 的 Preferences: Open Default Settings (JSON) 和 Extensions 视图可以确认当前版本已经具备什么。内置能力会随编辑器升级,不需要为了旧教程截图复刻一整套扩展。
2. 一套精简的 Web 开发起点
| 扩展 ID | 适用场景 | 安装前检查 |
|---|---|---|
dbaeumer.vscode-eslint | 项目使用 ESLint,在编辑器内显示诊断与修复操作。 | 项目需安装并固定自己的 ESLint;使用仓库配置,不要让全局规则改写团队行为。 |
esbenp.prettier-vscode | 项目选择 Prettier 做格式化。 | 依赖本地项目 Prettier 与配置;按语言设置唯一 formatter,先试 Format Document diff。 |
editorconfig.editorconfig | 多编辑器协作时遵循仓库 .editorconfig。 | 仓库确实有 EditorConfig 规则时更有价值,避免与其他格式化规则冲突。 |
eamodio.gitlens | 需要在编辑器查看 blame、提交历史或代码作者上下文。 | 可选功能包含账号/云端服务;查看当前计划、网络行为和隐私条款,不需要就用内置 Git。 |
ms-playwright.playwright | 项目已经使用 Playwright,希望在 VS Code 管理和调试测试。 | 仍需项目本地 @playwright/test、浏览器依赖和项目配置;扩展不会替代 CI。 |
以上 Marketplace 页面由各发布者维护,扩展名、功能和套餐可能变化。安装时核对完整 publisher ID,确认发行版兼容(Microsoft VS Code、Code OSS、VSCodium 的 Marketplace 配置可能不同),并在团队仓库中记录确实需要的推荐项。
3. 按需添加,而不是安装“全家桶”
- Vue/React/小程序:优先用当前框架官方维护的语言服务或调试工具;先检查框架版本、官方文档和 Marketplace 发布者,不要同时启用多个相互冲突的语法服务。
- 容器、SSH、WSL、远程开发:明确项目在哪个环境运行。Remote 扩展常会在本机和远端分别安装;远端扩展与本地扩展列表/Settings Sync 的行为不同。
- API 调试:在 Postman/Insomnia 等独立客户端与编辑器内 REST 扩展之间选一种主要工作流。含真实 token 的请求文件必须加入本地忽略规则,禁止提交凭据。
- 图标、背景、字体、彩虹语音和动画:属于个人体验,不是生产力必需项。审阅其文件访问、网络请求、麦克风/键盘监听、开机启动和耗电行为;不能接受就不要安装。
- AI 补全/聊天:并非所有工具都会把“全部源码”发送到云端,但数据流、索引范围、保留政策、训练选择和组织配置各不相同。先看厂商当前隐私说明与组织规定,敏感仓库不要在未经授权的服务中启用。
谨慎对待会自动改文件、运行命令、提交代码、上传工程或安装扩展包的工具。Review extension pack 里的每一个子扩展;扩展包不是安全审计或权限沙箱。
4. 用 Profile 做可迁移的最小配置
为前端、后端、远程开发或演示分别创建 VS Code Profile,只放当前工作流需要的设置和插件。导出前检查 profile 内容是否包括私有路径、内部域名、工作区设置、MCP/Agent 配置或秘密;分享的 Gist/文件不能当成私密密码库。
命令行可以检查、导出和批量安装扩展:
code --list-extensions --show-versions
code --list-extensions --profile "Web Development"
code --install-extension dbaeumer.vscode-eslint --profile "Web Development"
code --disable-extension publisher.extension-id
示例 Profile 名称和 publisher.extension-id 是占位符。换机前导出 profile 或扩展列表,但安装前重新审阅版本和发布者;不要把 extension list 当成 lockfile,不应自动盲装几年以前的清单。Settings Sync 不会把所有 Remote SSH/Dev Container/WSL 远端扩展都同步到远程窗口。
5. 性能和问题排查
- 先在 Extensions 视图检查扩展是否对当前 workspace 启用、是否持续更新或报错;
- 用
Help: Start Extension Bisect二分定位扩展冲突;也可用code --disable-extensions启动对照; - 用
Developer: Show Running Extensions查看启动耗时,再按需禁用 workspace/untrusted workspace 中的扩展; - 只保留一个格式化提供者,检查
editor.defaultFormatter与editor.codeActionsOnSave; - 升级 VS Code 或扩展后复测语言服务、调试、远程容器和保存行为,不要一次更新后直接清空用户数据。
扩展崩溃时记录 VS Code 版本、extension ID、输出通道错误和最小复现;停止扩展比删除整个 ~/.vscode 更容易回滚。Workspace Trust 可降低不可信工作区触发任务/调试的风险,但不能阻止恶意扩展本身执行代码。
6. 安全检查清单
- 核对 Marketplace 上精确的 extension ID、publisher、Verified Publisher 状态、源仓库和发布历史;
- 读扩展权限/隐私说明,特别留意文件上传、外部进程、剪贴板、键盘/语音监听和遥测;
- 公司仓库按组织允许清单安装;扩展与 AI 服务的数据处理需走组织批准流程;
- 使用 Workspace Trust 处理陌生仓库,扩展仍需独立审查;
- 定期
code --list-extensions --show-versions盘点,卸载不用的扩展,删除前导出设置并确认是否已被其他 Profile 使用。
官方资料与 Marketplace
- VS Code 扩展 Marketplace 与 扩展运行时安全。
- VS Code Profiles、Settings Sync、Workspace Trust。
- ESLint 扩展、Prettier 扩展、EditorConfig 扩展。
- GitLens、Playwright Test。
Marketplace 内容会变化。本文给的是按用途挑选的起点,不代表作者已审计每次更新;安装决定仍应以当前页面和组织策略为准。
Live Notes
留言提交后会先进入审核,审核通过后对其他读者公开。