文章目录
- 1.Material Theme
- 2.Prettier
- 3.Bracket Pair Colorizer2
- 4.Auto Rename Tag
- 5.Liver Server
- 6.取色工具 colorPix(个人更推荐使用下面第七个工具取色)
- 7.测量工具 FastStone
1.Material Theme
这是一个主题插件,它包含了多套不同色彩风格主题插件以及好看的样式图标。
2.Prettier
主要作用是格式化(美化)代码。即按保存时自动对齐。
安装这个插件并如上设置好之后,无论你写的是JS、HTML还是CSS,无论代码多丑,有没有正常缩进,只要你按Ctrl+s保存代码时,这个插件会帮你美化代码,使你代码整齐有序。
3.Bracket Pair Colorizer2
主要作用是将配对的括号显示相同颜色,不配对的括号显示不同颜色。
前面每一对相邻的括号颜色都不同,可用于快速找到对应的括号。这在我们多层嵌套中作用非常明显。
4.Auto Rename Tag
这个插件与html标签有关系,即当更改标签名,前后会统一改变,则不用前面标签改了,还得再去改后面的。
前后标签统一变化。
5.Liver Server
主要作用是在本地开启一个HTTP Server,并且可以监听Ctrl+S动作进行页面自动刷新。即最常见的就是我们在写html时,我们需要在浏览器查看页面布局效果,这时我们可以用Liver Server来打开这页面并再每次保存时刷新页面。
尽管我们的前端框架都有这种功能,但如果我们不是在开发项目而是在练习一些小页面,这就是不错的选择。
6.取色工具 colorPix(个人更推荐使用下面第七个工具取色)
当我们在模仿一些吸引人的网站时,为了达到同样的效果我们是不是要取网站布局的同样颜色,那我们如何取色呢?
推荐使用colorPix,下载网址。
当安装完成之后,我们打开软件,如下操作取色:
注意:我们取色是根据ColorPix工具放大镜下面的加号标记来决定取色定位,而不是根据我们鼠标位置。
7.测量工具 FastStone
当我们在模仿别人网站练习时,我们是不是不知道别人设置的height和width属性的大小,这就使得我们模仿别人网站时只能粗略使用数据,但我们可以借助fastStone工具来测量。下载网址。
我们下载的这个工具是收费工具,但是我们有好心博主给我们注册码,在这里先谢谢这位博主
name: bluman
注册码:VPISCJULXUFGDDXYAUYF
输入上述注册码之后,我们就可以免费使用了。
安装完成之后,如下图所示:
我们使用尺子来测量宽高:
测量宽:
测量高:
上面就是我们测量工具的使用。你可能也看到我上面标记了fastStone工具的“屏幕取色”功能吧,没错,这个工具也带有屏幕取色功能,个人认为这个工具取色更好用。
看看fastStone的取色功能:
fastStone工具非常强大,可用于截屏,录屏,修改装饰图片等等,我们这里只用到它的测量与取色,想学习其它功能,可以找视频学习。
更多推荐
前端开发 vscode推荐使用的插件以及屏幕取色与测量像素的工具 前端必备
发布评论