前言
本文分享一些我个人平时用VS Code开发所用到并且好用的插件，欢迎感兴趣的小伙伴阅读本文。
以下内容只是简单介绍插件的基本使用。如需要详细配置的同学，自行找度娘或Google冲浪。最后因本人没有Windows系统，所以某部分内容只提供MacOS环境下的快捷键/配置。
One Dark Pro
One Dark Pro是一款特别好看的主题插件。代码片段的配色看得特别舒服，一共有15种主题配色任你选择。
安装之后可以在Setting -> User -> Extensions -> One Dark Pro中选择自己喜欢的主题。
vscode-icons
vscode-icons是VS Code中下载量最多的图标插件。它会根据你所打开的文件类型显示文件图标。
设置文件图标方法如下：
Material Icon Theme
Material Icon Theme也是下载量最多的图标插件。个人感觉风格要比vscode-icons要好一点。
Auto Close Tag
Auto Close Tag是一款自动闭合标签的插件。通常情况下，不需要做额外的配置。下载后就可以用。
Auto Rename Tag
Auto Rename Tg插件作用于重命名一个HTML/XML标签时，会自动改写HTML/XML结束标签。
Code Runner
Code Runner代码一键运行插件应该是下载量最多的插件之一。功能非常强大。并且支持40多种编程语言。
安装好之后，打开你要运行的文件，可以通过以下几种方式运行代码。
- 快捷键：
control⌃ + option⌥ + N - 在代码编辑区 -> 直接鼠标右键选择
Run Code - 点击编辑器右上角的▶️图标
- 按F1键调出命令面板 -> 输入
Run Code - 在左侧的资源管理器 -> 选中要运行的文件 -> 点击右键 ->
Run Code
Code Spell Checker
Code Spell Checker插件的作用很简单，能很好的帮你检查英文单词的拼写错误。如果出现拼写错误，会提示你。鼠标移到错误位置会提供一些合适的单词。
有了这个插件，再也不会被别人吐槽自己的拼错单词啦！
Git History
虽然
git log可以查看某个文件的相关历史提交，但不是很直观。而Git History插件能直观的把历史提交记录呈现出来。
使用该插件查看历史提交记录有两种方式。
- 在资源管理器中，打开你要查看的文件。然后右键，就会有
Git: View File History选项。
- 在代码编辑区中，鼠标右键即可。
Image preview
Image preview可以在代码中直接预览图片的插件。
在行左边显示引入图片的缩小版，鼠标移到引入图片路径会显示该图标。并且附加了两个功能，让你快速找到该图片。
Import Cost
Import Cost插件能显示你当前所导入的包或插件的大小。
indent-rainbow
indent-rainbow插件的主要功能是用不同的颜色标记缩进。
未安装前的效果。
安装后的效果。
koroFileHeader
koroFileHeader插件用于一键生成文件头部注释。点击此跳转该插件的文档
Path Intellisense
当你需要引入一个文件或图片时，会自动提示文件的路径。
@符号文件路径智能提示
如果你的项目配置了@路径别名，引入某个文件时。是不会提示文件的路径的。使得在引入文件时，还得一层一层对着文件夹。
为了解决这个问题，只要在VS Code的setting.json中加入以下配置即可。
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
},
也可以通过快捷键方式打开setting.json。
command⌘ + shift⇧ + P -> 搜索Open Settings（JSON） -> 选择Preferences: Open Settings (JSON)。
Project Manager
Project Manager插件很好的解决了多个项目来回切换的问题。安装成功之后，在编辑器主侧栏会有个文件夹的小图标。
如果要添加项目，可以通过快捷键command⌘ + shift⇧ + P，输入edit Projects，添加你本地的项目。
Better Comments
Better Comments插件可以让你代码的注释高亮起来。只要在注释的前面加上相应的前缀即可，插件自带5种高亮注释。
Bookmarks
Bookmarks插件可以在某行代码做标记，标记后在当行会有个小书签的图标。上下翻的时候可以用快捷键回到它的位置。
- 标记快捷键：
option⌥ + command⌘ + K - 跳到上一个标记：
option⌥ + command⌘ + J - 跳到下一个标记：
option⌥ + command⌘ + L
Trailing Spaces
Trailing Spaces这款插件可以帮我们标出一些没用的空格。搭配Prettier插件，直接将空格去除。
Color Highlight
Color Highlight是一款颜色代码高亮的插件。
HTML CSS Support
该插件的样式自动补全功能，可以帮助你在写样式的时候减少很多时间。
ES7+ React/Redux/React-Native snippets
用
React开发的同学必装插件，输入相应的英文字母，会提示相应的React代码段。这里是该插件的代码段文档
JavaScript (ES6) code snippets
该插件提供了ES6语法中的JS代码片段，同时支持JavaScript和TypeScript。
Vetur
这是
Vue多功能集成插件。包括智能提示、语法高亮、错误提示、代码格式化、自动补全、debugger。
要注意的是，如果你用Vue 3开发的话，要把这个插件禁用掉。不然在Vue 3会导致各种错误提示。
Vue 3 Snippets
这个插件包含了Vue 2和Vue 3
api对应的代码片段。输入相应的字母，会提示对应Vue代码片段。点击此跳转插件文档
Vue Language Features（Volar）
Vue Language Features (Volar)是专门为Vue 3构建的语言支持插件。但目前对PostCSS的语法高亮不友好。
CSS Peek
CSS Peek插件可以帮助你在HTML的类名class中查看该类的样式，或者跳转到当前类名class的位置。
鼠标移到当前类名按住command⌘键即可。
Prettier
Prettier插件用于格式化代码的。都2022年了！还有谁写代码乱糟糟的。安装插件后，配置保存文件时自动格式化代码。
基本配置：Setting -> Text Editor -> Formatting -> On Save勾上。
从此没人吐槽你的代码不公正了。
Live Server
Live Server插件能直接起本地服务器，访问你所写的html。修改html文件时，还会自动刷新。
安装后，在你的html中。鼠标右键，会多出一个Open with Live Server的选项。点击后，会自动打开浏览器。
Remote - SSH
Remote - SSH是一款可以连接远程开发服务器的插件。
Setting Sync
Setting Sync插件可以解决你每次换电脑或者家里的电脑和公司的电脑上的VS Code配置不一样问题。
最后
VS Code插件分享到此结束啦，如有更好玩的插件。欢迎在评论区评论。如果本文对你有所帮助，别忘了点赞 + 关注哦！
