vue技术文stylelint

web学习笔记07-stylelint构造及规则了解

2016-09-28  本文已影响1239人  点柈

    上一篇文章主要讲了stylelint的简单实用，这里续了一片关于规则什么的详细点的文。

    这篇文章主要是对stylelint的构造和规则，根据官网的英文文档， 我花了点时间进行了简单的翻译工作，把主要的意思大概写了一下，算是一篇笔记吧。具体的规则方面有些我就直接用有道翻译的，因为量太大了，我自己主要翻译的就是前半段，加上规则的部分内容，有道翻译的没翻译好的，我顺道给改了改。自己写的demo还没有完善好，等找时间，我完善之后上传下。

    其实吧，这个stylelint用起来基本上跟eslint差不多，也可以跟gulp一块用，这个方面我还没有开始研究，可能明天或者后天会进行研究。然后后续也可能再补上一篇文。感觉时间好不够用，这一天研究研究，就过去了。好希望一天是240小时。大家看这篇文章要是有啥不懂的可以去官网查看查看，其实里面有不少内容我自己也没有弄清楚呢，还有待研究，大家要是有兴趣的可以跟我一起讨论讨论。

stylelint configuration(构造)

加载配置对象

    从工程中查找和加载配置项，一般会从当前的工作目录中，以下面的顺序查找可能的来源：

    .stylelintrc文件格式可以是JSON，可以是YAML格式的，你也可以添加文件扩展名来指定文件内容格式是JSON，YAML，或者是JS格式。.stylelintrc.json, .stylelintrc.yaml, .stylelintrc.js。

    你可能需要使用扩展，使你的文本编辑器，可以更好地解释文件，并帮助语法检查和高亮。

    一旦其中之一被发现和解析，搜索将停止，该对象将被使用。

配置对象

    配置对象可以有下面这些属性

rules

1.基本格式

    个人认为规则算是检查器里极其重要的配置项了，stylelint有超过一百五十条的规则，这些规则没有是默认打开的，都需要自己根据自己的需要进行设置开启。

    规则属性是一个对象，它的键是规则的名称，值是规则配置。每个规则配置符合下列格式之一：

示例：

{
    "rules": {
        "block-no-empty": null,
        "color-no-invalid-hex": true,
        "comment-empty-line-before": [ "always", {
            "ignore": ["stylelint-commands", "between-comments"],
        } ],
        "declaration-colon-space-after": "always",
        "indentation": ["tab", {
            "except": ["value"]
        }],
        "max-empty-lines": 2,
        "rule-nested-empty-line-before": [ "always", {
            "except": ["first-nested"],
            "ignore": ["after-comment"],
        } ],
        "unit-whitelist": ["em", "rem", "%", "s"]
    }   
}

指定了一个primary option就是打开了一个规则。

2.在css文件中关闭规则

    在css文件中，你可以暂时关闭某条规则，也可以关闭所有规则：

/* stylelint-disable */
a {}
/* stylelint-enable */

    你也可以关闭个别规则：

/* stylelint-disable selector-no-id, declaration-no-important   */
#id {
    color: pink !important;
}
/* stylelint-enable */

    在你不需要明确地重新启用的规则处，你也可以通过/* stylelint-disable-line */关闭个别行：

#id { /* stylelint-disable-line */
    color: pink !important; /* stylelint-disable-line declaration-no-important */
}

    当然你也可以通过/* stylelint-disable-next-line */来关闭那些你不需要明确重新启用的下一行规则：

#id {
    /* stylelint-disable-next-line declaration-no-important */
    color: pink !important;
}

    有些复杂的，重叠的禁用和启用模式同样支持：

/* stylelint-disable */
/* stylelint-enable foo */
/* stylelint-disable foo */
/* stylelint-enable */
/* stylelint-disable foo, bar */
/* stylelint-disable baz */
/* stylelint-enable baz, bar */
/* stylelint-enable foo */
3.严重程度：error & warning

    跟eslint差不多，stylelint也有严重程度的分别，默认情况下，所有的规则都有一个error级别的严重程度，你可以在配置中通过添加defaultSeverity属性来改变默认值

    要调整任何具体规则的严重程度，使用辅助选项severity，可获得的值有

示例：

// error-level severity examples
{ "indentation": 2 }
{ "indentation": [2] }

// warning-level severity examples
{ "indentation": [2, { "severity": "warning" } ] }
{ "indentation": [2, {
        "except": ["value"],
        "severity": "warning"
    }]
}

不同的情况会使用不同的严重级别。例如不同的显示，或者不同的退出过程等等。

4.自定义消息

    如果您想在一个规则被违反，提供自定义消息，你可以用两种方式做到这一点：提供一个message选项，或者写一个自定义格式。

    所有的规则都接受一个次要选项message,如果提供了该选项，意味着将会取代任何默认提供的标准信息。举个例子，以下规则配置将替代几个自定义消息：

