从零搭建项目(8) --- 前端: 团队代码规范

我的博客地址

正式地址
测试地址
前端源码
后端源码

文章目录

  1. 项目及其技术栈介绍
  2. 前端: 项目初始化
  3. 前端: 使用Sass和Antd
  4. 前端: 开发体验优化
  5. 前端: 搭建路由和状态管理
  6. 前端: 支持Axios
  7. 前端: 打包与环境变量设置
  8. 前端: 团队代码规范
  9. 后端: 项目初始化和使用Koa相关
  10. 后端: 使用TypeORM和MySQL
  11. 部署: 使用nginx部署前端项目
  12. 部署: 后端部署
  13. 部署: 使用jenkins自动化部署

前言

在前面多篇文章中,我们介绍了前端部分react + typescript项目模板的搭建,但是在现实的工作场景中,通常都是多人参与到一个项目的开发,这时候就需要对团队的代码及其格式和提交信息等做出一定的限制,本章将会介绍多个限制团队代码的工具及其配置。

  1. eslint结合prettier规范代码并格式化
  2. stylelint规范sass文件
  3. 使用husky做pre-commit
  4. commitlint规范git提交信息

eslint结合prettier规范代码并格式化

  • eslint
    eslint是常见的代码格式规范工具,拥有诸多的限制项,包含是否允许使用var等,对于TypeScript兼容性也非常好,由于之前tslint已经不再维护,所以我们选择eslint作为代码格式规范工具

  • prettier
    prettier是一款用于格式化代码的工具,可以和eslint结合的非常好,做到保存文件时自动格式化代码

  • 支持eslint和prettier

    1. 首先需要在编辑器中安装eslint和prettier插件,我使用的是vscode,已经安装了这两个插件:


      image.png
    2. 然后在项目中安装相关包,包的内容包含eslint、prettier、esling-typescript插件以及eslint-prettier插件等,另外我们使用被人已经写好的reacttypescriptprettier配置即可,嫌麻烦的同学可以直接复制下面的安装代码:
      npm i -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier

    3. 在根目录下新建.eslintrc.js文件,并在内部导出相关配置,以下是我的配置:

      image.png

      另外我也把配置代码放在下面方便大家直接复制去用,当然有另外的需要可以自行在rules中配置:

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'plugin:react/recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier/@typescript-eslint',
        'plugin:prettier/recommended'
    ],
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
        },
    },
    rules: {
        '@typescript-eslint/explicit-function-return-type': 'off',
        'prefer-const': 2,
        'no-var': 2,
        'no-multiple-empty-lines': 2,
        'react/prop-types': 0,
        'react/display-name': 0,
        'lines-between-class-members': ['error', 'always'],
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-var-requires': 'off',
        '@typescript-eslint/interface-name-prefix': 'off',
        '@typescript-eslint/explicit-member-accessibility': 'off',
        '@typescript-eslint/no-empty-interface': 'off'
    },
    settings: {
        react: {
            version: 'detect',
        },
    },
    env: {
        'browser': true
    }
}
  1. 之后我们继续在根目录添加.prettierrc.js文件,用作该项目的prettierrc格式化配置,下面是我的配置,无非也就一些是否需要分号,tab几个空格等的配置:

    image.png

  2. 注意在这里可能会产生一个问题,上面的.prettier.js.eslintrc.js配置中,module出现了一个警告:

    image.png

    造成这个价警告的原因未知,不过我们可以在在根目录新建.eslintignore,在该文件里面把eslintrc.js.prettierrc.js文件添加为检测对象即可,另外还需要记得把src文件夹中的.d.ts文件设为忽略项,否则css-modules-typescript-loader生成的index.scss.d.ts将会报一大堆错误,而这些文件无需进行检测:
    image.png

  3. 测试结果
    我们随便一个文件中,使用var声明一个变量,可以看到是eslint报的错误,说明eslint配置成功了:

    image.png

    然后我们保存文件后如果var自动变成了const,则表明prettier配置成功,并且和eslint配合的很好:
    image.png

