前端项目集成 stylelint

github

代码 & demo 在 github stylelint-guide

依赖安装

可以使用 yarn 或者 npm。

yarn add stylelint stylelint-order stylelint-config-standard
# or
npm install stylelint stylelint-order stylelint-config-standard --save-dev
复制代码

创建 stylelint.config.js

你可以自定义你的验证规则来适应你的团队规范。

// basic rules
module.exports = {
  extends: 'stylelint-config-standard',
  ignoreFiles: ['**/*.js', '**/*.md'],
  plugins: ['stylelint-order'],
  rules: {
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin']
      }
    ],
    'no-empty-source': null,
    'rule-empty-line-before': 'never',
    'at-rule-empty-line-before': null,
    'no-missing-end-of-source-newline': null,
    'selector-list-comma-newline-after': null,
    'font-family-no-missing-generic-family-keyword': null,
    'indentation': 2,
    // ...
  }
}
复制代码

重新排序你的 CSS 属性

你可能注意到上面的代码有个 plugin 选项 stylelint order。 它可以根据你设定的 CSS 顺序来重新排序。 你可以在 rules 选项中添加对应的规则，例如：

rules: {
  "order/order": [
  "declarations",
  "custom-properties",
  "dollar-variables",
  "rules",
  "at-rules"
],
// 根据 Andy Ford 的 "Order of the Day: CSS Properties"
// 并且可以将 CSS 属性进行分组
"order/properties-order": [{
    groundName: "Display & Flow",
    emptyLineBefore: "never",
    properties: [
      "display",
      "visibility",
      "float",
      "clear",
    ]
  },
  {
    groundName: "Positioning",
    emptyLineBefore: "never",
    properties: [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "transform",
    ]
  },
  {
    groupName: "Flex",
    emptyLineBefore: "never",
    properties: [
      "flex",
      "flex-direction",
      "flex-grow",
      "flex-shrink",
      "flex-basis",
      "flex-wrap",
      "justify-content",
      "align-items"
    ]
  },
  {
    groupName: "Dimensions",
    emptyLineBefore: "never",
    properties: [
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "overflow",
    ],
  },
  {
    groupName: "Margins, Padding, Borders, Outline",
    emptyLineBefore: "never",
    properties: [
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "border-radius",
      "border",
      "border-top",
      "border-right",
      "border-bottom",
      "border-left",
      "border-width",
      "border-top-width",
      "border-right-width",
      "border-bottom-width",
      "border-left-width",
      "border-style",
      "border-top-style",
      "border-right-style",
      "border-bottom-style",
      "border-left-style",
      "border-color",
      "border-top-color",
      "border-right-color",
      "border-bottom-color",
      "border-left-color",
      "outline",
      "list-style",
      "table-layout",
      "border-collapse",
      "border-spacing",
      "empty-cells",
    ],
  },
  {
    groundName: "Typographic Styles",
    emptyLineBefore: "never",
    properties: [
      "font",
      "font-family",
      "font-size",
      "line-height",
      "font-weight",
      "text-align",
      "text-indent",
      "text-transform",
      "text-decoration",
      "letter-spacing",
      "word-spacing",
      "white-space",
      "vertical-align",
      "color",
    ]
  },
  {
    groupName: "Backgrounds",
    emptyLineBefore: "never",
    properties: [
      "background",
      "background-color",
      "background-image",
      "background-repeat",
      "background-position",
    ]
  },
  {
    groundName: "Opacity, Cursors, Generated Content, Transition",
    emptyLineBefore: "never",
    properties: [
      "opacity",
      "cursor",
      "content",
      "quotes",
      "transition"
    ]
  },
  {
    ...
  }
]
}
复制代码

使用 yarn 或者 npm 脚本

"scripts": {
  "lint": "yarn run lint:css && yarn run lint:basecss",
  "lint:css": "stylelint src/**/*.vue --fix",
  "lint:basecss": "stylelint src/pages/**/*.less --custom-syntax ./node_modules/postcss-less --fix"
}
复制代码

这里我使用了 postcss-less 这个包来指定校验 less 文件的语法 如果你需要校验 less 文件，需要安装 postcss 包

yarn add postcss
# or
npm add postcss
复制代码

使用 husky 在预提交时校验代码

// package.json
"husky": {
  "hooks": {
    "pre-commit": "yarn run lint",
  }
},
复制代码

现在你可能会觉得自己的 CSS 看起来舒服多了~

Enjoy it :tada:

转载于:https://juejin.im/post/5c8f4485e51d45322949447f