资讯专栏INFORMATION COLUMN

jslint、flow 与 typescript

habren / 1482人阅读

摘要:命令行目录文件运行后将会检查目录下的文件,并将有问题的语句打印出来。使用成本中搭配编辑器使用是开发过程中的最佳实践。是推出的一款静态类型检查工具。收益偏高对代码做了类型检查,可以避免之类的错误。

jslint airbnb-config

jslint 的作用是对 js 做语法检查,他可以使代码更加规范、清晰,而 airbnb-config 是其中最流行的一套检查规则。

安装方法

npm install jslint eslint-config-airbnb
然后在项目目录下创建 .eslintrc 文件,输入内容「{ "extends": "airbnb", "rules": { "strict": 0 }」。

命令行

jslint <目录|文件>
运行后将会检查目录下的文件,并将有问题的语句打印出来。

搭配 webpack

需要安装 jslint-loader,并且在 webpack.config.js 的 preloaders 里做一些配置。
当 webpack 编译的时候就会调用 jslint 做检查,如果发现不符合规范的地方,就会自动报错。

搭配编辑器

Atom 编辑器下可以安装 linter-eslint 插件,可以在编辑文件的时候实时提示语法错误。

使用成本(中)

搭配编辑器使用是开发过程中的最佳实践。另外两种方法都会导致代码编写之后巨量文件需要修改的问题。
但是在使用过程中也会遇到各种各样的问题,比如在函数内声明一个变量导致多行代码的改动,函数内部不能修改参数等等,需要花费一点时间去习惯。

迁移成本(低)

针对旧项目,我们可以只用 jslint 作为编辑器的插件,只在写代码的时候会给出提示,不影响代码的编译。
针对新项目,我们可以将 jslint 同时用在编辑器和 webpack 上。

收益(中)

因为 jslint 主要是对 js 语法和格式做检查,所以收益主要是使得代码更规范。

flow

flow 是 facebook 推出的一款 js 静态类型检查工具。由 ocam 语言编写。

安装方法

sudo brew install flow

使用方法

需要检查的 js 文件需要在文件顶部注明 。
// @flow
然后在项目目录下运行 flow init,再调用 flow 来执行检查。

搭配 babel

flow 官方提供了一个 babel 插件 transform-flow-strip-types 专门用于删除 flow 定义的类型声明。

搭配编辑器

atom 下有个 linter-flow 插件可以使用,作为实时的检查。

使用成本(偏高)

如果推广使用的话,首先是学习成本的问题,但好在 flow 并不算复杂。
另外一个问题是用了 flow 的话就不能用 jslint 了,虽然 flow 会检查代码语言的合法性,但想要更严格的格式检查就没办法了。
使用 flow 一般的模式就是在开发环境下搭配编辑器做实时的检查,然后编译或者运行的时候用 babel 把类型声明的语句删除掉。

迁移成本(低)

旧项目如果之前没有用过 babel 的话迁移会比较麻烦,因为 flow 依赖 babel。
新项目的话成本则很低,只需要加上 babel 插件就行了。

收益(偏高)

flow 对代码做了类型检查,可以避免 「undefined is not a function」之类的错误。而且由于类型固定了,在 v8 上的执行效率会更高。

typescript

typescript 是微软出品的一个 js 超集,为 js 带来了类型等一系列功能,使得 js 有了类似于 java 般的开发体验。

安装方法

npm install -g typescript

使用方法

typescript 文件是以 ts 做后缀的。
在项目中运行 tsc --init 做初始化。
然后 tsc <文件名> 做编译,会生成对应的 js 文件。

搭配 webpack

ts-loader 可以处理 typescript 的编译。

搭配编辑器

atom-typescript 是 typescript 官方出品的 atom 插件,其包含的如「goto declaration」,「quick fix」,「live error analysis」等功能可以带来如 java ide 般的开发体验。

使用成本(高)

typescript 的学习成本比 flow 要高,他包含了泛型、接口等很多 java、C# 的概念,对于熟悉这两种语言的人来说 TS 可能上手难度会很简单。
但如果要构建大型程序的话 TS 也许会蛮合适,TS 的自动提示可以精确的列出一个变量的所有方法,其它编辑器的功能也能很好的提高开发效率。
typescript 也支持 jsx 语法。

迁移成本(高)

旧项目基本不能迁移。
新项目需要加上 ts 的 webpack 插件。

收益(高)

因为 TS 提供了很多强类型语言的功能,所以可以使得代码更健壮,编译后的代码也是针对 V8 等 js 引擎优化过的,所以执行效率也不会太慢。
官方的编辑器插件还提供 「Format code on save」的功能,可以保证输出的代码风格一致,这一功能可以替代 jslint。
TS 1.8 版本里支持 jsx,await, async 等 es6、es7 的语法,所以可以在项目中省去 babel。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79490.html

相关文章

  • 类型系统-前端进化的里程碑

    摘要:这些优势,其实都是类型系统所带来的强类型语言所具有的开发优势,无论是在开发体验还是后期项目维护上,都要优于目前的。 大半夜的JavaScript Weekly发来贺电:TypeScript 2.0 Final Released! 没错,继Angular2发布之后,TypeScript今天也发布了2.0版本,这不禁让我浮想一番。如果要说TS和JS最明显的差别,我想一定是Type Syst...

    wangzy2019 评论0 收藏0
  • JavaScript开发工具大全

    摘要:发布于之后,采用了完全不同的方式,使用函数定义任务。它允许开发者使用它们的补丁和更新来修复这些安全漏洞。提供了工具用于扫描依赖来监测漏洞。是一个开源诊断工具,用于和应用。是和开发的一款新的包管理工具。与相比,它解决了安全性能以及一致性问题。 译者按: 最全的JavaScript开发工具列表,总有一款适合你! 原文: THE ULTIMATE LIST OF JAVASCRIPT TOO...

    nifhlheimr 评论0 收藏0
  • Flow - JS静态类型检查工具

    摘要:介绍是个的静态类型检查工具,由出品的开源码项目,问世只有一年多,是个相当年轻的项目。现在,提供了另一个新的选项,它是一种强静态类型的辅助检查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目标是提供一些Flow工具的介绍与使用建议。Flow本质上也只是个检查工具,它并不会自动修正代码中的错误,也不会强制...

    seanHai 评论0 收藏0
  • 前端周刊第59期:选 Flow 还是 TypeScript

    摘要:周末是时隔两月的家人团聚,而每次内容的准备平均需要我集中精力工作小时,所以第期的内容今早才准备好,对不住大家了。下面是本周精选内容,请享用。本文作者王仕军,商业转载请联系作者获得授权,非商业转载请注明出处。 showImg(https://segmentfault.com/img/remote/1460000009742537?w=1240&h=509); 周末是时隔两月的家人团聚,而...

    Julylovin 评论0 收藏0
  • 阿里云前端周刊 - 第 15 期

    摘要:推荐为什么我们选择本文是工程师记述在前端技术选型时选用的考虑过程。能够保证较好的类型覆盖,但是其对于多态性的支持并不是很好,并且的社区也相对活跃。引擎就是为解决这一问题而生,在中也是采用该引擎来解析。 推荐 1. 为什么我们选择 TypeScript https://redditblog.com/2017/0... 本文是 Reddit 工程师 Niranjan Ramadas 记述在...

    stefanieliang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<