Front-end project integration stylelint

Front-end project integration stylelint

github

Code & demo in github stylelint-guide

Dependent installation

You can use yarnor npm.

yarn add stylelint stylelint-order stylelint-config-standard
# or
npm install stylelint stylelint-order stylelint-config-standard --save-dev
 

create stylelint.config.js

You can customize your validation rules to adapt to your team norms.

//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,
    //...
  }
}
 

Reorder your CSSproperty

You may notice that the code above there is pluginthe option stylelint order. It can be set according to your CSSre-sort order. You can rulesadd the corresponding rule options, such as:

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"
    ]
  },
  {
    ...
  }
]
}
 

Use yarnor npmscript

"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"
}
 

Here I use postcss-lessthis package to specify a checksum lessfile syntax if you need to check lessthe file, you need to install postcssthe package

yarn add postcss
# or
npm add postcss
 

Using the huskycheck code when the pre-commit

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

Now you may feel that your CSS looks much more comfortable~

Enjoy it :tada: