这是我参与「第五届青训营」伴学笔记创作活动的第 13 天

1.stylelint在vue3+less+webpack的使用

安装 npm i stylelint postcss postcss-less postcss-html stylelint-config-prettier stylelint-config-recommended-less stylelint-config-standard stylelint-config-standard-vue stylelint-less stylelint-order stylelint-webpack-plugin -D

以上包的各个作用：

stylelint:css样式lint工具
postcss:转换css代码工具
postcss-less:识别less语法
postcss-html:识别html/vue中的style标签中的样式
stylelint-config-standrd:stylelint的标准可共享配置规则
stylelint-config-prettier:关闭所有与prettier冲突的规则
stylelint-prettier:搭配stylelint-config-prettier一起使用
stylelint-config-recommended-less:less推荐的可共享配置规则
style-config-standard-vue:.vue文件的样式配置
style-less:style-config-recommended-less的依赖
stylelint-order:指定样式书写的顺序，在order/properties-order指定顺序
stylelint-webpack-plugin:使用webpack支持stylelint，类似于eslint-webpack-plugin

2.新建配置文件.stylelintrc.js及其配置

{
extends: [
    "stylelint-config-standard",
    "stylelint-config-recommended-less",
    "stylelint-config-standard-vue",
    "stylelint-prettier/recommended",
  ],
  plugins: ["stylelint-order","stylelint-prettier"],
   // 不同格式的文件指定自定义语法
  overrides: [
    {
      files: ["**/*.(less|css|vue|html)"],
      customSyntax: "postcss-less",
    },
    {
      files: ["**/*.(html|vue)"],
      customSyntax: "postcss-html",
    },
  ],
  ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.json", "**/*.md", "**/*.yaml"],
  rules: {
    "prettier/prettier": true,
   }
}

3.配置脚本

"stylelint": "stylelint \"./**/*.{css,less,vue,html}\"",
    "stylelint:fix": "stylelint \"./**/*.{css,less,vue,html}\" --fix"

commlint的作用是为了检查commit-msg提交的信息

husky的作用是为了更好的调用githooks(git生命周期函数)

而lint-staged是对暂存区的文件进行检查,通过在pre-commit钩子中调用npm run lint-staged命令检查暂存区的内容

pre-commit和commit-msg的执行先后顺序？

pre-commit先执行，然后再到commit-msg命令

4.husky+commitlint+lint-staged在webpack中的使用

安装npm i -D lint-staged @commitlint/cli @commitlint/config-conventional husky -D

5.新建.commitlintrc.js文件和配置lint-staged

配置

module.exports = {
    extends: ["@commitlint/config-conventional"],
    rules: {
        "type-enum": [
            2,
            "always",
            [
                type
            ],
        ],
        "type-empty": [2, "never"],
        "subject-empty": [2, "never"],
        "subject-full-stop": [0, "never"],
        "subject-case": [0, "never"],
    },
};

这个type代表有着必须以这些字母作为提交信息的开头

"feat", // 新功能（feature）
"fix", // 修补bug
"docs", // 文档（documentation）
"style", // 格式（不影响代码运行的变动）
"refactor", // 重构（即不是新增功能，也不是修改bug的代码变动）
"test", // 增加测试
"revert", // 回滚
"config", // 构建过程或辅助工具的变动
"chore", // 其他改动

//在package.json根对象下配置
 "lint-staged": {
    "tests/**/*": "npm run test",
    "examples/**/*{js,vue,ts}": "eslint --fix",
    "examples/**/*{css,less,vue,html}": "stylelint --fix",
    "packages/**/*{js,vue,ts}": "eslint --fix",
    "packages/**/*{css,less,vue,html}": "stylelint --fix"
  }

6.配置脚本

"commitlint": "commitlint --config .commitlintrc.js -es -V",
"lint:staged": "lint-staged",

项目总结：整体配置已经配完了，大概就是先配置eslint+stylelint+prettier,再配置commitlint+husky+lint-staged。配置vue之前需要配置vue-loader和vue-template-compiler。

文档的话用的vuepress，目前文档存在的问题：已经写好文档了，但是打包之后一直出现window is not undefined。真的是令人难崩

stylelint+commitlint在webpack中的使用 | 青训营笔记