Stylelint 接入说明

前因 为什么要使用 Stylelint

stylelint 用来检查样式文件 css less sass 等是否符合规范, css 不能算作严格意义的编程语言，它是以描述为主的样式表，如果描述的混乱，没有规则，对于开源项目的协作者来讲，一定是一个定时炸弹。

• Styleint 官网

预期使用节点

1. 开发时通过 vscode Stylelint 插件触发，并借助 vscode 等代码编辑器报错提示
2. commit 提交时, 通过 husky 触发 lint-staged 然后触发 stylelint
3. 执行 build 时 build 工具中触发 stylelint 检查

1. Stylelint 配置说明

0. 配置文件

stylelint使用 cosmiconfig 查找并加载您的配置对象, 我们在项目目录下创建

.stylelintrc.js

配置文件即可

module.exports = {
    extends: [],
    plugins: [],
    processors: [],
    rules: {} 
}
           

1. rules 规则

rules 是一个对象, 用来配置 stylelint 该怎么检查，如何报错，规则取值各不相同，详情查看

2. extends 扩展

用来继承一个已存在的配置文件，其优先级低于 rules, 即我们配置的 rules 会覆盖我们所继承的扩展中的rules

3. plugins 插件列表

用来扩展 stylelint 规则(例如添加新规则) ，可以用来支持一些非标准的语法检查，plugin 中提供规则后就可以在 rules 中使用这些规则了

{
  "plugins": [
    "../some-rule-set.js"
  ],
  "rules": {
    "some-rule-set/first-rule": "everything",
    "some-rule-set/second-rule": "nothing",
    "some-rule-set/third-rule": "everything"
  }
}
           

4. processors 处理器列表

可以配置来让 stylelint html 中的 style 或者 js 中包含 css 的字符串等

2. 一个 stylelint less 配置示例

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier" // 排除与 prettier 冲突的 rule
  ],
  "plugins": [
    "stylelint-prettier", // 通过插件让 stylelint 检查可以借助 prettierrc 的配置
	"stylelint-order" // 一个关于约束属性编写排序的 plugin
	],
  "rules": {
    "prettier/prettier": true // 开启
    "max-nesting-depth": 4, // 最大嵌套层级
    "order/order": [ // 排序 css 自定义变量 --variable 列在最前边
      ["custom-properties", "declarations"], {
        "disableFix": true
      }
    ],
     "order/properties-order": [ // 内置属性排序, 所有 css 属性都可排序
          "position",
          "top",
          "right",
          "bottom",
          "left",
          "z-index",
          "display",
          "float",
          "width",
          "height"
     ]
  },
  "ignoreFiles": [
    "**/*.js",
    "**/*.ts",
    "**/*.tsx",
    "**/*.png",
    "**/*.svg",
    "**/*.jpg",
    "**/*.jpeg"
  ]
}
           

3. 代码编辑器接入 stylelint 辅助开发时报错提示

日常开发时，使用代码编辑器提供的 stylelint 插件，帮助提示报错，甚至可以通过一定的配置，让我们在保存时，auto fix

vscode 配置

1. 下载安装 stylelint vscode 插件

   

1. .vscode/settings.json

   中设置如下内容

{
  "stylelint.packageManager": "yarn",
  "stylelint.syntax":"less",
  "stylelint.validate": [
    "css",
    "less",
  ],
  "css.validate": false,
  "less.validate": false,
  "[less]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": true
    }
  }
}
           

保存后重启 vscode , 即可实现 保存后 auto fix less 文件

1. 如果不想保存后 autofix 可以将上边配置中

   source.fixAll.stylelint: false

   关掉，然后在我们需要 fix 时，使用快捷键 shift + cmd + p 唤起 命令面板， 在命令面板中搜索 “auto fix” 找到 stylelint 的命令点击即可实现手动 fix，也可以给这个命令配置一个快捷键，方便使用

webstorm 配置

1. 首先打开 webstorm 对 stylelint 检查的支持，进入 WebStorm Preferences 首选项配置，找到 Languages & Framworks > Style Sheets > Stylelint , 勾选 enable 即可

1. 进入 WebStorm Preferences 首选项配置，找到 Tools > File Watchers, 点击左下角

   +

   创建一个 watcher

1. 按照图片填写 watcher 配置, 注意配置好要 watch 的 File type , 配置中使用的变量代表的含义可以点击输入框后

   +

   来查看

1. 保存后重启 WebStorm, 即可实现在保存 less 文件时自动 autofix

1. 如果不想每次保存都 autofix ，也可以设置一个“工具”（External Tools），来在我们需要 fix 时，手动触发， 如下图配置

在 less 文件中鼠标右键，即可在唤起的菜单中找到 stylelint 这个 Tool, 点击后，自动 fix

4. 集成 stylelint 到 lint-staged 中

package.json 中创建 script

{
  "scripts": {
    "lint-staged:style": "stylelint --fix --syntax less",
    ...
  },
}
           

lint-staged 中增加如下内容

module.exports = {
  'src/**/*.less': (fileNames) => {
    const fileStr = fileNames.join(' ');
    return [
      fileNames.length > 30 ? 'yarn lint-staged:style src/' : `yarn lint-staged:style ${fileStr}`,
      `prettier --write ${fileStr}`,
    ];
  },
}