css代码规范工具stylelint

导读：

开源比较流行的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的处理流中加入本身的处理函数，就是这里的processors。 processors只能做为命令和Node API使用，PostCss的插件会忽略它们。 经过processors，咱们可让styleline去处理html中style标签里面的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 配置内容：

IDE插件

• webstorm插件，可以在 setting -> plugins -> browse repositories 中找到 IntelliJ Stylelint Plugin

  若是 browse repositories 中下载不了，能够去 官网下载对应插件 在 plugins-> install plugin from disk安装

• Atom：linter-stylelint
• Sublime：SublimeLinter-contrib-stylelint
• vs code： vscode-stylelint

建议推行方式

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

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

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

参考：

• devework.com/stylelint-i…
• www.jianshu.com/p/d29c1b652…