【VS Code】常用的15个插件

在 Mac 平台上使用 Visual Studio Code 时，有许多插件可以提升开发效率和编辑体验。以下是一些常用的插件推荐，涵盖不同开发场景的需求： ### 插件分类与推荐 #### 1. 代码美化与格式化 - **Prettier**：一个流行的代码格式化工具，支持多种语言（如 JavaScript、TypeScript、CSS、HTML、JSON 等），可自动调整代码格式以保持一致性。 - **Beautify**：允许对 JavaScript、JSON、CSS 和 HTML 文件进行格式化。 - **Unibeautify**：一个开源项目，提供统一的代码美化体验，支持多种语言和自定义配置[^1]。 #### 2. 智能代码补全与提示 - **IntelliCode**：由微软开发，基于 AI 提供智能代码补全建议，提升编写效率，尤其适用于 JavaScript、TypeScript 和 Python 等语言[^2]。 - **Tabnine**：基于 AI 的代码补全工具，支持多语言，提供更精准的代码预测。 #### 3. 文件与标签管理 - **Auto Close Tag**：自动关闭 HTML/XML 标签，提高前端开发效率[^2]。 - **Auto Rename Tag**：在修改一个标签时，自动重命名对应的闭合标签，确保标签一致性。 - **Path Intellisense**：自动补全文件路径，减少手动输入错误。 #### 4. 版本控制与同步 - **GitLens**：增强 VS Code 内置的 Git 功能，提供代码提交历史、作者信息、差异对比等高级功能。 - **Settings Sync**：通过 GitHub 同步 VS Code 的设置、插件和快捷键配置，方便在多台设备间保持一致的开发环境。 #### 5. 浏览器集成与调试 - **Open in Browser**：在默认浏览器中打开 HTML 文件，便于前端调试。 - **Debugger for Chrome**：允许在 VS Code 中调试运行在 Chrome 浏览器中的 JavaScript 代码。 #### 6. 语言与框架支持 - **Python**：官方 Python 插件，提供 IntelliSense、Linting、调试、Jupyter Notebook 支持等功能。 - **ESLint**：JavaScript 和 JSX 的静态代码检查工具，帮助发现潜在问题。 - **Live Server**：提供本地开发服务器，支持实时重新加载，适用于前端项目。 #### 7. 主题与界面美化 - **Material Theme**：提供现代化的界面风格，支持深色与浅色模式。 - **One Dark Pro**：模仿 Atom 编辑器的经典主题，适合长时间编码。 - **VSCodeVim**：为 VS Code 添加 Vim 编辑器的行为，适合熟悉 Vim 操作的开发者。 #### 8. 其他实用插件 - **Bracket Pair Colorizer**：通过不同颜色高亮匹配的括号，提升代码可读性。 - **Todo Tree**：可视化代码中的 TODO 注释，便于任务管理。 - **Code Spell Checker**：检测拼写错误，适用于注释和字符串。 ### 示例配置：使用 Prettier 格式化 JavaScript 代码 ```json // .prettierrc 文件配置示例 { "semi": false, "singleQuote": true, "trailingComma": "es5", "printWidth": 80 } ```