VS Code 插件推荐
Visual Studio Code 是现代前端开发的首选编辑器，以下是常用插件推荐。
通用插件
Theme & UI
| 插件名称 | 说明 |
|---|---|
| One Dark Pro | 经典深色主题 |
| Dracula Official | 吸血鬼主题 |
| Material Icon Theme | 文件图标主题 |
| Error Lens | 错误行内显示 |
Productivity
| 插件名称 | 说明 |
|---|---|
| Prettier | 代码格式化 |
| ESLint | 代码检查 |
| GitLens | Git 可视化 |
| Todo Tree | TODO 注释高亮 |
| Path Intellisense | 路径自动补全 |
前端开发
框架支持
| 插件名称 | 说明 |
|---|---|
| Vue - Official | Vue.js 官方支持 |
| Reactjs code snippets | React 代码片段 |
| Tailwind CSS IntelliSense | Tailwind CSS 智能提示 |
CSS & Styling
| 插件名称 | 说明 |
|---|---|
| CSS Peek | 查看 CSS 定义 |
| SCSS IntelliSense | SCSS 智能提示 |
| Stylelint | CSS 代码检查 |
后端开发
语言支持
| 插件名称 | 说明 |
|---|---|
| Python | Python 语言支持 |
| Jupyter | Jupyter Notebook 支持 |
| Node.js Exec | 运行 Node.js 脚本 |
| Thunder Client | API 测试（类似 Postman） |
开发工具
DevOps
| 插件名称 | 说明 |
|---|---|
| Docker | Docker 支持 |
| Kubernetes | K8s 支持 |
| Remote - SSH | 远程开发 |
其他实用插件
| 插件名称 | 说明 |
|---|---|
| Auto Rename Tag | 自动重命名标签对 |
| Bracket Pair Colorizer | 括号配对着色 |
| Bookmarks | 书签功能 |
| Settings Sync | 设置同步 |
我的 VS Code 配置
json
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"files.autoSave": "afterDelay",
"prettier.singleQuote": true,
"prettier.semi": false
}快捷键
| 快捷键 | 功能 |
|---|---|
| Cmd + Shift + P | 命令面板 |
| Cmd + D | 选中下一个相同词 |
| Cmd + Shift + L | 选中所有相同词 |
| Alt + ↑/↓ | 移动行 |
| Cmd + / | 切换注释 |
| Cmd + B | 切换侧边栏 |