github
代碼 & demo 在 github stylelint-guide
依賴安裝
nodejs后端框架？可以使用 yarn 或者 npm。
yarn add stylelint stylelint-order stylelint-config-standard
# or
npm install stylelint stylelint-order stylelint-config-standard --save-dev
復制代碼創建 stylelint.config.js
你可以自定義你的驗證規則來適應你的團隊規范。
// basic rules
module.exports = {extends: 'stylelint-config-standard',ignoreFiles: ['**/*.js', '**/*.md'],plugins: ['stylelint-order'],rules: {'at-rule-no-unknown': [true,{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,// ...}
}
復制代碼重新排序你的 CSS 屬性
vue前端ui框架。你可能注意到上面的代碼有個 plugin 選項 stylelint order。 它可以根據你設定的 CSS 順序來重新排序。 你可以在 rules 選項中添加對應的規則，例如：
rules: {"order/order": ["declarations","custom-properties","dollar-variables","rules","at-rules"
],
// 根據 Andy Ford 的 "Order of the Day: CSS Properties"
// 并且可以將 CSS 屬性進行分組
"order/properties-order": [{groundName: "Display & Flow",emptyLineBefore: "never",properties: ["display","visibility","float","clear",]},{groundName: "Positioning",emptyLineBefore: "never",properties: ["position","top","right","bottom","left","z-index","transform",]},{groupName: "Flex",emptyLineBefore: "never",properties: ["flex","flex-direction","flex-grow","flex-shrink","flex-basis","flex-wrap","justify-content","align-items"]},{groupName: "Dimensions",emptyLineBefore: "never",properties: ["width","min-width","max-width","height","min-height","max-height","overflow",],},{groupName: "Margins, Padding, Borders, Outline",emptyLineBefore: "never",properties: ["margin","margin-top","margin-right","margin-bottom","margin-left","padding","padding-top","padding-right","padding-bottom","padding-left","border-radius","border","border-top","border-right","border-bottom","border-left","border-width","border-top-width","border-right-width","border-bottom-width","border-left-width","border-style","border-top-style","border-right-style","border-bottom-style","border-left-style","border-color","border-top-color","border-right-color","border-bottom-color","border-left-color","outline","list-style","table-layout","border-collapse","border-spacing","empty-cells",],},{groundName: "Typographic Styles",emptyLineBefore: "never",properties: ["font","font-family","font-size","line-height","font-weight","text-align","text-indent","text-transform","text-decoration","letter-spacing","word-spacing","white-space","vertical-align","color",]},{groupName: "Backgrounds",emptyLineBefore: "never",properties: ["background","background-color","background-image","background-repeat","background-position",]},{groundName: "Opacity, Cursors, Generated Content, Transition",emptyLineBefore: "never",properties: ["opacity","cursor","content","quotes","transition"]},{...}
]
}
復制代碼使用 yarn 或者 npm 腳本
"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"
}
復制代碼這里我使用了 postcss-less 這個包來指定校驗 less 文件的語法 如果你需要校驗 less 文件，需要安裝 postcss 包
yarn add postcss
# or
npm add postcss
復制代碼使用 husky 在預提交時校驗代碼
// package.json
"husky": {"hooks": {"pre-commit": "yarn run lint",}
},
復制代碼nodejs 開發web？現在你可能會覺得自己的 CSS 看起來舒服多了~
Enjoy it :tada:
