校对:Soup
说明 > 此叉已经 已贬值 赞成: 原包装。 。 。 . 请将您的依赖性更新到原始软件包来接收未来的更新和错误修正 .
A 类 样式lint 基于 树 以测试 CSS 语法。 它通过测试规则和声明值来匹配W3C的规格和浏览器扩展. 今后可能扩大范围,以验证CSS的其他部分.
QQ警告:插件的设计只是为了验证 CSS 语法. 不过
stylelint可能配置用于其他语法,如Less或Sass。 在这种情况下,插件避免检查含有非标准语法的表达式,但需要指定使用哪个预处理器syntaxExtensions选项.
安装
$ npm install --save-dev stylelint-csstree-validator
使用量
设置插件在 样式lint 配置数字 :
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": true
}
}
选项
语法扩展
类型 : Array<'sass' | 'less'> 或者说 false
默认 : false
由于插件侧重于 CSS 语法验证,它警告由Less 或 Sass 等预处理器引入的语法. 这个 syntaxExtensions 选项允许指定一些预处理器的语法用于样式,这样插件在遇到这样的语法时可以避免警告.
默认情况下,插件考试样式为纯 CSS 。 要指定使用预处理器的语法, 您必须指定一个带有这些扩展名的数组 。 目前得到支持的:
sass– 带有Sass语法的宣告值会被忽略,以及由Saas引入的自定义规则(例如.@if, (中文(简体) ),@else, (中文(简体) ),@mixin(见E/CN.4/Sub.2/2000/L.31)。 现在允许Sass at -rules 任何前奏, 但在未来发行中它可能会被替换为真正的语法定义less- 带有 Sass 语法的宣告值也会被忽略@pluginless提出的规则
使用两种语法扩展也是可能的:
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": {
"syntaxExtensions": ["sass", "less"]
}
}
}
规则
类型 : Object, (中文(简体) ), false 或者说 null
默认 : null
使用 false 选项的值会禁用规则验证.
否则,该选项用于扩展或修改规则语法词典。 规则定义包括: prelude 财务报告和审定财务报表 descriptors两者都是可选的。 A 类 prelude 是一个在规则名称后出现的单一表达式。 A 类 descriptors 是一个字典像 properties 选项,但针对特定规则. CSS 值定义语法 用于定义值的语法。 如果定义始于 | 它正在增加现有定义值(如果有的话)。 见 CSS 语法参考 用于默认定义.
以下例子定义了新的规则 @example 有序曲和两个描述符(描述符与声明相同,但没有) !important 允许 :
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": {
"atrules": {
"example": {
"prelude": "<custom-ident>",
"descriptors": {
"foo": "<number>",
"bar": "<color>"
}
}
}
}
}
}
属性
类型 : Object 或者说 null
默认 : null
扩展或修改属性语法词典的选项 . CSS 值定义语法 用于定义值的语法。 如果定义始于 | 它正在增加现有定义值(如果有的话)。 见 CSS 语法参考 用于默认定义.
下面的例子延伸 width 定义 size 属性 :
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": {
"properties": {
"width": "| new-keyword | custom-function(<length>, <percentage>)",
"size": "<length-percentage>"
}
}
}
}
使用 <any-value> 财产定义的替代方法 ignoreProperties 选项.
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": {
"properties": {
"my-custom-property": "<any-value>"
}
}
}
}
类型
类型 : Object 或者说 null
默认 : null
扩展或修改类型语法词典的选项。 类型类似于一种预设,允许在其他定义中重复使用定义. CSS 值定义语法 用于定义值的语法。 如果定义始于 | 它正在增加现有定义值(如果有的话)。 见 CSS 语法参考 用于默认定义.
以下示例定义了新的功能类型 my-fn() 扩展 color 类型 :
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": {
"properties": {
"some-property": "<my-fn()>"
},
"types": {
"color": "| darken(<color>, [ <percentage> | <number [0, 1]> ])",
"my-fn()": "my-fn( <length-percentage> )"
}
}
}
}
忽略
工作原理与 ignoreProperties 不过 已贬值,使用时 ignoreProperties 换句话说.
忽略规则
类型 : Array<string|RegExp> 或者说 false
默认 : false
定义插件应忽略的规则名称列表。 对规则的无知,是指对其名称,序曲或描述语没有验证. 所提供的名称用于完全对大小写不敏感匹配,即供应商前缀是强制性的,如果需要忽略前缀名称,也应提供前缀名称. 你用得着 RegExp 模式 名单里也有.
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": {
"ignoreAtrules": ["custom-at-rule", "-webkit-keyframes"]
}
}
}
忽略财产
类型 : Array<string|RegExp> 或者说 false
默认 : false
定义插件应忽略的属性名称列表。 所提供的名称用于完全对大小写不敏感匹配,即供应商前缀是强制性的,如果需要忽略前缀名称,也应提供前缀名称.
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": {
"ignoreProperties": ["composes", "mask", "-webkit-mask"]
}
}
}
在此示例中, 插件不会测试带有属性名称的声明 composes, (中文(简体) ), mask 或者说 -webkit-mask,即不会对这些声明提出警告。 你用得着 RegExp 模式 名单里也有.
忽略数值
类型 : RegExp 或者说 false
默认 : false
定义验证器应当忽略的值的图案.
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": {
"ignoreValue": "^pattern$"
}
}
}
例如, 插件将不会报告匹配给定模式的值的警告 。 但是,对于未知的属性仍将报告警告.
RegExp 模式
在某些情况下,需要一种更为一般的匹配模式,而不是确切的名称匹配。 在这种情况下,可以使用RegExp模式.
由于CSS名称是一个缩写符,不能包含用于RegExp的特殊字符,区分CSS名称和RegExp是一个小问题. 当插件遇到忽略图案列表中的字符串时,该图案列表中包含任何字符 a-z, (中文(简体) ), A-Z, (中文(简体) ), 0-9 或者说 -,它使用构造生成 RegExp new RegExp('^(' + pattern + ')$', 'i')换句话说,模式应完全匹配对案件不敏感.
要完全控制一个 RegExp 模式,一个正则 RegExp 实例或其字符串化版本(即. "/pattern/flags?")可以使用.
"foo|bar"转换为/^(foo|bar)$/i"/foo|bar/i"转换为/foo|bar/i(注:与前作"regExp"不同,因为不需要与名字完全匹配)/foo|bar/原样(注:无)i在 CSS 中, 匹配的标记会区分大小写, 没有任何意义 )
许可证
麻省理工学院