Introduction

validate-stylelint, used to verify the syntax of css, less, scss.

This plugin needs to be installed at HBuilderX Plugin Market.

Configuration File

Menu [Settings] -> [Plugins] -> [stylelint], click on .stylelintrc.js to open the configuration file.

Introduction - 图1

Rule

There are hundreds of rules in stylelint, which can be divided into three categories:

  • Rules for proofreading style (mainly for spaces (such as spaces near colons), line breaks, indentation, etc.)
  • Rules for judging the maintainability of the code (judging whether a certain ID is used in the CSS selector, or whether the !important keyword is applied in a statement)
  • Rules for judging code errors (check whether the wrong HEX color writing or whether a certain abbreviated attribute will cover other declaration statements)

The rule attribute is an object, the key is the name of the rule, and the value is the rule configuration. Each rule configuration conforms to one of the following formats:

  • Single value (primary option)
  • An array with two values ([primary option,secondary option])
  • null (close rule)

Add rules

Modify the .stylelintrc.js file and add options:

  2.   module.exports = {
  3.     "extends": "stylelint-config-recommended",
  4.     "rules":{
  5.         "unit-no-unknown": false,
  6.         "indentation": "tab",       
  7.         "unit-no-unknown": true,
  8.         "color-hex-case": [
  9.           "lower", {
  10.           "message": "Lowercase letters are easier to distinguish from numbers"
  11.           }
  12.         ],
  13.         "max-empty-lines": 2,
  14.         "unit-whitelist": ["em", "rem", "%", "s", "px", "upx"],
  15.         "number-leading-zero": null
  16.     }
  17.   }

More configuration rules

More details can be refered to: https://stylelint.io