{
    "color-hex-case": [ "lower", {
        "message": "Lowercase letters are easier to distinguish from numbers"
    } ],
     "indentation": [ 2, {
         "ignore": ["block"],
         "message": "Please use 2 spaces for indentation. Tabs make The Architect grumpy.",
        "severity": "warning"
     } ]
}

如果你想最大程度的进行控制，你应该写自定义格式的规则。(自定义消息部分的思想我大概理解，但是不怎么会翻译。。尴尬。。。)

扩展

    你的配置可以扩展一个现有的配置，无论这个配置是你自己的还是第三方的。当一个配置扩展了另一个配置，它在被扩展的配置项开始的时候开始，并且添加在其之后或者直接覆盖当前配置。

    你也可以扩展现有配置的阵列，优先于阵列中的各项（因此第一项压倒一切，第二个项目压倒一切除了第一项，以此类推。个人理解就是你一个草民扩展了，你当皇帝了，那你就是老大，比谁都牛，你要是宰相呢，那你就是除了皇帝以外，比谁都厉害，你要是什么七品芝麻官，除了比你级别高的，你比下面的人都厉害等等。）。

    举个例子，扩展下stylelint-config-standard改变缩进的标签，并且关闭number-leading-zero规则:

{
    "extends": "stylelint-config-standard",
    "rules": {
        "indentation": "tab",
        "number-leading-zero": null
    }
}

或者用stylelint-config-standard开始，然后在这顶部把myExtendableConfig分层，然后覆盖缩进规则

{
    "extends": [
        "stylelint-config-standard",
        "./myExtendableConfig"
    ],
    "rules": {
        "indentation": "tab"
    }
}

extends的值是locater,最终是require()，所以它可以适合用node的require.resolve（）算法的任何格式。这就意味着locater可以是：

plugins（插件）

    插件是支持方法，工具集，非标准CSS功能，或者非常具体的用例规则或套由社区建立规则。

    想要使用插件，就添加plugins阵列配置项到你的配置文件中，值可以是一个npm模块的名字，可以使一个绝对路径，也可以是一个调用配置文件的相对路径。

{
    "plugins": [
        "../special-rule.js"
    ],
    "rules": {
        "plugin/special-rule": "everything"
    },
}

    一个插件可以提供一个规则或者一组规则，如果你用的插件提供了一组规则，只需调用模块中的插件配置值，并且使用它在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"
    },
}

Processors（处理器）

    处理器是挂钩到stylelint的管道，修改的道路上的代码到stylelint并就其出路改变结果的功能。

    处理器只能与CLI和节点的API，而不是与PostCSS插件使用。 （该PostCSS插件会忽略它们。）

    使用的话，添加processors阵列配置项到配置文件中，用起来跟扩展差不都多。

{
    "processors": ["stylelint-html-processor"],
    "rules": {..},
}

如果你的处理器有选项，其第一个项目是“定位”和第二项是选择对象。

{
    "processors": [
        "stylelint-html-processor",
        [ "some-other-processor", { "optionOne": true, "optionTwo": false } ]
    ],
    "rules": {..}
}

ignoreFiles

    提供一个glob或globs数组忽略特定文件。

    另一种方法是使用一个.stylelintignore文件，描述如下。

    如果glob是绝对路径，它们就这样用。如果他们是相对的，它们是相对于分析

这个属性呢，从扩展配置剥离：只有root级别的配置可以忽略文件。

defaultSeverity

    默认严重级别

.stylelintignore

    你可以使用.stylelintignore文件（或者指定另一个忽略模式的文件）来忽略特定文件。（另一种方法是使用一个config.ignoreFiles，如上所述）

    在你.stylelintignore文件中的模式必须匹配.gitignore语法。（之后，node-ignore会解析你的模式），这其中的一个含义是，在你文件中的模式总是相对于process.cwd（）进行分析

    stylelint会在process.cwd（）中寻找一个.stylelintignore文件，你还可以指定你的忽略模式的文件路径（绝对或相对于process.cwd（））使用--ignore路径（在CLI）和ignorePath（在JS）选项。

stylelint rules

    stylelint rules官方地址

    规则专注于规范化css，旨在作用于广大用户。除了规则呢，还有插件，插件是由社区建立，可以支持方法，工具集，非标准CSS功能，或者非常具体的用例规则。

    每一条规则是独立的，默认情况下关闭。规则也没有默认值。

规则列表

Color

font-family

function

Number

String

Length

Time

Unit

Value

Value list

Custom property

Shorthand property

Property

Keyframe declaration

Declaration

Declaration block

Block

Selector

Selector list

Root rule

Rule

Media feature

Custom media

Media query list

At-rule

stylelint-disable comment

Comment

General / Sheet

官方配置标准文件

stylelint-config-standard