stylelint规范sass文件

stylelint作为一款限制样式文件编写规范的工具,无疑是非常出色的,它不止支持sass,也同时支持less和stylus这些文件的代码格式检测,在本例中,我们就使用stylelint对sass代码格式进行检测。要使用stylelint需要在vscode中安装同名插件:


image.png
  • 安装stylelint
    由于我个人不爱写这些lint工具的检测规则,所以使用的是推荐配置stylelint-config-standard,另外如果要支持sass样式代码检测,需要安装stylelint-scss,所以安装命令如下:
    npm i -D stylelint stylelint-config-standard stylelint-scss

  • 支持针对sass代码的检测
    接着我们去到根目录中,新建.stylelintrc.js文件,并写入自己的配置,以下是我的配置:

    image.png

    如果module报警告,别忘记去.eslintignore将这个文件添加进去:
    image.png

  • 结果检测:
    在我的配置中,缩进被限制为4个空格,我们去到一个.scss文件中,写一个两个空格缩进的样式看看:

    image.png

    可以发现是stylelint报的错误:
    image.png

    另外stylelint也支持和prettier相结合的,所以我们直接保存代码,就能格式化为符合stylelint规范的代码了:
    image.png

使用husky做pre-commit

虽然我们做了react组件和sass样式代码的检测,但是人的自觉性总是很差的,所以我们需要进行一些限制,在代码commit之前如果没有修改到符合各种lint规范的情况下,就不让他commit代码,这样就能保证提交上来的代码总是符合规范的。

  • 这一步我们先添加一个命令到package.json中去,用作代码格式检测(eslint和stylelint都支持命令行对文件进行检测,具体请查看文档):

    image.png

    之后测试一下这条命令是否生效:
    image.png

    可见这条命令已经生效,并且他会列出出错文件的路径和出错类型。接下来需要做的就是在开发人员commit之后首先执行这条命令,如果有报错就不让他commit代码,这一步叫做pre-comimt

  • 添加pre-commit
    我们使用husky这个库来为我们添加pre-commit功能,首先安装它,注意安装这个库之前,项目必须被git初始化过,否则安装会失败:
    npm i -D husky

然后我们去到package.json中,按照官方文档所说的进行添加命令即可:

image.png

之后测试一下:


image.png

可以看到因为之前的错误我没有修改,所以commit的时候检测出来了,并且commit进程被结束,无法进行commit,当我们把错误都修改完成后,再来测试一次:


image.png

可以看到虽然经过检测,但是因为没有格式错误,所以代码顺利被commit了。

使用commitlint规范git提交信息

话说在使用commitlint之前,笔者我很喜欢提交代码的时候不管是什么修改都只用up作为提交信息,结果被leader喷过好多次都没有改过这毛病,后来觉得这样不行,就把commitlint集成进了项目中,强制自己按照规范来写代码commit信息,这样才算是改了过来。

  • 使用commitlint之前我们需要安装它
    npm i -D @commitlint/cli
    另外,我们采用的常规commit校验方式,所以安装@commitlint/config-conventionalcommilint常规校验方式采用的是airbnb公司的校验方式
    npm i -D @commitlint/config-conventional

  • 然后可以在根目录新建一个commitlint.config.js文件,用作自定义一些commit提交规则,当然这一步也可以不做,直接使用常规校验也行

    image.png

    下面的是我自己的规则:
    image.png

    然后我们在之前的husky配置中,把commitlint的校验命令添加进去:
    image.png

    这时候提交代码就需要根据本次修改来写好格式,比如下面这个:
    image.png

    否则会提交失败:
    image.png

后记

到此为止,前端部分的项目模板搭建就结束了,下一部分将开始后端部分的项目模板搭建。

推荐阅读更多精彩内容