css代码规范工具stylelint

·  阅读 7985

导读:

开源比较流行的CSS lint方案:csslint、SCSS-Lint、Stylelint。

我们团队选择Stylelint,原因如下:

  • 其支持 Less、Sass 这类预处理器。团队使用less
  • 在社区活跃度上,有非常多的第三方插件
  • 在Facebook,Github,WordPress 等公司得到实践,能够覆盖很多场景

stylelint

配置方式:

按顺序查找,任何一项有值,就会结束查找

  • package.json中的stylelint属性指定规则

  • .stylelintrc文件中指定,文件格式可以是JSON或者YAML。也可以给该文件加后缀,像这样:.stylelintrc.json,.stylelintrc.yaml,.stylelintrc.yml,.stylelintrc.js

  • stylelint.config.js文件,该文件exports一个配置对象span>

语法格式:

rules优先级大于extends,建议采用extends方式统一管理

module.exports = {
  processors: [],
  plugins: [],
  extends: "stylelint-config-standard", // 这是官方推荐的方式
  rules: {
    "at-rule-empty-line-before": "always"|"never",
    "at-rule-name-case": "lower"|"upper",
    "block-no-empty": true,
  }
};
复制代码

插件列表:

  • 插件一般是由社区提供的,对stylelint已有规则进行扩展,一般可以支持一些非标准的css语法检查或者其他特殊用途。一个插件会提供一个或者多个检查规则
  • 插件地址

处理器列表:

  • 你还可以在stylelint的处理流中加入自己的处理函数,就是这里的processorsprocessors只能作为命令和Node API使用,PostCss的插件会忽略它们。 通过processors,我们可以让styleline去处理htmlstyle标签里面的css代码,MarkDown里面的css代码块或者js里面一段包含css的字符串。
  • 选项地址

规则列表:

ignore方式

// .stylelintignore
*.js
*.png
*.eot
*.ttf
*.woff
复制代码

片段禁用规则

/* stylelint-disable */
/* (请说明禁止检测的理由)前端组件限制类名 */
  .cropper_topContainer .img-preview {
    border: 0 none;
  }
/* stylelint-enable */
复制代码

fix方式

  • stylelint --fix 就能搞定 更多语法规则

  • webstorm可以配置external tools实现autofix,添加keymap快捷键,如果希望在保存时自动fix,参考这里

    external tool 配置内容:

image.png | center | 747x756

IDE插件

建议推行方式

  1. 规则制定期:本阶段先定制规则文件,并要求组内成员在编辑器或IDE 安装stylelint 插件辅助日常开发中使用。使用过程中可针对遇到的情况进行讨论并适当调整具体stylelint 规则。

  2. 规则过渡期:本阶段要求成员在开发过程中抽出时间对以前项目的代码进行优化。

  3. 规则监督期:本阶段将探索建立相应的自动化监督机制并在日常开发中施行下去。在precommit钩子中强制执行规则

参考:

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改