Front-end project integration stylelint

Front-end project integration stylelint


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': [
        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": [
//  Andy Ford   "Order of the Day: CSS Properties"
//  CSS  
"order/properties-order": [{
    groundName: "Display & Flow",
    emptyLineBefore: "never",
    properties: [
    groundName: "Positioning",
    emptyLineBefore: "never",
    properties: [
    groupName: "Flex",
    emptyLineBefore: "never",
    properties: [
    groupName: "Dimensions",
    emptyLineBefore: "never",
    properties: [
    groupName: "Margins, Padding, Borders, Outline",
    emptyLineBefore: "never",
    properties: [
    groundName: "Typographic Styles",
    emptyLineBefore: "never",
    properties: [
    groupName: "Backgrounds",
    emptyLineBefore: "never",
    properties: [
    groundName: "Opacity, Cursors, Generated Content, Transition",
    emptyLineBefore: "never",
    properties: [

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

"husky": {
  "hooks": {
    "pre-commit": "yarn run lint",

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

Enjoy it :tada: