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

栏目: IOS · Android · 发布时间: 6年前

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

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

前言

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

tslint
stylelint
npm script
prettier
pre-commit

使用 tslint 进行代码检测

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

  1. 首先我们需要在 vscode 中安装插件:
    搭建Typescript+React项目模板(5) --- 团队规范
    然后在项目中安装 npm install -D tslint 。 此外,因为我们有大量的 .tsx 文件,所以还需要 npm install -D tslint-react 来指定针对 .tsx 语法的限制。
  2. 接着在根目录下新建 tsling.json 文件,该文件用于写 tslint 配置文件:
    搭建Typescript+React项目模板(5) --- 团队规范
  3. tslint.json 中写入配置,配置项参考请点击这里:
    搭建Typescript+React项目模板(5) --- 团队规范
    这份配置项中,上面的 extends 是指 tslint 的扩展,第一个扩展是稳定且常规的tsling检测标准,第二个则是针对 .tsx 文件做的检测。
  4. 测试一下是否生效: 我们将 no-console 改为 true 测试一下:
    搭建Typescript+React项目模板(5) --- 团队规范
    然后在组件中写一个 console.log 就可以知道这份配置表已经生效:
    搭建Typescript+React项目模板(5) --- 团队规范

使用 stylelintscss 文件进行检测

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

  1. 首先,在vscode安装 stylelint 这个插件,该插件可以对 csslessscss 等类型的样式表代码进行格式和样式书写顺序上的检测:
    搭建Typescript+React项目模板(5) --- 团队规范
    记得还需要 npm install -D stylelint
  2. 我们在根目录下创建 .stylelintrc.js 文件,然后安装官方推荐的配置 stylelint-config-standard 以及针对 scss 代码类型检测的插件 stylelint-scss : npm install -D stylelint-config-standard stylelint-scss
  3. 然后在 .stylelintrc.js 文件中写入配置项:
    搭建Typescript+React项目模板(5) --- 团队规范
  4. 但是这时候针对 scss 代码的检测还是有问题的,它不能识别scss中例如 @mixin@include 之类的语法:
    搭建Typescript+React项目模板(5) --- 团队规范
    所以还需要手动写一些规则覆盖掉针对这类语法的检测使其不报错:
    搭建Typescript+React项目模板(5) --- 团队规范
    搭建Typescript+React项目模板(5) --- 团队规范

添加 npm script 进行检测

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

  1. 去到 package.json 中,在 scripts 中添加如下命令:
    搭建Typescript+React项目模板(5) --- 团队规范
    这条命令既检查 .tsx 文件也检查 .scss 文件。
  2. 然后再终端中输入一次,就能看到报错如下:
    搭建Typescript+React项目模板(5) --- 团队规范
    然后定位到文件中去修改即可。
    搭建Typescript+React项目模板(5) --- 团队规范

使用 prettier 进行代码格式化

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

  1. 首先在 vscode 中安装这个插件:
    搭建Typescript+React项目模板(5) --- 团队规范
  2. 然后去到用户设置表中, 进到工作区设置进行配置,下图是该模板的配置,当然你也可以自行配置需要的设置:
    搭建Typescript+React项目模板(5) --- 团队规范
  3. 回到刚才错误的地方,只要我们一保存就会自动格式化成正确的:
    搭建Typescript+React项目模板(5) --- 团队规范
    搭建Typescript+React项目模板(5) --- 团队规范

使用 pre-commit

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

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UML基础与Rose建模案例

UML基础与Rose建模案例

吴建 / 人民邮电出版社 / 2004-10 / 29.00元

《UML 基础与Rose建模案例》介绍了用UML(统一建模语言)进行软件建模的基础知识以及Rational Rose工具的使用方法,其中,前8章是基础部分,对软件工程思想、UML的相关概念、Rational Rose工具以及RUP软件过程等进行了详细的介绍;后3章是案例部分,通过3个综合实例,对UML建模(以Rose为实现工具)的全过程进行了剖析;最后的附录中给出了UML中常用的术语、标准元素和元......一起来看看 《UML基础与Rose建模案例》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具