VSCode常用插件


一、VSCode常用的插件

目录

1.Chinese (Simplified)  

 2.Auto Rename Tag 

3.One Dark Pro   颜色主题 

4.格式化代码(vscode系统自带) 

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

​6. Live Server   实时预览(推荐)  

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

8. Easy LESS   编译less文件

9. 会了吧 

10.git history

11.GitLens — Git supercharged

 12.Bracket Pair Colorizer

 13.Path Intellisense

 14.Auto Close Tag

15.Vetur

 16.HTML CSS Support



1.Chinese (Simplified)  

vscode下载完毕是英文版的,先安装这个插件,改为中文版,所以是我们第一个安装的插件。 

 中文插件chinese

 
2.Auto Rename Tag 

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

 auto rename tag


3.One Dark Pro   颜色主题 

one dark pro


4.格式化代码(vscode系统自带) 

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

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

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

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

 vscode 管理--设置

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

 vscode自动格式化代码

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

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

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

 浏览器预览页面

vscode 浏览器打开页面


6. Live Server   实时预览(推荐)  

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

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

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

 小技巧


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

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


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


8. Easy LESS   编译less文件

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

esay less 


9. 会了吧 

 是的,你没看错,这个插件的名字就是 <会了吧>

你是不是还在为英文单词不认识而发愁,是不是认识不会读而烦心, 这个插件你值得拥有。
里面会有单词介绍,点击还会有发音

10.git history

查看git 提交历史记录和代码作者 

11.GitLens — Git supercharged

每行代码后面都可以看见commit的信息 

 12.Bracket Pair Colorizer

虹花括号着色

 13.Path Intellisense

动路径补全

 14.Auto Close Tag

自动闭合HTML/XML标签

15.Vetur

 支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件,比如Sass和TypeScript

 16.HTML CSS Support

HTML CSS 提示

17.Path Autocomplete

可以提供路径检查提醒,避免书写错误

在 settings.json 中进行配置:

 "path-autocomplete.extensionOnImport":true,
 "path-autocomplete.pathMappings": {
        //配置@的路径提示
        "@":"${folder}/src"
  },