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。