然后可以手动在命令行运行:
npm run lint:css npm run lint:css -- --fix npm run lint:css -- --cache --fix 通过 webpack 插件运行 // webpack.conf.js const StyleLintPlugin = require('stylelint-webpack-plugin'); module.exports = { ... 'plugins': [ ... new StyleLintPlugin({ 'files': ['**/*.{html,vue,css,sass,scss}'], 'fix': false, 'cache': true, 'emitErrors': true, 'failOnError': false }) ] };stylelint 支持的所有命令行选项都可以在初始化插件时传递 options 来指定,包括上文提到的 --syntax 等。更多可以参考 stylelint-webpack-plugin 官方文档。
编写配置 配置对象stylelint 支持 cosmiconfig 的配置方式,按如下顺序查找配置对象:
在 package.json 中的 stylelint 属性
JSON / YAML / JS 格式的 .stylelintrc 文件(可带后缀)
导出 JS 对象的 stylelint.config.js 文件
它的配置也非常简单,只有 rules 、 extends 、 plugins 、 processors 、 ignoreFiles 和 defaultSeverity 。
其中 defaultSeverity 只支持 "warning" 和 "error" 两种,用于定义全局默认的报错等级。但是它没有相应的 cli 选项,实际上不太好用——比如你想 stylelint-webpack-plugin 只是警告,而 git-hooks 则是直接报错不允许提交的时候。文档上关于如何对规则单独配置错误等级有一句话提到了如何去控制:
Different reporters may use these severity levels in different way, e.g. display them differently, or exit the process differently.
但是却没有在其他地方或者 Developer guide 中找到任何与 reporters 有关的信息,有可能是需要自己写一个 formatter 。
一个简单的配置示例:
// stylelint.config.js module.exports = { 'defaultSeverity': 'error', 'extends': [ 'stylelint-config-standard' ], 'plugins': [ 'stylelint-scss' ], 'rules': { // 不要使用已被 autoprefixer 支持的浏览器前缀 'media-feature-name-no-vendor-prefix': true, 'at-rule-no-vendor-prefix': true, 'selector-no-vendor-prefix': true, 'property-no-vendor-prefix': true, 'value-no-vendor-prefix': true } };由于可以用 stylelint-scss 去解析文件中的 scss 代码,我们暂时不需要使用官方列出的任何 processors 。
忽略文件虽然可以通过配置 ignoreFiles 来简单实现,但是我们可能期望在一些遗留的老旧代码上先暂时不启用 stylelint ,等后续再慢慢放开,这样的话需要配置的文件路径就有点多了。为了方便我们可以再编写一个 .stylelintignore 文件,它的语法是跟 .gitignore 和 .eslintignore 一样的:
# .stylelintignore # 旧的不需打包的样式库 *.min.css # 其他类型文件 *.js *.jpg *.woff # 测试和打包目录 /test/ /dist/ # 通过反取忽略目录 /src/component/* !/src/component/CompA !/src/component/CompB # 这样的效果是除 CompA 和 CompB 外其他目录都会被忽略更多可以参考 node-ignore 。
stylelint 与 eslint 同时使用 git-hooks 配置如果项目中已经在用 husky 的 pre-commit 钩子来运行 eslint ,现在要加 stylelint 其实很简单:
// package.json { ... "lint-staged": { "*.{vue,js}": [ "eslint --fix", "git add" ], "*.{html,vue,css,sass,scss}": [ 'stylelint --fix', 'git add', ] }, "husky": { "hooks": { "pre-commit": "lint-staged", } } }唯一需要注意的是, lint-staged 默认是并行运行的,同时对 .vue 文件做 git add 会不会有冲突?暂时未在网上见相关讨论,我自己运行也没有任何问题,如果实在担心的话,可以将 glob 匹配分开定义。
局部禁用规则也是跟 eslint 类似的,我们可以通过 stylelint-disable 注释来局部禁用某一项规则。
<style> /* stylelint-disable selector-no-vendor-prefix, property-no-vendor-prefix, value-no-vendor-prefix */ .classA { -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; /* stylelint-disable declaration-block-no-duplicate-properties */ transition-property: transform; transition-property: transform, -webkit-transform; /* stylelint-enable */ } </style>但是随之而来的是一个常见错误:你在文件头部忽略了对浏览器前缀的提示,却在另一个遥远的地方由于暂时性允许同名属性,通过 /* stylelint-enable */ 把之前所有忽略的规则都重新开启了。所以一定要注意,只 enable 对应的规则,形成呼应:
<style> .classA { /* stylelint-disable declaration-block-no-duplicate-properties */ transition-property: transform; transition-property: transform, -webkit-transform; /* stylelint-enable declaration-block-no-duplicate-properties */ } </style> 其他注意事项
解析 .vue 文件(单文件组件)时请勿使用 processors
网上一些过时的教程包括 github 上的讨论都推荐使用 stylelint-processor-html 或者 @mapbox/stylelint-processor-arbitrary-tags 来解析 html 或 vue 中的 css ,这本身并没有什么问题,但是这个插件有个 bug ,当指定 stylelint 的 --fix 后将会把 vue 文件中 <style>...</style> 以外的部分删掉。
我们使用自定义语法 postcss-html 或者保留 stylelint-scss 插件就足够了。
一些规则在跑 --fix 选项时是有 bug 的