虽然很简单的功能，但却是刚需！
下载地址：marketplace.visualstudio.com/items?itemn…
code-spell-checker
拼写错误检查。
当我们编写代码时，偶尔会出现单词拼错的情况，这个插件可以检查到可能拼写错误的单词，并有波浪线提醒。
它支持驼峰命名法。
下载地址：marketplace.visualstudio.com/items?itemn…
path-intellisense
智能路径感知，可以帮我们自动补充文件名。
下载地址：marketplace.visualstudio.com/items?itemn…
toggle quotes
javascript 的字符串可以支持三种形式，单引号、双引号、尖角号，有时候我们想要拼接字符串时，需要将原来的单引号或双引号改为尖角号。使用这个插件，只需要按下快捷键 cmd+'就可以做到。
下载地址：marketplace.visualstudio.com/items?itemn…
template string converter
它可以自动转换 javascript 的模板字符串。
和 togglequotes 不同的是，它是自动完成的。
下载地址：marketplace.visualstudio.com/items?itemn…
intellisense for css class names in html
class 的自动补全智能提示。
下载地址：marketplace.visualstudio.com/items?itemn…
tailwind css intellisense
tailwind css 的自动补全智能提示。
如果你使用 tailwind css 的话，可以禁用 intellisense for css class names in html。
下载地址：marketplace.visualstudio.com/items?itemn…
npm intellisense
这个插件可以帮助我们智能感知要导入的模块。
当我们输入 import 时它会自动完成。
下载地址：marketplace.visualstudio.com/items?itemn…
change-case
有时候我们想要修改变量的命名规则，比如中横线、下划线、全大写等。
这个插件可以帮助我们修改变量名。
如果只是修改一个变量名似乎挺鸡肋。但它的优势是可以同时修改很多变量名。
下载地址：marketplace.visualstudio.com/items?itemn…
nested comments
嵌套注释一直是个问题。
因为被嵌套的注释会和第一个注释开头组合成有效的注释，而后面的部分将会被忽略。
这个插件可以帮助我们将被嵌套的注释进行字符转换，在我们解除外层注释时，再还原被嵌套的注释。
下载地址：marketplace.visualstudio.com/items?itemn…
auto rename tag
自动重命名标签，你可以在前面修改，也可以在后面修改，它都会同步修改。
下载地址：marketplace.visualstudio.com/items?itemn…
es7+ react/redux/react-native snippets
这个插件提供了 es7/react/redux/react-native 等代码片段。
可以快速创建模板代码，提高我们的开发效率。
比如使用 react 的 usestate hook，它可以自动转换 setxxx 的驼峰命名法，以及自动跳转光标位置。
下载地址：marketplace.visualstudio.com/items?itemn…
eslint
这个插件将 eslint 集成到 vscode 中，我们可以通过这个插件来检查工作区的代码。
下载地址：marketplace.visualstudio.com/items?itemn…
prettier
非常经典的插件，这个插件可以格式化各种各样的文件内容。
下载地址：marketplace.visualstudio.com/items?itemn…
glean
它可以将复杂的 jsx 提取到单独的组件或文件中，这在重构的时候非常有用。
下载地址：marketplace.visualstudio.com/items?itemn…
htmltagwrap
当我们需要将某一段 dom 标签包裹时，这个插件很管用。
我们可以选择一段 dom 标签，然后按住 options+w，就可以在外层创建一个标签了。
下载地址：marketplace.visualstudio.com/items?itemn…
version lens
可以查看项目中依赖的 npm 包的最新版本，以及升级最新版本。
下载地址：marketplace.visualstudio.com/items?itemn…
hungry delete
这个插件帮助我们一键删除多个空行。
按住 option+delete 就可以删除多个空行。
下载地址：marketplace.visualstudio.com/items?itemn…
paste json as code
当我们复制了一段 json，想根据这段 json 生成对应的 json 结构，那么可以使用这款插件。
它支持非常多的编程语言，像 typescript、python、go、java 等。
下载地址：marketplace.visualstudio.com/items?itemn…
dot env
不管是前端项目还是后端项目，大多都会使用 .env 文件来保存环境变量。
这款插件可以对 .env 文件进行高亮。
下载地址：marketplace.visualstudio.com/items?itemn…
主题类
dracula official
德古拉的官方主题，最经典的主题之一，也是我的最爱。
下载地址：marketplace.visualstudio.com/items?itemn…
material theme
material theme 提供了 material 风格的主题，让代码看上去更酷。
下载地址：marketplace.visualstudio.com/items?itemn…
one dark pro
如果你是 atom 的用户，或者是喜欢 atom 主题的开发者，可以尝试这个主题插件。
下载地址：marketplace.visualstudio.com/items?itemn…
vscode-icons
我们在浏览文件夹时，如果在文件前面有一个图标，那么会非常方便的区分它们。
vscode icons 这个插件就是来做这件事儿的！
vscode 默认的目录结构长这样：
使用 vscode icons 后图标变成这样了：
下载地址：marketplace.visualstudio.com/items?itemn…
file-icons
另一款 icons 主题插件。
下载地址：marketplace.visualstudio.com/items?itemn…
material icon theme
几乎是最全的图标主题插件。
支持这么多种文件：
支持这么多种文件夹：
下载地址：marketplace.visualstudio.com/items?itemn…
工具类
todo-tree
todo tree 可以通过 todo 和 fixme 注释来管理项目。
我们可以快速查看被打了注释的文件。
下载地址：marketplace.visualstudio.com/items?itemn…
vscode-peacock
当我们同时运行多个 vscode 窗口时，我们可以给每个窗口设置不同的颜色，以此来区分不同的项目。
它默认支持的颜色有 angular 红、微软蓝、js 黄、mandalorian 蓝、node 绿、react 蓝等等。
下载地址：marketplace.visualstudio.com/items?itemn…
quokka.js
当我们想快速验证某段 js 或者 ts 代码时，可以使用这个插件。
它提供了一个 playground，可以更好的验证代码的逻辑。
下载链接：marketplace.visualstudio.com/items?itemn…
rest-client
测试 api 的方式有很多，比如重量级的 postman，轻量级的 curl。但是它们在 vscode 中使用起来都不是那么方便。
rest client 就是一个很好的插件，可以帮我们在 vscode 中轻松测试 api。
下载地址：marketplace.visualstudio.com/items?itemn…
editorconfig for vs code
当我们的项目使用多个编辑器工具开发时，想要统一代码风格，就需要配置不同工具的配置文件。
这个工具可以让我们只需要编写一个.editorconfig 就可以在所有编辑器中通用这些规则。
下载地址：marketplace.visualstudio.com/items?itemn…
git lens
虽然 vscode 有内置的 git 功能，但是还不够强大。
git lens 增加了 git 的功能，我们可以在每一行代码中查看提交信息，它还可以比较不同的 commit 差异，以及一些其他有用的 git 功能。
下载地址：marketplace.visualstudio.com/items?itemn…
open in github
可以快速在 github 中打开项目、文件、action、pr 等。
下载地址：marketplace.visualstudio.com/items?itemn…
open in browser
支持快速在浏览器中打开 html 文件。
在 html 文件中右键，菜单中会有两个选项，或者使用对应的快捷键。
下载地址：marketplace.visualstudio.com/items?itemn…
live server
当我们修改 html 的内容，想让浏览器和代码保持一致时，需要这个插件。
它会在本地启动一个服务器，监听文件的改动，并刷新浏览器。
在 html 文件中右键，菜单中会有两个选项，或者使用对应的快捷键。
下载地址：marketplace.visualstudio.com/items?itemn…
live preview
它可以在 vscode 中实时预览 html。
但是它不支持 react、angular 这类框架开发的应用。
下载地址：marketplace.visualstudio.com/items?itemn…
project manager
当我们有多个项目时，可以通过这个插件管理项目，快速切换项目、标签等功能。
下载地址：marketplace.visualstudio.com/items?itemn…
live share
你想要将自己的代码分享给别人进行实时地协作编辑和调试？这个插件可以将任何编程语言开发的项目或者任何类型的项目与其他人共享。对方可以直接在你的环境下编写代码，不需要额外安装任何环境或者 sdk。
甚至可以直接在 web 中协作编辑！
下载地址：marketplace.visualstudio.com/items?itemn…
markdown pdf
虽然名字叫做 markdown pdf，但是其实可以将 markdown 导出为各种格式的文件。
支持这么多种导出格式。
下载地址：marketplace.visualstudio.com/items?itemn…
markdown preview github styling
以 github 的样式来预览 markdown 文件。
下载地址：marketplace.visualstudio.com/items?itemn…
总结介绍了那么多，快去打造最快速、最稳定、最适合你的 ide 吧！
如果这篇文章对你有所帮助，欢迎点赞。
如果你有更多实用的，有价值的 vscode 插件，也欢迎在评论区留言。
更多关于vscode的相关知识，请访问：vscode教程！