从零开始，一步一步搭建Typescript+React+Redux项目——团队合作规范(六)

本文详细介绍了如何从零开始搭建一个 Typescript + React 开发的脚手架，包含如何添加 Redux 以及 React Router 的环境。

本文代码地址：ts-react-redux

建议将代码拉下来之后，配合本文一起查看，效果更佳。

代码下载命令：git clone https://github.com/vettel-qin/ts-react-redux.git

相关文章目录

从零开始，一步一步搭建Typescript + React + Redux项目——创建项目结构（一）

从零开始，一步一步搭建Typescript + React + Redux项目——开发环境配置（二）

从零开始，一步一步搭建 Typescript + React + Redux项目——集成React（三）

从零开始，一步一步搭建 Typescript + React + Redux项目——集成Redux（四）

从零开始，一步一步搭建 Typescript + React + Redux项目——项目打包（五）

从零开始，一步一步搭建 Typescript + React + Redux项目——团队合作规范（六）

注意：本文是基于vscode这款编辑器进行配置的

1、使用tslint进行代码检测

（1）、在vscode中安装tslint插件

​​

（2）、安装yarn add tslint -D

此外，因使用了.tsx文件，所以还需要安装yarn add tslint-react -D

（3）、在根目录下新建tslint.json文件，配置项参考请点击这里:

​​

2、使用stylelint对css\scss文件进行检测

（1）、在vscode安装stylelint插件

​​

（2）、安装yarn add stylelint -D

此外还需要安装yarn add stylelint-config-standard stylelint-scss stylelint-order -D

（3）、在根目录下创建.stylelintrc.ts文件，写入如下配置：

其中不能识别scss中例如@mixin、@include之类的语法

​​

需要手动写一些规则

​​

3、添加npm script进行检测

在package.json中的scripts添加如下命令：

​​

4、使用prettier进行代码格式化

（1）、在vscode安装prettier这个插件

​​

（2）、文件 > 首选项 > 设置 > 扩展 > 在settings.json中编辑,添加如下配置信息。也可以自行配置需要的设置。

​​

5、使用pre-commit

首先安装husky和lint-staged，yarn add husky lint-staged prettier -D

在根目录新建.prettierrc.js文件,添加如下代码：

​​

在package.json添加如下代码

​​

文章及代码中如有问题，欢迎指正，谢谢！