搭建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) --- 团队规范

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


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

查看所有标签

猜你喜欢:

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

Music Recommendation and Discovery

Music Recommendation and Discovery

Òscar Celma / Springer / 2010-9-7 / USD 49.95

With so much more music available these days, traditional ways of finding music have diminished. Today radio shows are often programmed by large corporations that create playlists drawn from a limited......一起来看看 《Music Recommendation and Discovery》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器