vscode 作为一款开源免费的编辑器,拥有强大的插件生态,可以通过安装插件来扩展编辑器的功能,提高开发效率。已经是所有前端开发工程师的必备工具之一,下面推荐我自己最常用以及切身体验过的有用插件。

想要安装的插件,可以在插件市场拷贝下面推荐的插件标题进行搜索!!!

主题插件

一个好看的编辑器主题可以令人身心愉悦,首先第一件事肯定是下载一个好看的主题,下面推荐几个主题优化插件。

Material Theme - Free

提供各种黑白配色的主题,可以根据自己的喜好选择。

01fbaca1-fc69-4365-b76e-492665775bb9.jpg

Material Theme Icons - Free

提供文件图标,可以根据文件类型显示不同的图标,让文件列表展示更加美观。

720adead-824d-449d-a1df-4b9c2fb53308.webp

主题我个人觉得两个就够了,不用太花里胡哨。接下来介绍一些常用的编码插件。

通用插件

下面是一些编程通用的插件,建议都安装上去。

Project Manager

Project Manager 是一个项目管理插件,可以更轻松的管理和组织项目。如果多个项目需要开发,项目间频繁切换也麻烦,通过此插件,可以保存到插件的项目列表中,直接按下 option + command + p 即可唤起项目列表,选中快速切换。

d7241490-50ee-4fb4-95b6-d9396ce079ae.jpg

Code Runner

Code Runner 可以让我们直接在编辑器执行当前页面代码功能,支持多种开发语言,包括 JavaScript、Python、Java、C++、C#、Go、PHP、Ruby、Swift、TypeScript 等。

45f28614-9929-45b0-956a-93bb63e99fc3.jpg

GitLens — Git supercharged

GitLens 是一个非常强大的 Git 插件,它增强了 VSCode 内置的 Git 功能,为开发者提供了丰富的代码版本控制体验。通过 GitLens,你可以更方便地查看文件的历史记录、比较代码更改、查看代码作者信息等。

4327db17-afa6-4720-85c5-bc0e0238f787.jpg

Path Intellisense

Path Intellisense 文件路径和模块路径提供自动完成功能。这个插件特别适用于那些需要频繁引用本地文件或模块的项目,可以帮助开发者快速、准确地输入路径,从而提高开发效率。简单来说就是可以实现路径引入提示。

2f4c386d-0983-4d7d-a5c5-46d365069a35.jpg

AI编程

许多大厂提供自己独特的AI编程插件,这里不一个一个介绍,目前我使用的是 Copilot ,有兴趣了解其他AI编程插件,可以查看我之前的文章。几款AI编程助手,大幅提高你的开发体验

React 用户必备

下面针对的是 React 用户的常用插件。

ES7+ React/Redux/React-Native snippets

VS Code ES7+ React/Redux/React-Native/JS snippets 可以提供 React 常用的代码片段生成功能。

503ceff9-0e06-499c-8644-56353cddc655.jpg

Vue 用户必备

下面针对的是 Vue 用户的常用插件

Vue - Official

Vue 官方扩展插件,提供了语法高亮、TypeScript 支持,以及模板内表达式与组件 props 的智能提示。

f4f15117-8a06-4d78-9be4-bd617d413bd4.webp

如果你有插件推荐,欢迎评论区留言!😚 😙