配置方式:
- 在 package.json 中的 stylelint 属性指定规则
- 在.stylelintrc 文件中指定,文件格式可以是 JSON 或者 YAML。也可以给该文件加后缀,像这样:.stylelintrc.json,.stylelintrc.yaml,.stylelintrc.yml,.stylelintrc.js
- stylelint.config.js 文件,该文件 exports 一个配置对象 span>
按顺序查找,以上三种方式任何一项有值,就会结束查找
在项目根目录新建.stylelintrc.json 文件,复制以下内容
module.exports = { "extends": ["stylelint-config-standard", "stylelint-config-recess-order"], "rules": { "at-rule-no-unknown": [true, {"ignoreAtRules" :[ "mixin", "extend", "content", "include" ]}], "indentation": 4, "no-descending-specificity": null // 禁止特异性较低的选择器在特异性较高的选择器之后重写 } }
rules 优先级大于 extends,建议采用 extends 方式统一管理
配置文件中单独配置 at-rule-no-unknown 是为了让 Stylelint 支持 SCSS 语法中的 mixin、extend、content 语法。
片段禁用规则
/* stylelint-disable */ /* (请说明禁止检测的理由)前端组件限制类名 */ .cropper_topContainer .img-preview { border: 0 none; } /* stylelint-enable */
fix 方式
- stylelint --fix 就能搞定
更多语法规则请参考:https://stylelint.io/user-guide/usage/cli
- webstorm 可以配置 external tools 实现 autofix,添加 keymap 快捷键,
如果希望在保存时自动 fix, 参考这里https://blog.csdn.net/gyz718/article/details/70556188
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c59369.shtml