VS code 常用插件推荐

发布于:2024-12-18 ⋅ 阅读:(377) ⋅ 点赞:(0)

VS Code(Visual Studio Code)是由微软开发的一款免费、开源的代码编辑器,拥有丰富的扩展市场,用户可以根据自己的需要安装各种扩展来增强编辑器的功能。以下是一些VS Code的常用插件推荐:

代码管理与版本控制

GitLens:

增强了VS Code中的Git功能,通过丰富的可视化和强大的命令帮助开发者无缝导航和探索Git存储库。可以快速查看代码的编写者、轻松导航和探索Git存储库,并获取有效信息以执行更多操作,从而帮助开发者更好地理解代码。

Git Graph:

用于可视化查看存储库的Git操作,并从图形中轻松执行Git操作。

WakaTime:

用于在编程活动中自动统计工作量、代码提交和时间跟踪等,并能定期提供各种高质量的工作统计图表。

VS Code Counter:

用于统计项目代码的行数,包括纯代码行数、空白行数、注释行数等。

代码编辑与优化

Prettier:

一个自动代码格式化插件,支持多种编程语言。安装Prettier后,可以一键格式化代码,确保整个项目的代码风格一致。

Beautify:

可以自动美化和格式化JavaScript、JSON、CSS、Sass和HTML代码,支持自定义配置以符合不同的编码风格,让代码更加整洁易读。但需注意,目前该扩展已不再维护。

ESLint:

一款强大的JavaScript语法检查和代码风格规范插件。通过集成ESLint到VS Code,可以实时发现并修复代码中的错误和不符合规范的地方,从而提高代码质量。

Tabnine/IntelliCode:

AI辅助编程插件,通过学习大量的开源代码库,能够预测开发者可能需要的代码片段,并提供智能代码建议和自动补全功能,从而提高编码效率。其中,IntelliCode是微软官方提供的。

Bracket Pair Colorizer:

可以为括号(包括圆括号、方括号和花括号)添加不同的颜色,帮助开发者更轻松地识别配对的括号,提高代码可读性。

Better Comments:

允许开发者使用不同的标记和格式来分类和突出显示代码中的注释,从而提高注释的可读性和组织性,使得代码更加易于维护和理解。

Change-case:

提供了一种简单的方法来将单词或变量名更改为各种情况,包括驼峰命名(camelCase)、下划线命名(snake_case)、标题命名(TitleCase)等多种格式。
TODO Highlight:可以搜索并高亮显示代码中的TODO、FIXME等标记,支持自定义关键字和正则表达式匹配,方便开发者快速识别、管理和追踪待办事项。

Code Spell Checker:

可以检查单词拼写是否出现错误,检查的规则遵循camelCase(驼峰拼写法),有助于维护代码的准确性和专业性。

前端开发相关

Vue Language Features (Volar):

专为Vue 3构建的语言支持插件,提供了漂亮的语法高亮显示、错误检查和代码格式化功能,并添加了很多Vue指令和事件处理程序,在输入时提供很好的建议。

Vue.js Extension Pack:

Vue官方扩展包,包含了Vue.js 2和Vue.js 3的API对应的代码片段。

ES7+ React/Redux/React-Native snippets:

提供了许多速记前缀来加速开发,并帮助开发人员为React、Redux、GraphQL和React Native创建代码片段和语法。

TypeScript React Code Snippets:

包含了使用TypeScript的React代码片段,支持TypeScript(.ts)或TypeScript React(.tsx)等语言。

Live Server:

一个轻量级的本地开发服务器,支持实时预览。当开发者修改代码并保存时,Live Server会自动刷新浏览器,让开发者立即看到修改后的效果。

JavaScript (ES6) code snippets:

可以使用预定义的ES6语法片段速记,从而提高前端开发效率。

Postman:

允许在VS Code中使用Postman,方便API的开发和测试。
Material Icon Theme:为文件和文件夹分配简洁明了的图标,使项目结构一目了然,方便在工作区中快速导航和定位文件.

VSCode Icons:

与 Material Icon Theme 类似,可为不同类型的文件和文件夹添加对应的图标,增强编辑器的可视化效果和可识别性,让项目结构更清晰.

文本与图片处理

Markdown All in One:

为Markdown文件提供了增强的编辑体验,包括实时预览、快捷键、自动生成目录、以及对GitHub风格Markdown的支持,使得Markdown文档的编写和阅读更加高效和直观。它还支持LaTeX数学表达式的渲染,以及将Markdown文档转换为HTML格式。

Markdown Preview GitHub Styling:

提供Markdown文档的实时预览功能,并支持GitHub风格的样式。

SVG Viewer:

为VS Code提供关于SVG格式图片预览和处理的插件,可以方便地预览SVG图片,并支持对SVG图片的颜色、形态等特性进行调整。

CodeSnap:

用于对代码进行截图和共享。屏幕截图可以用文本或形状进行注释,并通过链接共享或包含在网站或文档中。

Image Preview:

主要用于图片的预览,支持CSS预览和SVG格式,能够提高开发效率。在代码中可以通过hover的方式来预览图片。

其他实用插件

Path Intellisense:

可以自动补全文件路径,大大提高了编写文件路径时的效率。当开发者在输入路径时,插件会根据当前目录结构提供智能建议,让开发者快速找到需要的文件。

Docker:

为VS Code提供了强大的Docker支持。开发者可以使用该插件来管理Docker容器、镜像和网络,编写和运行Dockerfile,以及编写和调试Docker Compose文件。

Remote SSH:

允许开发者通过SSH协议连接到远程服务器或虚拟机,直接在本地VS Code编辑器中操作远程服务器上的代码,实现无缝的远程开发体验。

Debugger for Chrome:

可以在VS Code中调试JavaScript和TypeScript代码,而无需离开编辑器。

REST Client:

一个简洁的API测试工具,允许开发者直接在VS Code中发送HTTP请求并查看响应。通过编写简单的请求文件,可以轻松测试和调试API接口。

此外,还有一些如“Chinese (Simplified) Language Pack for Visual Studio Code”等语言包插件,以及用于查看Git日志和文件历史记录并比较分支或提交的插件等,也是VS Code中常用的插件。

总的来说,VS Code的插件市场非常丰富,开发者可以根据自己的需求和喜好选择合适的插件来增强编辑器的功能。以上推荐的插件仅供参考,具体使用时还需根据项目的实际情况进行选择。

小白路漫漫,让我们一起加油!!!


网站公告

今日签到

点亮在社区的每一天
去签到