前端开发 vscode推荐使用的插件以及屏幕取色与测量像素的工具 前端必备

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工具非常强大，可用于截屏，录屏，修改装饰图片等等，我们这里只用到它的测量与取色，想学习其它功能，可以找视频学习。