-->

signed

QiShunwang

“诚信为本、客户至上”

Vscode - 好用的一些插件推荐~

2021/6/3 16:11:20   来源:

今天这篇文章呢,是想和大家分享一波Vscode中一些好用的插件,可能不全,会持续更新,所以欢迎大家分享自己觉得好用的Vscode插件,咱们评论区见哦~

1.Live Server

在这里插入图片描述

作用:可以在本地启动一个服务器,可以实现热更新,实时地在网页中看到运行效果,就不需要每次都得手动刷新页面了。
使用方式:安装该插件后,在 HTML 文件中右键选择【Open with Live Server】,即可在本地启动一个服务器查看页面。

2.Chinese (Simplified) Language Pack for Visual Studio Code

在这里插入图片描述
作用:将软件汉化,灰常适合像我一样英语不好的童鞋~
使用方式:安装插件后,如果还未汉化,则可以先关闭软件,再次进入时就可以看到已经汉化完成的界面啦~

3.Bracket Pair Colorizer2

在这里插入图片描述

作用:以不同颜色显示成对的括号,并用连线标注括号范围。简称彩虹括号。
使用前后对比
是否使用,这个因人而异,我的感受是层级更加分明了些,但是有些人可能觉得太花了,那就忽略它吧~咱看下一个
在这里插入图片描述
在这里插入图片描述

4.open in browser

在这里插入图片描述

作用:open in browser是VScode的常用插件,它的作用是可以把编辑的HTML文件等用浏览器打开,查看效果。
使用方式:安装该插件后,在 HTML 文件中右键选择【Open in Default Browser】,即可在浏览器中预览网页。

5.vscode-icons

在这里插入图片描述
作用:vscode-icons 会根据文件的后缀名来显示不同的图标,让你更直观地知道每种文件是什么类型的。
使用前后对比
可以明显的感觉到使用该插件后我们可以更加直观的知道每种文件是什么类型的。
在这里插入图片描述

6.Project Manager

在这里插入图片描述
作用:在开发过程中,我们经常会来回切换多个项目,每次都要找到对应项目的目录再打开,比较麻烦。Project Manager 插件可以解决这样的烦恼,它提供了专门的视图来展示你的项目,我们可以把常用的项目保存在这里,需要时一键切换,十分方便。
使用步骤
1.配置文件:
windows或linux使用control+shift+p打开命令行窗口,输入Project Mangager: Edit Projects;
若是mac os系统则使用command+shift+p打开命令行窗口,输入Project Mangager: Edit Projects;
在这里插入图片描述
打开配置文件后,就可以以添加一个对象的方式添加一个项目进去了。一般添加一个项目都是先复制一份,然后只需要修改name值(项目名称)和rootPath值(项目所在目录)就可。
在这里插入图片描述
2.快速打开保存的项目:
在界面的左侧导航栏中新增了一个文件夹的图标,点击它,右侧的展示面板就会出现我们添加到配置文件中的项目了,这时我们只要将鼠标移至想要打开的项目文件名上,就会出现一个带有箭头的小图标,点击后就可以在新窗口中打开这个项目了~
在这里插入图片描述

7.Local History

作用:维护文件的本地历史记录,强烈建议安装。代码意外丢失时,有时可以救命。
注意事项
项目的根目录会生成一个.history目录,可以把.history加入到.gitignore中,就不会把历史文件提交到git中。
在这里插入图片描述

8.Polacode-2020

定义:可以把代码保存成美观的图片,主题不同,代码配色方案也不同,也可以自己设置边框颜色、大小、阴影。
有人可能会说:直接用 QQ 截图不行吗?可以是可以,但不够美观、不够干净。
使用步骤
windows或linux使用control+shift+p打开命令行窗口,输入Project Mangager: Edit Projects;
若是mac os系统则使用command+shift+p打开命令行窗口,输入Project Mangager: Edit Projects;
在这里插入图片描述
在左侧选择想要的代码,右侧则会生成相对应的图片
在这里插入图片描述
图片上方的选项用于自定义图片样式,下方的拍照按钮则是保存图片。
在这里插入图片描述