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

我的博客地址 正式地址 测试地址 前端源码 后端源码 文章目录 项目及其技术栈介绍 前端: 项目初始化 前端: 使用Sass和Antd 前端: 开发体验优化 前端: 搭建路由和状态管理 前端: 支持Axios 前端: 打包与环境变量设置 前端: 团队代码规范 后端: 项目初始化和使用Koa相关 后端: 使用TypeORM和MySQL 部署: 使用nginx部署前端项目 部署: 后端部署 部署: 使用jenkins自动化部署 前言 在前面多篇文章中，我们介绍了前端部分react + typescript项目模板的搭建，但是在现实的工作场景中，通常都是多人参与到一个项目的开发，这时候就需要对团队的代码及其格式和提交信息等做出一定的限制，本章将会介绍多个限制团队代码的工具及其配置。 eslint结合prettier规范代码并格式化 stylelint规范sass文件 使用husky做pre-commit commitlint规范git提交信息 eslint结合prettier规范代码并格式化 eslint eslint是常见的代码格式规范工具，拥有诸多的限制项，包含是否允许使用var等，对于TypeScript兼容性也非常好，由于之前tslint已经不再维护，所以我们选择eslint作为代码格式规范工具 prettier prettier是一款用于格式化代码的工具，可以和eslint结合的非常好，做到保存文件时自动格式化代码 支持eslint和prettier 首先需要在编辑器中安装eslint和prettier插件，我使用的是vscode，已经安装了这两个插件: image.png 然后在项目中安装相关包，包的内容包含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 在根目录下新建.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 } } 之后我们继续在根目录添加.prettierrc.js文件，用作该项目的prettierrc格式化配置，下面是我的配置，无非也就一些是否需要分号，tab几个空格等的配置: image.png 注意在这里可能会产生一个问题，上面的.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 测试结果 我们随便一个文件中，使用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 后记 到此为止，前端部分的项目模板搭建就结束了，下一部分将开始后端部分的项目模板搭建。

本文章由javascript技术分享原创和收集