title: “Improve Frontend Code Quality — Stylelint” tags:

• 前端开发
• CSS slug: c976b46 date: 2020-10-08 21:19:59 summary: “A quick setup for Stylelint to enforce CSS style, complementing ESLint on the JS side.”

The three pillars of frontend development are HTML, CSS, and JS. Whether you’re building an SPA or an MPA, there’s relatively less HTML, so style enforcement mostly focuses on JS and CSS. For JS we have ESLint; for CSS, I recommend Stylelint.

Here’s a quick setup guide.

Configuration

Install packages

$ yarn add stylelint-config-standard stylelint -D

Config file

.stylelintrc.json

{
  "extends": "stylelint-config-standard",
  "rules": {
    "number-leading-zero": "never",
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": [
          "/global/"
        ]
      }
    ]
  }
}

package.json scripts

  "scripts": {
  	"lint-less": "yarn run stylelint \"src/main/webapp/**/*.less\" --syntax=less",
   	"lint-less:fix": "yarn run lint-less --fix"
   },
  "lint-staged": {
      "*.less": [
      "stylelint --syntax=less --fix",
      "prettier --write",
      "git add"
    ]
  }

Notes

1. The lint-staged configuration ensures only staged files are checked at commit time, not the whole project.
2. You can omit syntax — the CLI can auto-detect — but I prefer being explicit.

What’s next?

The above is just a quick start. In real projects, adjust or override rules as needed. For multi-project setups, consider publishing a private shared config and using extends. Keep iterating and refining during development.

Final Thoughts

• Keep in mind: Stylelint is very similar to ESLint — same philosophy, just for a different language.
• Linters enforce style so teams with mixed experience still converge on consistent code. You can even skip separate style docs since violations will be flagged with friendly messages.
• Value consistency; value rules.