module.exports = {
    "rules": {
        "at-rule-empty-line-before": [ "always", {
        except: [
            "blockless-after-same-name-blockless",
            "first-nested",
            ],
            ignore: ["after-comment"],
        } ],
        "at-rule-name-case": "lower",
        "at-rule-name-space-after": "always-single-line",
        "at-rule-semicolon-newline-after": "always",
        "block-closing-brace-empty-line-before": "never",
        "block-closing-brace-newline-after": "always",
        "block-closing-brace-newline-before": "always-multi-line",
        "block-closing-brace-space-before": "always-single-line",
        "block-no-empty": true,
        "block-opening-brace-newline-after": "always-multi-line",
        "block-opening-brace-space-after": "always-single-line",
        "block-opening-brace-space-before": "always",
        "color-hex-case": "lower",
        "color-hex-length": "short",
        "color-no-invalid-hex": true,
        "comment-empty-line-before": [ "always", {
            except: ["first-nested"],
            ignore: ["stylelint-commands"],
        } ],
        "comment-no-empty": true,
        "comment-whitespace-inside": "always",
        "custom-property-empty-line-before": [ "always", {
             except: [
                "after-custom-property",
                "first-nested",
             ],
            ignore: [
                "after-comment",
                "inside-single-line-block",
            ],
        } ],
        "declaration-bang-space-after": "never",
        "declaration-bang-space-before": "always",
        "declaration-block-no-duplicate-properties": [ true, {
            ignore: ["consecutive-duplicates-with-different-values"],
        } ],
        "declaration-block-no-ignored-properties": true,
        "declaration-block-no-redundant-longhand-properties": true,
        "declaration-block-no-shorthand-property-overrides": true,
        "declaration-block-semicolon-newline-after": "always-multi-line",
        "declaration-block-semicolon-space-after": "always-single-line",
        "declaration-block-semicolon-space-before": "never",
        "declaration-block-single-line-max-declarations": 1,
        "declaration-block-trailing-semicolon": "always",
        "declaration-colon-newline-after": "always-multi-line",
        "declaration-colon-space-after": "always-single-line",
        "declaration-colon-space-before": "never",
        "declaration-empty-line-before": [ "always", {
            except: [
                "after-declaration",
                "first-nested",
            ],
            ignore: [
                "after-comment",
                "inside-single-line-block",
            ],
        } ],
        "function-calc-no-unspaced-operator": true,
        "function-comma-newline-after": "always-multi-line",
        "function-comma-space-after": "always-single-line",
        "function-comma-space-before": "never",
        "function-linear-gradient-no-nonstandard-direction": true,
        "function-max-empty-lines": 0,
        "function-name-case": "lower",
        "function-parentheses-newline-inside": "always-multi-line",
        "function-parentheses-space-inside": "never-single-line",
        "function-whitespace-after": "always",
        "indentation": 2,
        "keyframe-declaration-no-important": true,
        "length-zero-no-unit": true,
        "max-empty-lines": 1,
        "media-feature-colon-space-after": "always",
        "media-feature-colon-space-before": "never",
        "media-feature-name-case": "lower",
        "media-feature-name-no-unknown": true,
        "media-feature-no-missing-punctuation": true,
        "media-feature-parentheses-space-inside": "never",
        "media-feature-range-operator-space-after": "always",
        "media-feature-range-operator-space-before": "always",
        "media-query-list-comma-newline-after": "always-multi-line",
        "media-query-list-comma-space-after": "always-single-line",
        "media-query-list-comma-space-before": "never",
        "no-empty-source": true,
        "no-eol-whitespace": true,
        "no-extra-semicolons": true,
        "no-invalid-double-slash-comments": true,
        "no-missing-end-of-source-newline": true,
        "number-leading-zero": "always",
        "number-no-trailing-zeros": true,
        "property-case": "lower",
        "property-no-unknown": true,
        "rule-nested-empty-line-before": [ "always-multi-line", {
            except: ["first-nested"],
            ignore: ["after-comment"],
        } ],
        "rule-non-nested-empty-line-before": [ "always-multi-line", {
            ignore: ["after-comment"],
        } ],
        "selector-attribute-brackets-space-inside": "never",
        "selector-attribute-operator-space-after": "never",
        "selector-attribute-operator-space-before": "never",
        "selector-combinator-space-after": "always",
        "selector-combinator-space-before": "always",
        "selector-descendant-combinator-no-non-space": true,
        "selector-list-comma-newline-after": "always",
        "selector-list-comma-space-before": "never",
        "selector-max-empty-lines": 0,
        "selector-pseudo-class-case": "lower",
        "selector-pseudo-class-no-unknown": true,
        "selector-pseudo-class-parentheses-space-inside": "never",
        "selector-pseudo-element-case": "lower",
        "selector-pseudo-element-colon-notation": "double",
        "selector-pseudo-element-no-unknown": true,
        "selector-type-case": "lower",
        "selector-type-no-unknown": true,
        "shorthand-property-no-redundant-values": true,
        "string-no-newline": true,
        "unit-case": "lower",
        "unit-no-unknown": true,
        "value-list-comma-newline-after": "always-multi-line",
        "value-list-comma-space-after": "always-single-line",
        "value-list-comma-space-before": "never",
        "value-list-max-empty-lines": 0,
    },
}
上一篇下一篇

猜你喜欢

热点阅读