用stylelint格式化css文件

stylelint-cli https://stylelint.io/user-guide/cli/
配置 https://stylelint.io/user-guide/configuration/

刚接手的老项目，css写得很不规范。
看到vscode里满满的红线，极其不爽。
所以用stylelint格式化一下，解救强迫症。

安装stylelint

npm install -g stylelint

如果还想更进一步美化css代码的话，还可以安装stylelint-order

npm install stylelint-order --save-dev

根目录下vim .stylelintrc文件

// .stylelintrc
{
  "extends": "stylelint-config-standard",
  "plugins": [
      "stylelint-order"
  ],
  "rules": {
    "block-no-empty": null,
    "color-no-invalid-hex": true,
    "comment-empty-line-before": [ "always", {
       "ignore": ["stylelint-commands", "after-comment"]
    }],
    "declaration-colon-space-after": "always",
    "indentation": ["tab", {
      "except": ["value"]
    }],
    "max-empty-lines": 2,
    "rule-empty-line-before": [ "always", {
      "except": ["first-nested"],
      "ignore": ["after-comment"]
    } ],
    "unit-whitelist": ["px", "em", "rem", "%", "s"]
  }
}

具体配置根据项目风格自己定义，参考文章开头的引用链接即可。

一键fix

在package.json中的scripts添加指令，然后npm run lintcss即可

{
  "scripts": {
    "lintcss": "stylelint 'src/**/*.css' --fix",
  }
}

手动fix

不放心的话，就针对指定文件自己执行， 文件一定要用""括起来

stylelint "src/less/bulma-cloud.less" --fix