vscode如何优雅的拥抱stylelint

vue-admin-beautiful开源了不到两个月收获了

个star，项目中用到了stylelint，第一次了解到原来css的属性是有顺序的。

stylelint自动化修复配置

1.首先你需要在vscode商店下载stylelint-plus这个工具

2.然后在设置setting.json进行如下配置

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "workbench.colorTheme": "One Monokai",
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "emmet.triggerExpansionOnTab": true,
  "editor.formatOnSave": true,
  "javascript.format.enable": true,
  "stylelint.enable": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.autoFixOnSave": true,
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "liveServer.settings.donotShowInfoMsg": true,
  "explorer.confirmDelete": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "files.exclude": {
    "**/.idea": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

3.项目根目录新建.stylelintrc.js

module.exports = {
  extends: ["stylelint-config-standard", "stylelint-config-recess-order"],
  rules: {
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "mixin",
          "extend",
          "content",
          "include",
          "for",
          "function",
          "return",
        ],
      },
    ],
    "selector-pseudo-element-no-unknown": [
      true,
      {
        ignorePseudoElements: ["v-deep"],
      },
    ],
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["export"],
      },
    ],
    indentation: 2,
    "no-descending-specificity": null,
    "declaration-colon-newline-after": null,
  },
  ignoreFiles: ["**/*.js"],
};

4.最后项目安装如下开发依赖

{
  "stylelint": "^13.3.3",
  "stylelint-config-recess-order": "^2.0.4",
  "stylelint-config-standard": "^20.0.0",
  "stylelint-order": "^4.0.0",
}

5.神奇的一幕就出现了，以后再写css他就会自动按浏览器约定解析的顺序来排序了，这可不是个简单的格式化工具哦

结语

vue-admin-beautiful已经默认开启了最严格的stylint规范，并实现了自动化修复

github地址 vue-admin-beautiful

集成版演示地址 vue-admin-beautiful

layui风格集成版演示地址 vue-admin-beautiful

横向布局集成版演示地址 vue-admin-beautiful

iview风格集成版演示地址 vue-admin-beautiful