VSCode常用的插件

vscode之所以被称为宇宙第一神器，其中丰富的插件功不可没，安装起来超级简单，给我们开发带来了极大的便捷。注意，新手学习期间，不建议安装形形色色的插件，用到啥就安装啥。因为有些插件会到vue学习的时候引起冲突，所以这里介绍几个常用的插件。

Chinese (Simplified) 汉化
Auto Rename Tag
One Dark Pro 颜色主题
格式化代码（vscode系统自带）
open in browser 浏览器预览页面
Live Server 实时预览（推荐）
vscode-icons 设置文件图标主题
Easy LESS 编译less文件
会了吧学习单词插件（可以使用）

1. Chinese (Simplified)

vscode下载完毕是英文版的，先安装这个插件，改为中文版，所以是我们第一个安装的插件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-beJjilzn-1664096496987)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/vscode-chinese.png)]

2. Auto Rename Tag

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

3. One Dark Pro 颜色主题

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

页面的效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jmM3IWOo-1664096496996)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/one-effect.png)]

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

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

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

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

（1）点击管理按钮—选择里面的设置命令
vscode自动格式化代码
vscode 管理–设置
（2）选择用户 —> 文本编辑器 —> 正在格式化 —> 勾选如下图的2个按钮

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Np0DiTzD-1664096497002)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/vscode-open2.png)]

vscode 浏览器打开页面

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

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

live server 自动更新页面
小技巧：

刚开始学习前端，基本页面很少，可以左边编辑器，右边浏览器，这样编写完毕代码，保存完毕后，浏览器自动更新了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t55U8wyG-1664096497003)(https://cdn.jsdelivr.net/gh/lefengpiaoling/piclefeng/img/live2.png)]
小技巧
注意点：

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