前端架构:从入门到微前端
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

3.4 使用Lint规范代码

为了规范代码,我们需要诸如TSLint及CSSLint类型的代码扫描工具。我们可以利用这些Lint工具,通过配置语法检测规则来对代码风格进行检测。也可以关闭所有的规则,只运行基本语法验证,这一切都取决于我们的意图。

对于代码风格来说,有太多需要规范的地方,比如下面这些事项:

◎ 是否以分号(;)结束语句。

◎ 缩进四个空格,还是两个空格。

◎ 判断是否相等的时候,使用===,以避免类型转换。

◎ 函数大括号是否换行。

通常,我们可以生成自己的配置选项,也可以使用其他团队、组织创建好的风格配置。比如,Airbnb创建的eslint-config-airbnb规范,对于编写JavaScript的人来说就相当不错。我们可以在它的基础上修改出符合要求的规范,从而节省大量的时间。

这些风格问题很难讨论出一个好坏,但是我们需要统一成一种风格——如果在一个文件里,有的以两个空格做缩进,有的以四个空格做缩进,那么它的阅读体验就会相当差。

幸运的是,在现有的前端应用模板里,都会生成相应的Lint配置。我们只需要在构建时、提交时、测试时运行相应的脚本,即可对代码进行Lint扫描。不同组织有不同的使用倾向,特别是在那些有一定年代的系统、公司里,要改变现有的命名方式很难。因为使用哪种方式并不重要,重要的是保持一致。

事实上,这些Lint工具不仅能帮助我们分析代码风格,还对代码质量起着一定的监督作用。如在TSLint里,当我们继承了一个类,但是没有实现其方法时,它就会提醒我们这里有问题(笔者在这里使用的工具是WebStorm),代码如图3-2所示。

图3-2

AppComponent类想实现OnInit接口,但是却缺少ngOnInit属性。另外,在诸如TypeScript这样的静态语言里,它能进行更细致的语法检测。

当然,这些工具在提升质量的同时,也在一定程度上限制了代码的灵活性,毕竟,灵活性和规范是难以兼得的。