在项目中引用 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

你可能感兴趣的:(前端,Stylelint,项目规范)