Configure stylelint

Installation dependency

npm install -D stylelint stylelint-config-standard stylelint-config-rational-order stylelint-prettier stylelint-config-prettier postcss-less postcss-scss postcss-html stylelint-config-recommended-vue

New configuration file

.stylelintrc.js

module.exports = {
    
    extends: ['stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-prettier/recommended','stylelint-config-recommended-vue'],
    "plugins": [
        "stylelint-order"
    ],
    "overrides":[
        {
    
            "files": ["**/*.html"],
            "customSyntax": "postcss-html",
        },
        {
    
            "files": ["**/*.scss"],
            "customSyntax": "postcss-scss",
        },
        {
    
            "files": ["**/*.less"],
            "customSyntax": "postcss-less",
        }
    ],
    "rules": {
    
        //  Color specifies lowercase （ Avoid and prettier Configuration conflict ）
        "color-hex-case": "lower",
        //  Empty blocks are prohibited 
        'block-no-empty': true,
        //  Color 6 Bit length 
        "color-hex-length": "long",
        //  Compatible with custom tag names 
        "selector-type-no-unknown": [true, {
    
            "ignoreTypes": []
        }],
        //  Ignore pseudo class selectors  ::v-deep
        "selector-pseudo-element-no-unknown": [true, {
    
            "ignorePseudoElements": ["v-deep"]
        }],
        //  Prevent low priority selectors from appearing after high priority selectors .
        "no-descending-specificity": null,
        //  Don't verify @ Unknown name , For compatibility scss Function of 
        "at-rule-no-unknown": null,
        //  No empty comments 
        "comment-no-empty": true,
        //  It is forbidden to abbreviate redundant values of attributes 
        "shorthand-property-no-redundant-values": true,
        //  The browser engine prefix of the forbidden value 
        "value-no-vendor-prefix": true,
        // property-no-vendor-prefix
        "property-no-vendor-prefix": true,
        //  Prohibit less than  1  The decimal of has a leading zero （ Avoid and prettier Conflict ）
        "number-leading-zero": "always",
        //  Don't leave the first line blank 
        "no-empty-first-line": true,
    }
}

package.json Join in stylelint Related configuration

{
    
  "scripts": {
    
    "stylelint-fix": "stylelint \"src/**/*.(vue|scss|css,less)\" --fix",
  },
  //  If not used husky and lint-staged, Then these two configurations can be omitted 
  "husky": {
    
    "hooks": {
    
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    
    "src/**/*.{less,scss,vue}": [
      "stylelint --fix"
    ]
  }

webstorm To configure stylelint

Ignore stylelint Yes css The test of

• Ignore the entire file , Add... On the first line /* stylelint-disable */

/* stylelint-disable */
html {
    }

• Ignore multiple lines

/* stylelint-disable */
html {
    }
.div {
    
    color: red;
}
/* stylelint-enable */

• Ignore a line , Add /* stylelint-disable-next-line */ To ignore the line

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

• stay .stylelintrc.js Set the file to be ignored in

{
    
  ignoreFiles: ["dist/**/*", "src/assets/scss/abc.scss"]
}

Reference resources

stylelint-config-recommended-vue

Writing custom syntaxes

stylelint Configuration and use , Auto repair css, Writing order

Eslint + Prettier + stylelint + Husky + Lint-staged Standardize your project git Submit information and code specifications

In the project Prettier + Stylelint + ESlint To configure