（27）StyleLint—CSS代码格式校验

一、StyleLint介绍

StyleLint就是对 CSS 代码格式进行检查。

二、使用 StyleLint步骤

• 初始化项目（ npm init --yes ）

• 安装 StyleLint （ npm install --global stylelint ）

• 安装检测标准 （ npm install --global stylelint-config- standard ）

• 创建配置文件 （ .stylelintrc.json ）

• 检查 CSS 代码格式

• 单个文件 （ stylelint path/filename.css ）

• 整个项目（ stylelint **/*.css ）

三、示例

1.初始化项目（ npm init --yes ）

2.安装 StyleLint （ npm install --global stylelint ）

3. 安装检测标准 （ npm install --global stylelint-config- standard ）

 4. 创建配置文件 （ .stylelintrc.json ）

5. 编写CSS代码进行代码格式检测

• 单个文件 （ stylelint path/filename.css ）

问题1：需要再*号后面加一个空格

问题2：一行中不能书写超过1个属性

问题3：{ 大括号后面需要有一个空格

问题4：key: value，冒号后面需要有一个空格

问题5：kay: value; 分号后面需要有一个空格

问题6：} 大括号之前需要有一个空格

问题7：写完一行代码，需要空出一行空白，如何判断，编辑器左侧有行数序号标记，比如我们写的是第一行，需要左侧显示序号1，2行，1行是我们写的代码行，2行是空白的一行。

当执行命令后不报错了，说明没有错误，代码已经很规范了。

注：我们通过工具帮我们检测的规范，我们再日常开发中尽量去遵循这些规范一次性书写正确，节省后期花费更改代码规范的时间。

• 整个项目（ stylelint **/*.css ）

这里的报错就是刚刚上面提到的，书写完一段代码，也就是}结尾后，需要又一个空白的换行，这是一个规范。我们使用了4行，但是呢正确规范需要我们有5行。

通过更改后我们发现，没有报错了，说明我们整个css目录文件夹下的css文件都没有错误啦。是规范的代码啦。

如下图：我们还可以通过"rules"字段进行自定义规则，比如我们如下示例检测空的css样式，也就是没有设置样式，只是使用CSS选择器，选中了该元素，但是没有设置任何该元素的样式，我们就应该将他检测出来，并删除或添加样式等方式解决。

注意：将来我们再企业公司做前端开发时，我们的rules字段公司再我们入职后会提供给我们一个规范文档，我们通过该公司的规范文档进行开发调试检测即可。不需要我们个人去指定rules规则，如果公司没有规范文档，我们可以用一些常见的规范书写代码即可。