在项目中加入 eslint 或者 tslint 去规范我们在写 js 的语法。
但项目中占更大比重的一部分就是 css。很多项目不重视 css 的编写。
原因其一：基本上写完的页面，改动很小。要是大改动基本上重写一个页面的速度会更快。
原因其二：css 的性能影响相对较小，不如 js，如果写个死循环就 done 机了。
但是，作为程序员不能放弃追求美的步伐。
曾经你们的 css 项目肯定有这样的：
.style {
width: 100px;
padding:20px;
height: 30px; border: 1px solid #fff;
top: 0px;
position: fixed;
}
格式的不规范，css 样式的不规范。就算不重写，维护和开发也很糟心。
这里介绍一个 stylelint 的规范
stylelint-config-sf-css
在项目中引用的步骤
第一步：yarn add --dev stylelint-config-sf-css
第二步：在项目中加入一个 .stylelintrc.json 的文件
第三步：在 .stylelintrc.json 的文件中加入
{
"extends":[stylelint-config-sf-css]
}
第四步：在 VScode 安装一个插件 stylelint
第五步：如果校验不好使，可以 yarn / npm init
第六步：如果有想忽略的文件，可以加入 .stylelintignore
/node_modules
/output
/config
docs/
.tsx
.ts
如果有部分规则想自定义
可以在第三步，.stylelintrc.json 文件中加入 rules
{
"extends":[stylelint-config-sf-css],
"rules": { ... }
}
stylelint 的依赖
网友评论