代码风格的统一以及git提交的约束

引子

杂乱无章的代码必然让人烦躁，对于代码的后续开发和维护也必然要付出巨大的成本。俗话说无规矩不成方圆，编程开发也一样,下面就我个人平时在项目开发中使用的规范拿出来和大家分享一下，希望能够抛砖引玉。 文中如有错误的地方，欢迎大家批评指正！

开篇

代码风格约束

eslint：代码质量检测（用var还是let，用==还是===...）
prettier：代码风格检测（加不加尾逗号，单引号还是双引号...）
eslint-config-prettier：解决ESLint与Prettier的风格冲突
eslint-plugin-prettier：ESLint的插件，集成Prettier的功能
eslint-plugin-vue：ESLint的插件，增加Vue的检测能力

安装依赖包

yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-define-config -D

同时在项目根目录下添加.eslintrc.js和prettier.config.js文件

.eslintrc.js

// @ts-check
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
    root: true,
    env: {
        browser: true,
        node: true,
        es6: true
    },
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
        sourceType: 'module',
        jsxPragma: 'React',
        ecmaFeatures: {
            jsx: true
        }
    },
    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
        'plugin:prettier/recommended'
    ],
    rules: {
        'vue/script-setup-uses-vars': 'error',
        '@typescript-eslint/ban-ts-ignore': 'off',
        '@typescript-eslint/explicit-function-return-type': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-var-requires': 'off',
        '@typescript-eslint/no-empty-function': 'off',
        'vue/custom-event-name-casing': 'off',
        'no-use-before-define': 'off',
        '@typescript-eslint/no-use-before-define': 'off',
        '@typescript-eslint/ban-ts-comment': 'off',
        '@typescript-eslint/ban-types': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        '@typescript-eslint/no-unused-vars': [
            'error',
            {
                argsIgnorePattern: '^_',
                varsIgnorePattern: '^_'
            }
         ],
        'no-unused-vars': [
            'error',
            {
                argsIgnorePattern: '^_',
                varsIgnorePattern: '^_'
            }
        ],
        'space-before-function-paren': 'off',
        'vue/attributes-order': 'off',
        'vue/one-component-per-file': 'off',
        'vue/html-closing-bracket-newline': 'off',
        'vue/max-attributes-per-line': 'off',
        'vue/multiline-html-element-content-newline': 'off',
        'vue/singleline-html-element-content-newline': 'off',
        'vue/attribute-hyphenation': 'off',
        'vue/require-default-prop': 'off',
        'vue/html-self-closing': [
        'error',
            {
                html: {
                    void: 'always',
                    normal: 'never',
                    component: 'always'
                },
                svg: 'always',
                math: 'always'
            }
       ]
  }
})

prettier.config.js

    module.exports = {
    printWidth: 100,
    tabWidth: 2,
    useTabs: false,
    semi: false, // 未尾逗号
    vueIndentScriptAndStyle: true,
    singleQuote: true, // 单引号
    quoteProps: 'as-needed',
    bracketSpacing: true,
    trailingComma: 'none', // 未尾逗号
    arrowParens: 'always',
    insertPragma: false,
    requirePragma: false,
    proseWrap: 'never',
    htmlWhitespaceSensitivity: 'strict',
    endOfLine: 'lf'
};

重启即可生效

git提交约束

husky：触发Git Hooks,执行脚本
lint-staged：检测文件，只对暂存区中有改动的文件进行检测，可以在提交前进行Lint操作
commitizen：使用规范化的message提交
commitlint: 检查message是否符合规范
cz-conventional-changelog：适配器。提供conventional-changelog标准（约定式提交标准）。基于不同需求，也可以使用不同适配器（比如: cz-customizable）。

安装依赖包

yarn add husky lint-staged commitizen @commitlint/config-conventional @commitlint/cli -D

定义触发hook时要执行的Npm脚本

提交前对暂存区的文件进行代码风格语法校验
对提交的信息进行规范化校验
  "scripts": {
    "lint-staged": "lint-staged",
    "commitlint": "commitlint --config commitlint.config.js -e -V"
  },
  "lint-staged": {
    "src/**/*.{js,vue,md,json}": [
      "eslint --fix",
      "prettier --write"
    ]
  }

配置husky通过触发Git Hook执行脚本

# 设置脚本`prepare`并且立马执行来安装，此时在根目录下会创建一个`.husky`目录
npm set-script prepare "husky install" && npm run prepare

# 设置`pre-commit`钩子，提交前执行校验
npx husky add .husky/pre-commit "yarn lint-staged"

# 设置`pre-commit`钩子，提交message执行校验
npx husky add .husky/commit-msg "yarn commitlint"

结束

此时已经完成配置了，现在团队里面任何成员的提交必须按照严格的规范进行了