一、必备插件
🌾Chinese(中文)
![](https://img-blog.csdnimg.cn/ca6f8c9c487545c6b18f1dc64cbbd3eb.png)
Settings Sync(配置同步到云端)?
可以让我们的vscode配置同步到云端,当我们跟换电脑或者再次安装vscode的时候,只需要登录账号即可同步配置了
![](https://img-blog.csdnimg.cn/872c247f051f45868efdf2b1b3194f93.png)
?wakatime(编程时间及行为跟踪统计)
?![](https://img-blog.csdnimg.cn/f526d08565d84afea8094d4f727eb3e1.png)
二、效率神器
?HTML Snippets(代码提示)
![](https://img-blog.csdnimg.cn/b42e15b1e54d42c292e2b0d005bd7ca4.png)
HTML代码片段,该插件可为你提供html标签的代码提示,不用键入尖括号了
Auto Close Tag(自动闭合标签)
自动闭合HTML/XML标签
![](https://img-blog.csdnimg.cn/ce23c408675f452daf3c3ec5ac94f5e1.png)
Bracket Pair Colorizer(括号做颜色区分)?
不过此扩展现已经内置到VsCode里面了。不需要再安装了。
![](https://img-blog.csdnimg.cn/1cfe08c1674b4fa09916755357987a96.png)
Live Preview(VSCode里面打开浏览器)?
可以在vscode里面打开浏览器,一边编码一边查看
![](https://img-blog.csdnimg.cn/95fc8abe3cc7493a8c5038d8c1897bd7.png)
REST Client(接口调试)?
可以在vscode里面进行接口调试,提供丰富的api配置方式,让我们不用离开编辑器也可以随时调用接口调试
新建一个.http文件,写下基本的测试代码,点击 Send Request即可在右边窗口查看接口返回结果,非常nice
![](https://img-blog.csdnimg.cn/ec3f40b40f494cef928cebed6210e168.png)
CSS Peek(css样式查看器)?
![](https://img-blog.csdnimg.cn/f38f94d7c53640f393cc7eeb10c229d2.png)
Partial Diff(文件比较)?
![](https://img-blog.csdnimg.cn/81e458a786bc4d5c9a03fa0d55355674.png)
open in browser(快速打开html文件到浏览器预览) 快速打开html文件到浏览器预览
Path Intellisense(快速引入文件) 自动提示文件路径,支持各种快速引入文件
![](https://img-blog.csdnimg.cn/1eedb577639340cda38f32fa322a2f05.png)
Image preview(预览图片) 鼠标悬浮在链接上可及时预览图片
![](https://img-blog.csdnimg.cn/94ff5d84ae06484297c84191011d1bf3.png)
三、Git集成
GitHub Pull requests(?查看和管理GitHub拉取请求和问题)
在Visual Studio Code中查看和管理GitHub拉取请求和问题
![](https://img-blog.csdnimg.cn/a216860b772d4d23bebb960757456927.png)
Git Graph(Git 图形化显示和操作)?
![](https://img-blog.csdnimg.cn/aa2e0f27caa24479bee8bf7488af904e.png) ![](https://img-blog.csdnimg.cn/d57af4c8b9e84e8a888b88c4b6028d0e.png)
GitLens(快速查看更改行或代码块的对象)
GitLens可以帮助您更好地理解代码。快速查看更改行或代码块的对象
![](https://img-blog.csdnimg.cn/bc67b4adfad247ef8c25142464e450dc.png)
GitHistory(可查看和搜索git日志以及图形和详细信息)?
GitHistory可查看和搜索git日志以及图形和详细信息,同时还支持分支比较,分支管理等操作?
![](https://img-blog.csdnimg.cn/d843da37b05746468d14bd189ab051ac.png)
四、美化
(黑白两款皮肤)
![](https://img-blog.csdnimg.cn/0b6e1a2ec2804f168fb2c20d77603e72.png)
vscode-icons(漂亮的目录树图标主题)?
![](https://img-blog.csdnimg.cn/50789e5da7e24efea2a3dc88a8c64179.png)
Beautify(右键鼠标一键格式化)?
在代码文件右键鼠标一键格式化 html,js,css
![](https://img-blog.csdnimg.cn/95eabd3bf1ab465791d817d99905ee9a.png)
Vetur(官方钦定Vue插件)
![](https://img-blog.csdnimg.cn/0243e1ef5a0f47d6854b835eecbcafb7.png)
VScode官方钦定Vue插件,Vue开发者必备。内含语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger等实用功能?
五、代码规范
代码风格规范类插件
Better Align(代码优雅排版)
![](https://img-blog.csdnimg.cn/8ffb4478f1b3488990a598ce3b533b70.png)
代码优雅排版
选中代码配合组合键[Ctrl+Shift+p],输入Align即可
自定义样式,需要写入配置代码
配置代码
"better-comments.tags": [ {"tag": "*","color": "#98C379","strikethrough": false,"backgroundColor": "transparent" }]
使用// * 绿色的高亮注释复制代码TODO Tree
change-case(变量命名规范)?
![](https://img-blog.csdnimg.cn/85faf76ed18449f7a491b6a4a706eb8d.png)
JavaScript Booster(代码改进)
会提示对应的不合理原因和改进方案
?JavaScript (ES6) code snippets(智能提示与快速输入)
![](https://img-blog.csdnimg.cn/72a7cf93ada44694a38364af20cc0753.png)
Code Spell Checker(拼写检查程序)
是拼写检查程序,检查不常见的单词,如果单词拼写错误,会给出警告提示?
![](https://img-blog.csdnimg.cn/0df383dddcaa43a7b464eaea2eaae536.png)
?
?
?
?
|