为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
React

注意

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

前言

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

  1. 使用tslint做代码检测

  2. 使用stylelint做代码检测

  3. 添加npm script进行检测

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

  5. 使用pre-commit

使用tslint进行代码检测

我们的项目因为大量使用typescript,所以使用的是tslint检测工具,如果在你的项目中没有用到typescript,那么请使用eslint

  1. 首先我们需要在vscode中安装插件:

    webp

    image.png


    然后在项目中安装npm install -D tslint
    此外,因为我们有大量的.tsx文件,所以还需要npm install -D tslint-react来指定针对.tsx语法的限制。

  2. 接着在根目录下新建tsling.json文件,该文件用于写tslint配置文件:

    webp

    image.png

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

    webp

    image.png


    这份配置项中,上面的extends是指tslint的扩展,第一个扩展是稳定且常规的tsling检测标准,第二个则是针对.tsx文件做的检测。

  4. 测试一下是否生效:
    我们将no-console改为true测试一下:

    webp

    image.png


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

    webp

    image.png

使用stylelintscss文件进行检测

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

  1. 首先,在vscode安装stylelint这个插件,该插件可以对csslessscss等类型的样式表代码进行格式和样式书写顺序上的检测:

    webp

    image.png


    记得还需要npm install -D stylelint

  2. 我们在根目录下创建.stylelintrc.js文件,然后安装官方推荐的配置stylelint-config-standard以及针对scss代码类型检测的插件stylelint-scss:
    npm install -D stylelint-config-standard stylelint-scss

  3. 然后在.stylelintrc.js文件中写入配置项:

    webp

    image.png

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

    webp

    image.png


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

    webp

    image.png


    webp

    image.png

添加npm script进行检测

这一步主要利用tslintstylelint附带的命令行命令检测项目中存在的代码规范问题,然后输出到终端查看:

  1. 去到package.json中,在scripts中添加如下命令:

    webp

    image.png


    这条命令既检查.tsx文件也检查.scss文件。

  2. 然后再终端中输入一次,就能看到报错如下:


    webp

    image.png


    然后定位到文件中去修改即可。


    webp

    冒号后面没有添加空格

使用prettier进行代码格式化

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

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

    webp

    image.png

  2. 然后去到用户设置表中, 进到工作区设置进行配置,下图是该模板的配置,当然你也可以自行配置需要的设置:


    webp

    image.png

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


    webp

    保存前


    webp

    保存后

使用pre-commit

在前面的篇幅中,我们有将lint命令添加进npm script中,但是这个命令如果要自己去运行我想很多人都会忘记,结果就会导致可能有不符合规范的代码被上传到远端代码仓库中。
这种情况下我们可以做pre-commit进行代码强制检测,也就是在git commit之前进行一次代码检测,不符合规范不让commit
实现这个功能我们可以安装husky这个插件npm install -D husky,然后在npm script中添加命令就好了:

webp

image.png


我这里只是简单地添加了代码检测上的操作,也可以添加代码格式化的命令。



作者:大春春
链接:https://www.jianshu.com/p/a163d300da63


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消