内容简介:这篇文章的每一步都基于一般在项目中用到typescript作为开发工具的都是大中型项目,这样的项目通常也不会只有一个人进行开发,所以在团队内进行一些代码风格的统一和检测能有效减少各种风格狂野的代码,然后再结合编辑器进行代码的自动格式化就能使得团队代码风格保持一致。 在这块中我们需要做的如下:我们的项目因为大量使用
这篇文章的每一步都基于 vscode
这款浏览器,如果你使用的不是 vscode
,那么就需要自行集成相关插件及其配置。 该文章只是简单介绍各各代码检测的流程,至于配置项则需要读者自行前往对应的lint官网自己查看、配置需要的。
前言
一般在项目中用到typescript作为开发 工具 的都是大中型项目,这样的项目通常也不会只有一个人进行开发,所以在团队内进行一些代码风格的统一和检测能有效减少各种风格狂野的代码,然后再结合编辑器进行代码的自动格式化就能使得团队代码风格保持一致。 在这块中我们需要做的如下:
tslint stylelint npm script prettier pre-commit
使用 tslint
进行代码检测
我们的项目因为大量使用 typescript
,所以使用的是 tslint
检测工具,如果在你的项目中没有用到 typescript
,那么请使用 eslint
。
- 首先我们需要在
vscode
中安装插件:npm install -D tslint
。 此外,因为我们有大量的.tsx
文件,所以还需要npm install -D tslint-react
来指定针对.tsx
语法的限制。 - 接着在根目录下新建
tsling.json
文件,该文件用于写tslint
配置文件: - 在
tslint.json
中写入配置,配置项参考请点击这里:extends
是指tslint
的扩展,第一个扩展是稳定且常规的tsling检测标准,第二个则是针对.tsx
文件做的检测。 - 测试一下是否生效: 我们将
no-console
改为true
测试一下:console.log
就可以知道这份配置表已经生效:
使用 stylelint
对 scss
文件进行检测
上一节针对ts(x)代码进行检测,这节则介绍对scss文件的代码类型进行检测。
- 首先,在vscode安装
stylelint
这个插件,该插件可以对css
、less
、scss
等类型的样式表代码进行格式和样式书写顺序上的检测:npm install -D stylelint
。 - 我们在根目录下创建
.stylelintrc.js
文件,然后安装官方推荐的配置 stylelint-config-standard 以及针对scss
代码类型检测的插件 stylelint-scss :npm install -D stylelint-config-standard stylelint-scss
- 然后在
.stylelintrc.js
文件中写入配置项: - 但是这时候针对
scss
代码的检测还是有问题的,它不能识别scss中例如@mixin
、@include
之类的语法:
添加 npm script
进行检测
这一步主要利用 tslint
和 stylelint
附带的命令行命令检测项目中存在的代码规范问题,然后输出到终端查看:
- 去到
package.json
中,在scripts
中添加如下命令:.tsx
文件也检查.scss
文件。 - 然后再终端中输入一次,就能看到报错如下:
使用 prettier
进行代码格式化
除了上一节中手动定位并修改不规范的代码外,我们还可以依赖于 vscode
的插件来进行符合我们规范的代码格式化,这个插件推荐使用 prettier
。
- 首先在
vscode
中安装这个插件: - 然后去到用户设置表中, 进到工作区设置进行配置,下图是该模板的配置,当然你也可以自行配置需要的设置:
- 回到刚才错误的地方,只要我们一保存就会自动格式化成正确的:
使用 pre-commit
在前面的篇幅中,我们有将 lint
命令添加进 npm script
中,但是这个命令如果要自己去运行我想很多人都会忘记,结果就会导致可能有不符合规范的代码被上传到远端代码仓库中。 这种情况下我们可以做 pre-commit
进行代码强制检测,也就是在 git commit
之前进行一次代码检测,不符合规范不让 commit
。 实现这个功能我们可以安装 husky 这个插件 npm install -D husky
,然后在 npm script
中添加命令就好了:
我这里只是简单地添加了代码检测上的操作,也可以添加代码格式化的命令。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 打假“套路型”DevOps团队!理想的DevOps团队结构
- 从大团队并肩作战到小团队带头冲锋,苏宁App插件化应用实践
- iOS 团队编程规范
- 团队建设活动:巅峰故事
- 团队建设的思考(一)
- 敏捷团队实践
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
技术元素
[美] 凯文·凯利 / 张行舟、余倩、周峰、管策、金鑫、曾丹阳、李远、袁璐 / 译言·东西文库/电子工业出版社 / 2012-5 / 55.00元
我会将我不成熟的想法、笔记、内心争论、草稿以及对其他文章的回应都写在《技术元素》中,这样我就能知道自己到底在想些什么。——KK “技术元素”(technium)是凯文•凯利专门创造出来的词语。“技术元素不仅仅包括一些具象的技术(例如汽车、雷达和计算机等),它还包括文化、 法律、社会机构和所有的智能创造物。”简而言之,技术元素就是从人的意识中涌现出来的一切。KK把这种科技的延伸面看成一个能产生......一起来看看 《技术元素》 这本书的介绍吧!