Vue.js - 使用 StyleLint 来整理 CSS 吧！

继上次的 ESLint 后，这次要来介绍的是 StyleLint，那就废话不多说开始吧！

StyleLint

StyleLint 一个检查 CSS Coding Style 的工具，与 ESLint 一样有 Airbnb、Standard 的规範可供选择，也可以设定自己的规则

VSCode

首先一样要先安装 VSCode 内的 StyleLint 插件，它可以帮助我们共容易的 debug

接着在 VSCode 内设定存档时可自动修正错误

// settings.json{  "editor.codeActionsOnSave": {    "source.fixAll.stylelint": true  },  "stylelint.validate": ["css", "scss"],}

安装 StyleLint

由于 StyleLint 不像 ESLint 那样有整合在 Vue CLI 内，所以开好专案之后要自己做设定，不过这些在官网都有教学，所以照着做就对了～

安装 StyleLint 与 Standard 规範

$ npm install --save-dev stylelint stylelint-config-standard

然后在根目录建立 .stylelintrc.js 写入设定 (亦可使用 .json 或是 .yaml)

// .stylelintrc.jsmodule.exports = {  extends: [    "stylelint-config-standard"  ]}

因为一开始我们 VSCode有装插件，所以做到这里如果存档就会自动修正错误啰

检查错误与修正错误可于终端机输入以下指令

// 检查错误$ npx stylelint "**/*.css"// 修正错误$ npx stylelint "**/*.css" --fix

或是在 package.json 内设定

// package.json{  "scripts": {    "check:style": "stylelint **/*.css",    "lint:style": "stylelint **/*.css --fix"  }}

StyleLint 结合 Scss

StyleLint 若要结合 Scss 也是可以的，但是要另外安装 stylelint-config-sass-guidelines 这个插件使，它使 StyleLint 支援 Scss 语法，并加入了许多 Scss 的规则可供设定

首先使用 npm 安装插件

$ npm install --save-dev stylelint-config-sass-guidelines

接着一样在 .stylelintrc.js 内设定即可使用

// .stylelintrc.jsmodule.exports = {  extends: [    "stylelint-config-standard",    "stylelint-config-sass-guidelines"  ]}

忽略档案

如果不想被 StyleLint 监控的档案可以使用以下方法，基本上设定的方法跟 ESLint 大同小异，详细的也可以看看官网

在档案内首行加入 /* stylelint-disable */ 以忽略整个档案

/* stylelint-disable */a {}

在样式前加入 /* stylelint-disable-next-line */ 以忽略该行

#id {  /* stylelint-disable-next-line */  color: pink !important;}

在 .stylelintrc.js 内设定需要忽略的档案

// .stylelintrc.jsmodule.exports = {  ignoreFiles: [    "dist/**/*",    "src/assets/scss/abc.scss"  ]}

自订规则

除了使用一开始设定的 Standard 规则外，我们还可以在 .stylelintrc.js 内添加自己喜欢的规则，可以使用的规则列表在这里

以下举例一个小弟自己习惯的排序设定

// .stylelintrc.jsmodule.exports = {  rules: {    "order/properties-alphabetical-order": null, // 不照字母顺序排序    "order/properties-order": [ // 设定自己的排序      "position",      "top",      "right",      "bottom",      "left",      "z-index",      "display",      "justify-content",      "align-items",      "float",      "clear",      "overflow",      "overflow-x",      "overflow-y",      "padding",      "padding-top",      "padding-right",      "padding-bottom",      "padding-left",      "margin",      "margin-top",      "margin-right",      "margin-bottom",      "margin-left",      "width",      "min-width",      "max-width",      "height",      "min-height",      "max-height",      "font-size",      "font-family",      "text-align",      "text-justify",      "text-indent",      "text-overflow",      "text-decoration",      "white-space",      "color",      "background",      "background-position",      "background-repeat",      "background-size",      "background-color",      "background-clip",      "border",      "border-style",      "border-width",      "border-color",      "border-top-style",      "border-top-width",      "border-top-color",      "border-right-style",      "border-right-width",      "border-right-color",      "border-bottom-style",      "border-bottom-width",      "border-bottom-color",      "border-left-style",      "border-left-width",      "border-left-color",      "border-radius",      "opacity",      "filter",      "list-style",      "outline",      "visibility",      "box-shadow",      "text-shadow",      "resize",      "transition"    ]  }}

结语

程式码排整齐真的让人赏心悦目阿！上次的 ESLint 再加上这次的 StyleLint 可以说是无敌了吧！哈哈，希望大家以后写 Code 都可以整整齐齐的啦～

---

补充 Stylelint 更新 14 版

Stylelint 14 版更新比较多，可以参考这边

安装套件

$ npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-recommended-vue postcss postcss-html postcss-scss stylelint-order

之前的 stylelint-config-standard 与 stylelint-config-sass-guidelines 都包含在 stylelint-config-recommended-vue 与 stylelint-config-standard-scss 里面了，所以也可以将其移除

※注意这边 stylelint 的版本是 14 以上，postcss 的版本是 8 以上

修改 VSCode 设定

// settings.json{  "vetur.validation.template": false,  "css.validate": false,  "less.validate": false,  "scss.validate": false,  "stylelint.validate": ["css", "scss", "vue"],  "editor.codeActionsOnSave": {    "source.fixAll.eslint": true,    "source.fixAll.stylelint": true  }}

修改 .stylelintrc.js 设定

// .stylelintrc.jsmodule.exports = {  extends: [    'stylelint-config-standard-scss',    'stylelint-config-recommended-vue'  ],  plugins: [    'stylelint-order'  ],  overrides: [    {      files: ['**/*.(scss|css|html|vue)'],      customSyntax: 'postcss-scss'    },    {      files: ['**/*.(html|vue)'],      customSyntax: 'postcss-html'    }  ],  rules: {    'max-nesting-depth': null,    'max-line-length': null,    'selector-max-compound-selectors': null,    'selector-pseudo-class-no-unknown': null,    'selector-no-qualifying-type': null,    'selector-class-pattern': null,    'function-parentheses-newline-inside': null,    'at-rule-no-unknown': null,    'color-function-notation': 'legacy',    'alpha-value-notation': 'number',    'scss/no-global-function-names': null,    'scss/comment-no-empty': null,    'order/properties-order': [      'position',      'top',      'right',      'bottom',      'left',      'z-index',      'display',      'flex-wrap',      'justify-content',      'align-items',      'float',      'clear',      'overflow',      'overflow-x',      'overflow-y',      'padding',      'padding-top',      'padding-right',      'padding-bottom',      'padding-left',      'margin',      'margin-top',      'margin-right',      'margin-bottom',      'margin-left',      'width',      'min-width',      'max-width',      'height',      'min-height',      'max-height',      'font-size',      'font-family',      'font-weight',      'text-justify',      'text-align',      'text-indent',      'text-overflow',      'text-decoration',      'white-space',      'color',      'background',      'background-position',      'background-repeat',      'background-size',      'background-color',      'background-clip',      'border',      'border-style',      'border-width',      'border-color',      'border-top-style',      'border-top-width',      'border-top-color',      'border-right-style',      'border-right-width',      'border-right-color',      'border-bottom-style',      'border-bottom-width',      'border-bottom-color',      'border-left-style',      'border-left-width',      'border-left-color',      'border-radius',      'opacity',      'filter',      'list-style',      'outline',      'visibility',      'box-shadow',      'text-shadow',      'resize',      'transition'    ]  }}