搭建Typescript+React项目模板(5) --- 团队规范

相关文章和阅读顺序

1.项目初始化

2.提高开发体验

3.整理项目和杂项

4.项目打包

5.团队规范

项目地址

注意

这篇文章的每一步都基于vscode这款编辑器，若是你使用的不是vscode，那么就须要自行集成相关插件及其配置。 该文章只是简单介绍各各代码检测的流程，至于配置项则须要读者自行前往对应的lint官网本身查看、配置须要的。

前言

通常在项目中用到typescript做为开发工具的都是大中型项目，这样的项目一般也不会只有一我的进行开发，因此在团队内进行一些代码风格的统一和检测能有效减小各类风格狂野的代码，而后再结合编辑器进行代码的自动格式化就能使得团队代码风格保持一致。 在这块中咱们须要作的以下:

1. 使用tslint作代码检测
2. 使用stylelint作代码检测
3. 添加npm script进行检测
4. 使用prettier进行代码格式化
5. 使用pre-commit

使用tslint进行代码检测

咱们的项目由于大量使用typescript，因此使用的是tslint检测工具，若是在你的项目中没有用到typescript，那么请使用eslint。

1. 首先咱们须要在vscode中安装插件:

   

   而后在项目中安装npm install -D tslint。 此外，由于咱们有大量的.tsx文件，因此还须要npm install -D tslint-react来指定针对.tsx语法的限制。
2. 接着在根目录下新建tsling.json文件，该文件用于写tslint配置文件:

   

3. 在tslint.json中写入配置，配置项参考请点击这里:

   

   这份配置项中，上面的extends是指tslint的扩展，第一个扩展是稳定且常规的tsling检测标准，第二个则是针对.tsx文件作的检测。
4. 测试一下是否生效: 咱们将no-console改成true测试一下:

   

   而后在组件中写一个console.log就能够知道这份配置表已经生效:

   

使用stylelint对scss文件进行检测

上一节针对ts(x)代码进行检测，这节则介绍对scss文件的代码类型进行检测。

1. 首先，在vscode安装stylelint这个插件，该插件能够对css、less、scss等类型的样式表代码进行格式和样式书写顺序上的检测:

   

   记得还须要npm install -D stylelint。
2. 咱们在根目录下建立.stylelintrc.js文件，而后安装官方推荐的配置stylelint-config-standard以及针对scss代码类型检测的插件stylelint-scss: npm install -D stylelint-config-standard stylelint-scss
3. 而后在.stylelintrc.js文件中写入配置项:

   

4. 可是这时候针对scss代码的检测仍是有问题的，它不能识别scss中例如@mixin、@include之类的语法:

   

   因此还须要手动写一些规则覆盖掉针对这类语法的检测使其不报错:

   

   

添加npm script进行检测

这一步主要利用tslint和stylelint附带的命令行命令检测项目中存在的代码规范问题，而后输出到终端查看：

1. 去到package.json中，在scripts中添加以下命令:

   

   这条命令既检查.tsx文件也检查.scss文件。
2. 而后再终端中输入一次，就能看到报错以下:

   

   而后定位到文件中去修改便可。

   

使用prettier进行代码格式化

除了上一节中手动定位并修改不规范的代码外，咱们还能够依赖于vscode的插件来进行符合咱们规范的代码格式化，这个插件推荐使用prettier。

1. 首先在vscode中安装这个插件:

   

2. 而后去到用户设置表中, 进到工做区设置进行配置，下图是该模板的配置，固然你也能够自行配置须要的设置:

   

3. 回到刚才错误的地方，只要咱们一保存就会自动格式化成正确的:

   

   

使用pre-commit

在前面的篇幅中，咱们有将lint命令添加进npm script中，可是这个命令若是要本身去运行我想不少人都会忘记，结果就会致使可能有不符合规范的代码被上传到远端代码仓库中。 这种状况下咱们能够作pre-commit进行代码强制检测，也就是在git commit以前进行一次代码检测，不符合规范不让commit。 实现这个功能咱们能够安装husky这个插件npm install -D husky，而后在npm script中添加命令就行了:

我这里只是简单地添加了代码检测上的操做，也能够添加代码格式化的命令。