我的博客地址
正式地址
测试地址
前端源码
后端源码
文章目录
项目及其技术栈介绍
前端: 项目初始化
前端: 使用 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
后记
到此为止, 前端部分的项目模板搭建就结束了, 下一部分将开始后端部分的项目模板搭建.
来源: http://www.jianshu.com/p/fbd45a1dde08