StyleLint就是对 CSS 代码格式进行检查。
• 初始化项目( npm init --yes )
• 安装 StyleLint ( npm install --global stylelint )
• 安装检测标准 ( npm install --global stylelint-config- standard )
• 创建配置文件 ( .stylelintrc.json )
js修改css样式属性?• 检查 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 )
css代码怎么用,这里的报错就是刚刚上面提到的,书写完一段代码,也就是}结尾后,需要又一个空白的换行,这是一个规范。我们使用了4行,但是呢正确规范需要我们有5行。
通过更改后我们发现,没有报错了,说明我们整个css目录文件夹下的css文件都没有错误啦。是规范的代码啦。
如下图:我们还可以通过"rules"字段进行自定义规则,比如我们如下示例检测空的css样式,也就是没有设置样式,只是使用CSS选择器,选中了该元素,但是没有设置任何该元素的样式,我们就应该将他检测出来,并删除或添加样式等方式解决。
注意:将来我们再企业公司做前端开发时,我们的rules字段公司再我们入职后会提供给我们一个规范文档,我们通过该公司的规范文档进行开发调试检测即可。不需要我们个人去指定rules规则,如果公司没有规范文档,我们可以用一些常见的规范书写代码即可。
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态