前言
上一篇我们已经将stylelint
环境运行起来了,在进一步配置之前,我们先来了解一下stylelint-webpack-plugin
这个插件,本文主要介绍这个插件的参数和返回值。大部分内容翻译自stylelint
官网的这篇教程。
stylelint
的使用场景之一就是作为webpack
的插件之一,这个插件就是stylelint-webpack-plugin
,具体用法如下:
var StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ...
plugins: [
new StyleLintPlugin(options),
],
// ...
}
接下来我们会详细探讨一下options
的取值情况。
stylelint
的另外一个用法是通过API调用,像这样:
stylelint.lint(options)
.then(function(resultObject) { .. });
因为stylelint-webpack-plugin
接收到的参数是直接传递给stylelint.lint
这个方法的,所以实际上我们探讨的是stylelint.lint
的options
。
Options
options
是一个对象,code
和files
这两个属性至少有一个且不能都有,其他属性都是可选的。
code
一段待处理的CSS字符串。
codeFilename
在直接使用code
属性来传递css
代码的情况下,你可以使用codeFilename
来指定与这段css
代码对应的文件。
举一个使用场景的例子:当stylelint
作为编辑器的插件来使用的时候,css
代码被直接传递给stylelint
,此时如果想要通过ignoreFiles
参数来使某个文件不被检查时就需要用到这个参数。
config
stylelint
配置对象。
config
和configFile
都没有时,stylelint
会按照如下顺序查找配置对象:
- 在
package.json
中查找stylelint
属性。 - 找
.stylelintrc
文件,文件格式可以是JSON
或者YAML
。也可以给该文件加后缀,像这样:.stylelintrc.json
,.stylelintrc.yaml
,.stylelintrc.yml
,
.stylelintrc.js
。 - 找
stylelint.config.js
文件,该文件exports
一个配置对象。
configBasedir
如果config
对象中存在相对路径,通过该参数指定那些相对路径的相对目录是什么。
configFile
stylelint
配置文件路径,可以是一个JSON
,JS
或者YAML
。
可以是一个绝对路径,也可以是一个相对路径,相对于你当前进程的运行路径(process.cwd()
)。
官方推荐的是绝对路径。
configOverrides
部分配置对象,拥有最高的优先级,可以覆盖其他的配置,包括config
属性指定的,.stylelintrc
指定的等等。
在你没有指定config
的情况下,stylelint
会去找.stylelintrc
文件,此时,如果你想要覆盖该文件的部分属性时,就可以使用该属性了。
files
文件查找规则字符串,或者包含一组文件查找规则字符串的数组,该参数会被直接传递给node-glob来查找需要检查的文件。
相对路径,默认情况下是相对于process.cwd()
。
默认情况下node_moduels
和bower_components
会被忽略。
formatter
可取值有:"json"
,"string"
,"verbose"
或者一个函数,默认值是"json"
。
指定stylelint
运行结果的输出格式。
运行结果格式如下:
// A stylelint result object
{
source: "path/to/file.css", // The filepath or PostCSS identifier like
errored: true, // This is `true` if at least one rule with an "error"-level severity triggered a warning
warnings: [ // Array of rule violation warning objects, each like the following ...
{
line: 3,
column: 12,
rule: "block-no-empty",
severity: "error",
text: "You should not have an empty block (block-no-empty)"
},
..
],
deprecations: [ // Array of deprecation warning objects, each like the following ...
{
text: "Feature X has been deprecated and will be removed in the next major version.",
reference: "https://stylelint.io/docs/feature-x.md"
}
],
invalidOptionWarnings: [ // Array of invalid option warning objects, each like the following ...
{
text: "Invalid option X for rule Y",
}
],
ignored: false // This is `true` if the file's path matches a provided ignore pattern
}
formatter
为函数时会接收到一个包含该对象的数组,函数需要处理这些对象后输出一个字符串。
ignoreDisables
是否忽略禁用标识,比如:/* stylelint-disable block-no-empty */
,默认值是false
。
disableDefaultIgnores
默认值为false,此时stylelint
会忽略node_modules
和bower_components
的内容。
cache
保存上次stylelint
的检查结果,再次运行时只对改变的文件进行检查,可以大大提高stylelint
的运行效率。
缓存结果保存在process.cwd()
目录下的.stylelintcache
文件中。文件位置可以通过cacheLocation
指定。
已经保存了缓存的情况下,将cache
置为false
后再次运行时,stylelint
认为.stylelintcache
文件已经失效,会直接删除该文件。
cacheLocation
stylelint
缓存文件地址。
如果该地址指向一个文件夹,stylelint
会在该文件夹下根据process_cwd()
的hash
值来创建文件,比如cache_hashOfCwd
,这样stylelint
可以在不同的项目中使用一个缓存目录。
如果cacheLocation
指定的目录不存在,一定要在目录末尾加上/
(windows
上加\
),否则该目录会被认为是一个文件。
reportNeedlessDisables
该值设为true
时,ignoreDisables
也会被设为true
。此时stylelint
的运行结果将包含一个needlessDisables
属性,值为一个数组,输出每一个文件中包含的无用禁用stylelint
检查的注释。
一般可以通过该属性来对代码进行检查和清理。
ignorePath
需要忽略的文件目录规则,可以是绝对目录,也可以是相对于process.cwd()
的目录。一般情况下stylelint
会在process.cwd()
目录下的.stylelintignore
文件中查找忽略规则。
syntax
可取值有:"scss"
,"less"
,"sugarss"
。
用来指定语法规则,不指定的情况下通过文件后缀自动识别:.less
,.scss
,.sss
。
或者通过customSyntax
自定义语法规则。
customSyntax
一个绝对路径,指向一个自定义语法规则模块,该模块需要兼容PostCss
,详情。
fix
设置为true
时,stylelint
会在源文件中尽可能多的修复发现的错误,不能修复的错误才会被报告出来。
返回值
stylelint.lint()
返回一个promise
,resolve
一个对象。当文件内部出现语法错误时,stylelint
不会reject
该promise
,它会在返回的结果中包含该语法错误。
errored
如果该属性为true
,那么检查结果里面包含至少一条error
级别的错误。
output
检查结果字符串。
postcssResults
一个数组,包含在执行的过程中积累的PostCSS LazyResult。
results
包含styelint
检查结果的数组。