stylelint-css代码格式化

Posted on | In , | 0 comments | Visitors:

stylelint：** stylelint 是一个强大和现代的 CSS 审查工具，有助于开发者推行统一的代码规范，避免样式错误stylelint拥有超过150条的规则，包括捕捉错误、最佳实践、控制可以使用的语言特性和强制代码风格规范。。stylelint 由 PostCSS 提供技术支持，所以它也可以理解 PostCSS 解析的语法，比如 SCSS。

命令

1
stylelint --fix src/**/*.{html,css,scss}

插件：

stylelint配置（官方）

  • extends：可指定继承指定的配置规则；您可以继承现有配置的数组，数组中的每个项都优先于前一项
    例如：继承 stylelint-config-standard，myExtendableConfig 覆盖stylelint-config-standard，然后自定义覆盖缩进规则：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
      "extends": [
        "stylelint-config-standard",
        "./myExtendableConfig"
      ],
      "rules": {
        "indentation": "tab"
      }
    }

  • plugins 数组，一旦声明了插件，在您的 “rules” 对象中，您需要为插件的规则添加选项，就像任何标准规则一样。“插件”可以提供单个规则或规则集。如果您使用的插件提供规则集，只需在 “plugins” 配置中调用该模块，并在”rules”中使用它提供的规则。例如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
      "plugins": [
        "../some-rule-set.js"
      ],
      "rules": {
        "some-rule-set/first-rule": "everything",
        "some-rule-set/second-rule": "nothing",
        "some-rule-set/third-rule": "everything"
      }
    }

  • ignoreFiles

  • defaultSeverity：未在辅助选项中指定严重性的所有规则的默认严重性级别。severity 的可用值是”warning””error”

  • .stylelintignore

  • rules

  • stylelint-config-standard： 官网提供的 css 标准

  • stylelint-config-recess-order： 属性排列顺序

  • stylelint-prettier： 基于 prettier 代码风格的 stylelint 规则

  • stylelint-config-prettier： 禁用所有与格式相关的 Stylelint 规则，解决 prettier 与 stylelint 规则冲突，确保将其放在 extends 队列最后，这样它将覆盖其他配置。

项目增加stylelint

1
yarn add stylelint stylelint-config-standard stylelint-config-rational-order stylelint-prettier stylelint-config-prettier -D

.stylelintrc 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
  "defaultSeverity": "error",
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-standard",
    "stylelint-prettier/recommended",
  ],
  "rules":  {
    "selector-pseudo-class-no-unknown": [true, {
      ignorePseudoClasses: ["global"] //.module.scss
    }],
    "length-zero-no-unit": null,//单位可以有0
    "indentation": 2,
    "max-empty-lines": 1,
    "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",
    "block-closing-brace-empty-line-before": "never",
    "declaration-empty-line-before": "never",
    "declaration-block-no-duplicate-properties": true,
    "declaration-block-no-redundant-longhand-properties": true,
    "shorthand-property-no-redundant-values": true,
    "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,
    "at-rule-no-unknown": null,
  },
}
1
npm install --save-dev stylelint-config-prettier stylelint-prettier prettier

.stylelintrc

1
2
3
{
  "extends": ["stylelint-prettier/recommended"]
}

his does three things:
1、Enables the stylelint-plugin-prettier plugin.
2、Enables the prettier/prettier rule.
3、Extends the stylelint-config-prettier configuration.