【vite+vue3项目】stylelint配置

[licoded]

css

yarn add -D stylelint stylelint-config-standard stylelint-config-standard-vue postcss-html

.stylelintrc.js

module.exports = {
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-vue",
  ],
  "rules": {
  }
}

sass

yarn add -D stylelint-config-standard-scss

.stylelintrc.js

module.exports = {
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-standard-vue/scss",
  ],
  "rules": {
  }
}

VsCode Setting（JSON）

{
    "eslint.format.enable": true,
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "stylelint.enable": true,
    "stylelint.validate": [
        "css",
        "less",
        "scss",
        "postcss",
        "vue",
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true,
    },
}

网上说stylelint存在版本问题，需要VsCode插件降级的0.x；但我在最新版1.x的实践没有遇到额外问题。

lint-staged

安装

npm install lint-staged --save-dev

配置

直接添加在 package.json 中，或者新建 .lintstagedrc 文件来存放配置

{
  "lint-staged": {
    "*": "your-cmd"
  }
}

也可以用数组配置多个命令，如下

{
  "lint-staged": {
    "*": ["your-cmd1", "your-cmd2"]
  }
}

然后在 Husky 中添加 Hook

npx husky add .husky/pre-commit "npx lint-staged"  # 此命令会以追加而不是覆盖的方式添加

.lintstagedrc.js

module.exports = {
  "*.{js,jsx,vue}": [
    "eslint",
  ],
  "*.{css,scss,vue}": [
    "stylelint",
  ],
};