vue-cli4中Stylelint配置

安装配置ESLint + Prettier

首先搭建vue项目，lint选择ESLint + Prettier，配置方式选择In dedicated config files。

搭建完成后，已经让prettier接管了eslint代码风格部分的规则，不需要做其它配置。
ESLint只做代码质量检查，Prettier做代码风格检查。

关于eslint和prettier看这里

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
     // 在此处修改prettier规则
    "prettier/prettier": ["error", {
      "singleQuote": true
    }],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};

安装配置Stylelint

npm i stylelint stylelint-config-standard stylelint-order stylelint-config-rational-order stylelint-declaration-block-no-ignored-properties -D

package.json

"stylelint": "^13.8.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.1.0",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-declaration-block-no-ignored-properties": "^2.3.0",

stylelint-config-standard： 配置一些规则的默认项

stylelint-order： 给样式排序

stylelint-config-rational-order： 按照此插件的规则排序

stylelint-declaration-block-no-ignored-properties： 检查样式中属性是否有冲突；如display: inline 和 width一起使用时

.stylelintrc.js

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-rational-order'],
  plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'],
  rules: {
    "declaration-colon-space-after": "always-single-line",
    "declaration-colon-space-before": "never",
    "declaration-block-trailing-semicolon": null,
    "rule-empty-line-before": [
      "always",
      {
        ignore: ["after-comment", "first-nested"]
      }
    ],
    "plugin/declaration-block-no-ignored-properties": true,
  }
}

配置快捷命令

package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "stylelint:fix": "stylelint **/*.{vue,css,scss}  --fix",
    "format:fix": "npm run stylelint:fix && npm run lint"
  },

Webstorm中stylelint自动修复

Program：(项目路径)\node_modules\.bin\stylelint.cmd

Arguments：$FileName$ --fix

Working directory：$FileDir$

设置Stylelint快捷键