听雨夜，入江湖

vue中使用stylus作为css编译器，先安装依赖：

yarn add stylelint stylelint-plugin-stylus -D

根据stylelint-plugin-stylus的文档进行配置，项目根目录建立stylelint.config.js，内容如下：

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // "stylelint-config-standard",
    'stylelint-plugin-stylus/standard',
  ],
  rules: {
    // override/add rules settings here, such as:
    // "stylus/declaration-colon": "never"
  },
}

然后配置vscode编辑器，先安装扩展：stylelint

然后在vscode setting.json中添加配置：

  "stylelint.snippet": ["css", "less", "postcss", "scss", "stylus"],
  "stylelint.validate": [
    "css",
    "html",
    "javascript",
    "javascriptreact",
    "less",
    "markdown",
    "postcss",
    "sass",
    "scss",
    "source.css.styled",
    "source.markdown.math",
    "styled-css",
    "sugarss",
    "svelte",
    "typescript",
    "typescriptreact",
    "vue",
    "vue-html",
    "vue-postcss",
    "xml",
    "xsl",
    "stylus" // 重要
  ],
  "stylelint.customSyntax": "stylelint-plugin-stylus/custom-syntax" // 重要， 否则会提示 Unknown word CssSyntaxError 未知词 css句法错误

最后要做的是，开启文件保存自动修复，还是vscode setting.json中加入

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true // 这个很重要
  },

完成。

参考：
https://juejin.cn/post/6854573221916868616 【解决了Unknown word CssSyntaxError】
https://www.cnblogs.com/jiaoshou/p/12220999.html 【解决了保存文件自动修复】

http://cssor.com/vscodevue3stylelintstylus%e9%85%8d%e7%bd%ae.html