一、通用效率类
1. Auto Rename Tag
在编写 HTML 或 XML 代码时,当你修改一个标签的名称,它会自动同步修改对应的结束标签,节省了手动修改的时间,提高了代码的准确性和编写效率。
2. Bracket Pair Colorizer
为代码中的括号对(如 ()
、{}
、[]
)添加不同的颜色,让你可以更清晰地分辨嵌套的括号层次,尤其在处理复杂代码时,能有效减少因括号匹配错误导致的问题。
3. Code Runner
支持多种编程语言的代码快速运行,无需在命令行中手动输入编译和运行命令。你只需按下快捷键,就能在编辑器内直接运行代码,并查看输出结果,方便进行代码测试和调试。
4. GitLens
增强了 VSCode 对 Git 的集成功能,它可以在代码行旁边显示代码的作者、最后修改时间等 Git 信息,还能查看文件的历史记录、比较不同版本的差异等,帮助你更好地理解代码的演变和团队协作情况。
5. Todo Tree
在项目中搜索所有包含 TODO
、FIXME
等注释标记的代码行,并在侧边栏以树状结构展示,方便你快速定位和管理待办事项和需要修复的问题。
6. CSS Peek
快速跳转到 CSS 类定义
7. Path Intellisense
文件路径自动补全。
二、代码格式化与美化类
1. Prettier-Code formatter
一个流行的代码格式化工具,支持多种编程语言。它可以根据预设的规则自动格式化代码,统一代码风格,使代码看起来更加整洁、易读。你可以通过配置文件自定义格式化规则,以满足团队或个人的编码规范。
2. Beautify
同样用于代码美化,它可以格式化 HTML、CSS、JavaScript 等文件,让代码的缩进、空格等排版更加规范。与 Prettier 不同的是,它的配置相对简单,适合快速对代码进行基本的格式化。
三、语法检查与智能提示类
1. ESLint
对于 JavaScript 和 TypeScript 开发者来说,ESLint 是一个必不可少的插件。它可以在编码过程中实时检查代码是否符合指定的语法规则和编码规范,发现潜在的错误和不规范的代码写法,并提供相应的修复建议,有助于提高代码质量和可维护性。
2. Pylance
专门为 Python 开发设计的插件,提供了强大的智能提示、类型检查、代码导航等功能。它能够理解 Python 代码的上下文,准确地推断变量类型,为你提供更精准的代码补全建议,大大提高 Python 代码的编写效率。
四、前端开发类
1. Live Server
在开发前端项目时,它可以在本地启动一个实时服务器,当你修改 HTML、CSS 或 JavaScript 文件并保存后,浏览器会自动刷新页面,实时显示修改后的效果,无需手动刷新,让你可以更高效地进行前端页面的调试和开发。
2. Vue Language Features (Volar)
如果你是 Vue.js 开发者,Volar 是一个非常实用的插件。它提供了对 Vue 3 单文件组件(SFC)的全面支持,包括语法高亮、代码格式化、智能提示、组件导航等功能,帮助你更轻松地开发 Vue 项目。
五、主题与图标类
1. One Dark Pro
一款广受欢迎的主题插件,提供了简洁、舒适的代码编辑界面,以深色背景为主,代码颜色搭配合理,长时间编码也不容易产生视觉疲劳。
2. Material Icon Theme
为 VSCode 的文件资源管理器添加了一套美观、直观的图标,不同类型的文件和文件夹会显示不同的图标,方便你快速识别和定位文件。
3. indent-rainbow
缩进彩色显示,避免缩进错误。