如何配置项目中的规范团队人数的增加，每个人的风格不同造就不用的代码风格，如果大家都统一一套规范的话肯定事半功倍，那么怎么

前言

随着团队人数的增加，每个人的代码编写喜好不同，代码风格也迥然不同。如果有一个大家的统一的意愿遵守的代码规范，肯定事半功倍，提高效率，避免代码review和重构。

坚持好的代码风格规范，从你我做起。

实现

代码规范

Eslint
项目集成
```
npm i eslint -D
npx eslint --init
```
可多选

这样就完成init配置
init命令会自动生成.eslintrc.js

代码风格

Prettier

项目集成

npm i prettire eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-config-ali eslint-plugin-react -D

在.eslintrc.json中，extend中添加“prettier”解决eslint合prettier的冲突。

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint-config-ali",
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": ["react", "@typescript-eslint", "prettier"],
    "rules": {}
}

创建.prettierrc，选择配置。

module.exports = {
    printWidth: 100, // 超过最大值换行
    tabWidth: 4, // 缩进字节数
    useTabs: false, // 缩进不使用tab，使用空格
    semi: false, // 句尾添加分号
    singleQuote: true, // 使用单引号代替双引号
    proseWrap: "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    arrowParens: 'avoid', //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    disableLanguages: ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    endOfLine: "auto", // 结尾是 \n \r \n\r auto
    eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
    htmlWhitespaceSensitivity: 'ignore',
    ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    jsxBracketSameLine: true, // 在jsx中把'>' 是否单独放一行
    jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
    parser: "babylon", // 格式化的解析器，默认是babylon
    requireConfig: false, // Require a 'prettierconfig' to format prettier
    stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
    trailingComma: 'none', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）/
    tslintIntegration: false // 不让prettier使用tslint的代码格式进行校验
}

git规范

Git有很多的hooks，让我们在不同的阶段，对代码进行不同的操作，控制提交到仓库的代码的规范性和准确性。

借助husky操作git 钩子的工具

npm i husky -D
npm set-script prepare "husky install"  // 在package.json中添加脚本
npm run prepare // 初始化husky,将 git hooks 钩子交由,husky执行

.husky文件创建commit-msg，创建自定以的commit msg和官方的commit msg在提交commit的就会进行判断。

采用自定义commit msg

npx husky add .husky/commit-msg 'node [dir]/filename.js' // 指定目录文件

自定义 < --- > 创建scripts/verifyCommit.js

const msg = require('fs').readFileSync('.git/COMMIT_EDITMSG', 'utf-8').trim()

const commitRE =
    /^[.+]:[(feat|fix|docs|style|refactor|perf|test|build|ci|chore|revert)]((.+)): .{1,50}/
const mergeRe = /^(Merge pull request|Merge branch)/

if (!commitRE.test(msg)) {
    if (!mergeRe.test(msg)) {
        console.log('git commit信息校验不通过')

        console.error(`git commit的信息格式不对, 需要使用 [jira|time]:[title](scope): desc的格式
        •    比如 [1206]:[feat](工作台): 修改配置
        •    具体校验逻辑看 scripts/verifyCommit.js
        `)
        process.exit(1)
    }
} else {
    console.log('git commit信息校验通过')
}

采用官方的规范

npm i commitlint @commitlint/config-conventional -D
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

@commitlint/config-conventional 这是一个规范配置,标识采用什么规范来执行消息校验, 这个默认是Angular的提交规范
规范提交

****.husky文件创建pre-push，可以在推送远程的时候执行任务，一般会进行jest测试。

npx husky add .husky/pre-push "npm test" // 提交代码前,跑一遍测试用例

安装jest

npm i jest -D

修改package.json

scripts: { 
 "test": "jest", 
 }

简单配置jest.config.js

module.exports = { 
 setupFilesAfterEnv: ['@testing-library/jest-dom'], 
 testEnvironment: 'jsdom' 
 }

这样就会在push的时候执行jest，正常之后进行提交。

结语

以上就是我们团队在前端规范化做的一些操作。

结合Husky + Eslint + Prettier完成对与代码格式，commit格式，push前的测试覆盖完成前面的CI。之后的CD正在进行，请大家期待吧。

如果你对文章感兴趣请动动你发财的小手，点赞，评论+关注。作者会持续输出技术文章。

如何配置项目中的规范

前言

实现

代码规范

这样就完成init配置

代码风格

git规范

结语