在项目中引用 stylelint 规范

在项目中加入 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 的依赖

• stylelint
• stylelint-config-standard
• stylelint-config-recess-order
• stylelint-order