(2) vue3 engineering configuration styleLint + husky + +lint-staged + commitizen + commitlint

---

Preface

vue3 + ts + eslint + prettierrc + styleLint + husky + +lint-staged + commitizen + commitlint

eslint rule checking
prettierrc formatting code
styleLint css sass checking formatting
husky git submission hook
lint-staged handles file formatting in the cache area
commitizen helps write the correct commit information
commitlint is used to commit -m "content" to verify the content

---

StyleLint configuration

Install related dependencies

npm i -D sass stylelint@14.9.1 postcss-html stylelint-config-html stylelint-order postcss stylelint-config-prettier stylelint-config-recommended-vue stylelint-config-standard-scss@4.0.0 stylelint-config-standard-vue@1.0.0 stylelint-no-unsupported-browser-features@5.0.3

package.json configuration command

“lint:st”: “stylelint src/**/*.{vue,scss,css,sass,less} --fix”

Create .stylelintrc.cjs

module.exports = {
    
    
  extends: [
    'stylelint-config-standard', // 配置stylelint拓展插件
    'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
    'stylelint-config-standard-scss', // 配置stylelint scss插件
    'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
    'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
    'stylelint-config-prettier', // 配置stylelint和prettier兼容
  ],
  overrides: [
    {
    
    
      files: ['**/*.(scss|css|vue|html)'],
      customSyntax: 'postcss-scss',
    },
    {
    
    
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html',
    },
  ],
  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '**/*.json', '**/*.md', '**/*.yaml'],
  /**
   * null  => 关闭该规则
   * always => 必须
   */
  rules: {
    
    
    'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
    'no-empty-source': null, // 关闭禁止空源码
    'selector-class-pattern': null, // 关闭强制选择器类名的格式
    'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
    'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
    'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
    'selector-pseudo-class-no-unknown': [
      // 不允许未知的选择器
      true,
      {
    
    
        ignorePseudoClasses: ['global', 'v-deep', 'deep', '///'], // 忽略属性，修改element默认样式的时候能使用到
      },
    ],
  },
}

create.stylelintignore

# .stylelintignore
# 旧的不需打包的样式库
*.min.css
 
# 其他类型文件
*.js
*.jpg
*.png
*.eot
*.ttf
*.woff
*.json
 
# 测试和打包目录
/test/
/dist/
/node_modules/
/lib/

Install the Stylelint plugin

The configuration format is automatically saved and repaired, as shown below.

"editor.formatOnSave": true, //开启自动修复
  "editor.defaultFormatter": "esbenp.prettier-vscode", //指定格式化的插件为Prettier
  "[vue]": {
    
    
    //局部设置，优先级较高，此处的局部设置，是防止用户区设置干扰到工作区设置
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    
    
    "source.fixAll": true, // 开启自动修复
    "source.fixAll.stylelint": true // 开启stylelint自动修复
  },
  // 配置stylelint检查的文件类型范围
  "stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],
  "stylelint.enable": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false

husky configuration and lint-staged commitizen commitlint configuration

husky

The configuration background is that multiple projects in one root directory need to be used in conjunction with .git, otherwise an error will be reported.

cross-var can be used as npm variable in package.json

npm i -D cross-var lint-staged commitizen @commitlint/config-conventional @commitlint/cli

“prepare”: “cd … && cross-var husky install $npm_package_name/.husky”

Run code generation.husky

npm run prepare
npx husky add .husky/pre-commit "npm run lint"

replace.pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

cd $(dirname -- "$0")
npm run lint

package.jsonadd

  "lint-staged": {
    
    
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ],
    "package.json": [
      "prettier --write"
    ],
    "*.vue": [
      "eslint --fix",
      "prettier --write",
      "stylelint --fix"
    ],
    "*.{scss,less,styl,html}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.md": [
      "prettier --write"
    ]
  }

Execute the following code to check the staging area specifications

npx lint-staged

This command is used with the per-commit husky hook

commitizen initialization

npx commitizen init cz-conventional-changelog --save-dev --save-exact

After the installation is completed, there will be an additional page under package.json. The path is the current directory path. If husky .git is on the upper level of the project, the path needs to be calculated from .git.
The vue_ts/node_modules/cz-conventional-changelog
path follows husky.

"config": {
    
    
    "commitizen": {
    
    
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

npm i cz-conventional-changelog-zh  //中文包
//修改路径
"config": {
    
    
    "commitizen": {
    
    
      "path": "./node_modules/cz-conventional-changelog-zh"
    }
  }

Executing npx cz is equivalent to git commit. npx cz will be submitted in the form of a question.

commitlint initialization

Create commitlint.config.cjs

module.exports = {
    
    
  extends: ['@commitlint/config-conventional'],
  rules: {
    
    
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 108],
    'subject-empty': [2, 'never'],
    'type-empty': [2, 'never'],
    'subject-case': [0],
    'type-enum': [
      2,
      'always',
      [
        'feat', // { value: 'feat', name: 'feat:     新增功能feature' },
        'fix', // { value: 'fix', name: 'fix:      修复bug缺陷' },
        'perf', // { value: 'types', name: 'types:    类型修改' },
        'style', // { value: 'docs', name: 'docs:     仅仅修改了文档变更，比如readme，changelog等' },
        'docs', // { value: 'perf', name: 'perf:     性能优化' },
        'test', // { value: 'style', name: 'style:    代码格式（不影响功能，例如空格、分号等格式修正）' },
        'refactor', // { value: 'refactor', name: 'refactor: 代码重构（不包括 bug 修复、功能新增）' },
        'build', // { value: 'test', name: 'test:     添加、修改测试用例' },
        'ci', // { value: 'build', name: 'build:    构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）' },
        'chore', // { value: 'ci', name: 'ci:       修改 CI 配置、脚本' },
        'revert', // { value: 'revert', name: 'revert:   回滚 commit' },
        'wip', // { value: 'wip', name: 'wip:      功能开发中' },
        'workflow', // { value: 'workflow', name: 'workflow: 工作流程变更' },
        'types', // { value: 'chore', name: 'chore:    对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
        'release', // { value: 'revert', name: 'revert:    回滚到上一个版本' },
      ],
    ],
  },
}

Add husky hook

pre-commit hook

pre-commit hook (triggered before commit)
replacement

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

cd $(dirname -- "$0")
#npm run lint
npx lint-staged

commit-msg hook

Add commit-msg hook

npx husky add .husky/commit-msg  //运行在.husky下生成commit-msg文件

replace file

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

cd $(dirname -- "$0")
npx --no-install commitlint --edit "$1"

git commit -m "" If the format of the submission content is incorrect, it will interrupt the submission of
npx cz. You can submit directly according to the prompts.

It is worth noting that pre-commit is before commit-msg. If the npx lint-staged command executed in pre-commit fails to pass, then the hook of commit-msg will not be entered.

---

Summarize

Engineering configuration completed