从零搭建项目(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插件等，另外我们使用被人已经写好的react、typescript和prettier配置即可，嫌麻烦的同学可以直接复制下面的安装代码:
     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
    }
}

4. 之后我们继续在根目录添加.prettierrc.js文件，用作该项目的prettierrc格式化配置，下面是我的配置，无非也就一些是否需要分号，tab几个空格等的配置:
   

   

   image.png

5. 注意在这里可能会产生一个问题，上面的.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

6. 测试结果
   我们随便一个文件中，使用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-conventional，commilint常规校验方式采用的是airbnb公司的校验方式
  npm i -D @commitlint/config-conventional

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

  

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

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

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

  image.png
  
  否则会提交失败:
  
  

  image.png

后记

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