vue安装stylelint

• 执行 npm install -D stylelint postcss-html stylelint-config-recommended-vue stylelint-config-standard stylelint-order stylelint-prettier postcss-less stylelint-config-property-sort-order-smacss
  安装依赖，这里是less，sass换成postcss-scss、stylelint-config-standard-scss

• 根目录创建.stylelintrc.json

  {
    "extends": [
      "stylelint-config-standard",
      "stylelint-config-property-sort-order-smacss"
    ],
    "plugins": ["stylelint-order", "stylelint-prettier"],
    "overrides": [
      {
        "files": ["**/*.(css|html|vue)"],
        "customSyntax": "postcss-html"
      },
      {
        "files": ["*.less", "**/*.less"],
        "customSyntax": "postcss-less",
        "extends": [
          "stylelint-config-standard",
          "stylelint-config-recommended-vue"
        ]
      }
    ],
    "rules": {
      "color-function-notation": "legacy"
    }
  }
  

  规则rules按需要自己配，规则配置文档
  如果是sacc，overrides把less换成sass

  {
    "files": ["*.scss", "**/*.scss"],
    "customSyntax": "postcss-scss",
    "extends": [
      "stylelint-config-standard-scss",
      "stylelint-config-recommended-vue/scss"
    ],
    "rule": {
      "scss/percent-placeholder-pattern": null
    }
  }
  

• 安装stylelint插件
  - Ctrl + Shift + p -> Settings找到用户设置

• 添加stylelint配置

  "stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],
  "editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true,
  "source.fixAll": true
  },
  // stylelint配置
  "stylelint.enable": true