stylelint standardize your css

TL;DR：

👉Introduction to stylelint

👉 stylelint configuration

👉 stylelint principle

Introduction to stylelint

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

A powerful and modern linter helps the team avoid rule errors and unify the code style. Similar to eslint, it can inherit the config of the open source community, customize the configuration, and write personalized rules.

stylelint configuration

It can be configured in accordance with the official guide user-guide/get-started . The author's current company project is realized by vue + scss + ts, here we will mainly introduce the related configuration of vue and scss.

Related dependencies

There are compatibility issues with stylelint version and dependencies. The following dependency versions have been verified

• stylelint@3.13.1
• stylelint-config-recommended-scss@4.3.0
• stylelint-scss@4.0.0
• stylelint-config-recess-order@3.0.0
• stylelint-prettier@2.0.0
• stylelint-config-prettier@9.0.3

The stylelint plug-in provides extended rules and does not provide preset configurations. (I only provide configuration, it's up to you to use it or not). The naming convention is stylelint-xxxx

Our project uses the scss preprocessor, and we need to use stylelint-config-recommended-scss to check the scss rules.

stylelint-scss provides n multiple rules, and some configurations are enabled in stylelint-config-recommended-scss.

During the interview, we are often asked about CSS rearrangement and redrawing. Frankly speaking, not many people care about this when writing code. Let the linter help us to repair Doxiang automatically. stylelint-config-recess-order (attribute configuration + stylelint-order plugin) can help us achieve

stylelint is similar to eslint and both conflict with Prettier rules. stylelint-config-prettier can resolve these conflicts. The stylelint-prettier plugin optimizes the execution timing of Prettier

Configuration file

It can be a .stylelintrc or .stylelintrc.js or stylelint.config.cjs configuration file. It is recommended to use the .js facilitate customization.

module.exports = {
  /* 继承公共配置 */
  "extends":[
    "stylelint-config-recommended-scss",
    "stylelint-config-recess-order",
    "stylelint-prettier/recommended"
  ],
  /* 扩展 stylelint 原生rules 的种类 */
  "plugins": ["stylelint-prettier"],
  /* 项目个性化的规则 */
   rules: {
    "selector-pseudo-element-no-unknown": [
      true,
      {
        ignorePseudoElements: ["v-deep"],
      }
    ],
    "prettier/prettier": true,
    "number-leading-zero": "always",
  }
}

I didn't understand why some tool configurations can support the monorepo project organization form. Reading the official document found that the cosmiconfig library helped to do this.

Stylelint uses cosmiconfig to find and load your configuration object.

Execute script

Project configuration should be combined with lint-stage and git-hooks to optimize the timing and scope of execution. This article only talks about manual execution.

package.json:

 "lint:style": "stylelint 'src/**/*.{vue,htm,html,css,scss}' --fix"

npm run lint:style in the terminal to see the code changes.

stylelint principle

stylelint uses the PostCSS API to analyze the grammar of CSS to achieve style checking.

postcss is a compiler for css. It is similar to the functional design of babel, with three key links: parse -> transform -> generater. Developers can implement custom lint rules through the AST structure after parse.

stylelint-config-demo