vscode常用插件

1.Chinese (Simplified)  

vscode下载完毕是英文版的，先安装这个插件，改为中文版。

2.Auto Rename Tag 

修改开始标签，结束标签跟着自动变化，比较好用。

3.One Dark Pro   颜色主题 

我比较喜欢的一个颜色主题

页面的效果：

4.格式化代码（vscode系统自带） 

现在格式化代码的插件非常多，比如Prettier等等。 

刚开始学，不太建议安装插件，先自己手写规范的语法格式

但是html标签嵌套比较多，可能需要自动格式化比较好，所以我们可以利用vscode自动的功能格式化代码，暂且不用格式化插件，自动保存照样能格式化代码。

（1） 点击管理按钮---选择里面的设置命令

vscode 管理--设置

（2）选择用户 --->  文本编辑器  --->  正在格式化  --->  勾选如下图的2个按钮

vscode自动格式化代码

这样，我们不用安装插件，就可以自动保存自动格式化代码了。

4.open in browser   浏览器预览页面 

编写完代码，需要浏览器预览，可以安装这个插件

浏览器预览页面

vscode 浏览器打开页面

6. Live Server   实时预览（推荐） 

刚才的插件是可以预览我们的页面，但是改完代码，浏览器必须要重新刷新，比较麻烦，因此推荐各位小伙伴安装 live server 这个插件，修改完代码，自动更新浏览器，爽歪歪~~~

live server 自动更新页面

小技巧：

刚开始学习前端，基本页面很少，可以左边编辑器，右边浏览器，这样编写完毕代码，保存完毕后，浏览器自动更新了。

小技巧

注意点：

使用live server 各位小伙伴要注意， 先用vscode 打开 文件所在的目录文件夹哦。

7. vscode-icons   设置文件图标主题 

可以很清楚看到文件对用的图标。

只是为了看文件更加直观哈

8. Easy LESS   编译less文件

我们写的less不能直接引入到html文件中， 通过这个插件可以自动帮我们生成 css文件

8. 会了吧 

9.ESlint  语法提示校验  规范代码

10.Live sass compiler  将 scss 编译成  css

 11.Live Server 启动本地服务器插件

 12.Path intellisense  自动提示文件路径，支持各种快速引入文件

13.px to rem px一键转换成rem 在设置中配置比例，选中css文件 ALT+Z

 14. vetur  识别Vue文件且高亮显示

 15 vue系列 语法高亮   vue 2 snippets 与 vue 3 snippets

16.visual studio inteliCode 格式化代码  alt+shift+f

17.Tabnine AI Autocomplete（自动补齐代码）

 18.Code Spell Checker(能够帮助我们检查单词拼写是否出现错误，检查的规则遵循 camelCase （驼峰拼写法）)

19.Prettier-Code Formatter (格式化插件,需要百度设置一下格式）