1.Chinese (Simplified)

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

image-20210220105401254

中文插件chinese

2.Auto Rename Tag

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

image-20210220105413891

auto rename tag

3.One Dark Pro 颜色主题

image-20210220105430476

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

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

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

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

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

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

image-20210220105521706

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

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

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

image-20210220105536829

浏览器预览页面

vscode 浏览器打开页面

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

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

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

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

小技巧
注意点:

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

image-20210220105601112

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

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

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

image-20210220105617058

8.Easy LESS 编译less文件

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

image-20210220105629389

9.会了吧

一款翻译插件

image-20210220105655224

本站发布的部分内容包括:文章、图片、音频、视频、软件、程序等搜集于互连网,仅供学习交流,严禁用于商业用途,请于24小时内删除,如喜欢请购买正版,享受售后服务!
单龙网 » VScode必备安装插件