jslint、flow 与 typescript

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。