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 等 es六、es7 的语法，因此能够在项目中省去 babel。