jslint、flow 與 typescript

habren 發(fā)布于2019-08-19 18:21 / 1487人閱讀

摘要：命令行目錄文件運(yùn)行后將會(huì)檢查目錄下的文件，并將有問(wèn)題的語(yǔ)句打印出來(lái)。使用成本中搭配編輯器使用是開(kāi)發(fā)過(guò)程中的最佳實(shí)踐。是推出的一款靜態(tài)類型檢查工具。收益偏高對(duì)代碼做了類型檢查，可以避免之類的錯(cuò)誤。

jslint airbnb-config

jslint 的作用是對(duì) js 做語(yǔ)法檢查，他可以使代碼更加規(guī)范、清晰，而 airbnb-config 是其中最流行的一套檢查規(guī)則。

安裝方法

npm install jslint eslint-config-airbnb
然后在項(xiàng)目目錄下創(chuàng)建 .eslintrc 文件，輸入內(nèi)容「{ "extends": "airbnb", "rules": { "strict": 0 }」。

命令行

jslint <目錄|文件>
運(yùn)行后將會(huì)檢查目錄下的文件，并將有問(wèn)題的語(yǔ)句打印出來(lái)。

搭配 webpack

需要安裝 jslint-loader，并且在 webpack.config.js 的 preloaders 里做一些配置。
當(dāng) webpack 編譯的時(shí)候就會(huì)調(diào)用 jslint 做檢查，如果發(fā)現(xiàn)不符合規(guī)范的地方，就會(huì)自動(dòng)報(bào)錯(cuò)。

搭配編輯器

Atom 編輯器下可以安裝 linter-eslint 插件，可以在編輯文件的時(shí)候?qū)崟r(shí)提示語(yǔ)法錯(cuò)誤。

使用成本（中）

搭配編輯器使用是開(kāi)發(fā)過(guò)程中的最佳實(shí)踐。另外兩種方法都會(huì)導(dǎo)致代碼編寫之后巨量文件需要修改的問(wèn)題。
但是在使用過(guò)程中也會(huì)遇到各種各樣的問(wèn)題，比如在函數(shù)內(nèi)聲明一個(gè)變量導(dǎo)致多行代碼的改動(dòng)，函數(shù)內(nèi)部不能修改參數(shù)等等，需要花費(fèi)一點(diǎn)時(shí)間去習(xí)慣。

遷移成本（低）

針對(duì)舊項(xiàng)目，我們可以只用 jslint 作為編輯器的插件，只在寫代碼的時(shí)候會(huì)給出提示，不影響代碼的編譯。
針對(duì)新項(xiàng)目，我們可以將 jslint 同時(shí)用在編輯器和 webpack 上。

收益（中）

因?yàn)?jslint 主要是對(duì) js 語(yǔ)法和格式做檢查，所以收益主要是使得代碼更規(guī)范。

flow

flow 是 facebook 推出的一款 js 靜態(tài)類型檢查工具。由 ocam 語(yǔ)言編寫。

安裝方法

sudo brew install flow

使用方法

需要檢查的 js 文件需要在文件頂部注明。
// @flow
然后在項(xiàng)目目錄下運(yùn)行 flow init，再調(diào)用 flow 來(lái)執(zhí)行檢查。

搭配 babel

flow 官方提供了一個(gè) babel 插件 transform-flow-strip-types 專門用于刪除 flow 定義的類型聲明。

搭配編輯器

atom 下有個(gè) linter-flow 插件可以使用，作為實(shí)時(shí)的檢查。

使用成本（偏高）

如果推廣使用的話，首先是學(xué)習(xí)成本的問(wèn)題，但好在 flow 并不算復(fù)雜。
另外一個(gè)問(wèn)題是用了 flow 的話就不能用 jslint 了，雖然 flow 會(huì)檢查代碼語(yǔ)言的合法性，但想要更嚴(yán)格的格式檢查就沒(méi)辦法了。
使用 flow 一般的模式就是在開(kāi)發(fā)環(huán)境下搭配編輯器做實(shí)時(shí)的檢查，然后編譯或者運(yùn)行的時(shí)候用 babel 把類型聲明的語(yǔ)句刪除掉。

遷移成本（低）

舊項(xiàng)目如果之前沒(méi)有用過(guò) babel 的話遷移會(huì)比較麻煩，因?yàn)?flow 依賴 babel。
新項(xiàng)目的話成本則很低，只需要加上 babel 插件就行了。

收益（偏高）

flow 對(duì)代碼做了類型檢查，可以避免「undefined is not a function」之類的錯(cuò)誤。而且由于類型固定了，在 v8 上的執(zhí)行效率會(huì)更高。

typescript

typescript 是微軟出品的一個(gè) js 超集，為 js 帶來(lái)了類型等一系列功能，使得 js 有了類似于 java 般的開(kāi)發(fā)體驗(yàn)。

安裝方法

npm install -g typescript

使用方法

typescript 文件是以 ts 做后綴的。
在項(xiàng)目中運(yùn)行 tsc --init 做初始化。
然后 tsc <文件名> 做編譯，會(huì)生成對(duì)應(yīng)的 js 文件。

搭配 webpack

ts-loader 可以處理 typescript 的編譯。

搭配編輯器

atom-typescript 是 typescript 官方出品的 atom 插件，其包含的如「goto declaration」，「quick fix」，「live error analysis」等功能可以帶來(lái)如 java ide 般的開(kāi)發(fā)體驗(yàn)。

使用成本（高）

typescript 的學(xué)習(xí)成本比 flow 要高，他包含了泛型、接口等很多 java、C# 的概念，對(duì)于熟悉這兩種語(yǔ)言的人來(lái)說(shuō) TS 可能上手難度會(huì)很簡(jiǎn)單。
但如果要構(gòu)建大型程序的話 TS 也許會(huì)蠻合適，TS 的自動(dòng)提示可以精確的列出一個(gè)變量的所有方法，其它編輯器的功能也能很好的提高開(kāi)發(fā)效率。
typescript 也支持 jsx 語(yǔ)法。

遷移成本（高）

舊項(xiàng)目基本不能遷移。
新項(xiàng)目需要加上 ts 的 webpack 插件。

收益（高）

因?yàn)?TS 提供了很多強(qiáng)類型語(yǔ)言的功能，所以可以使得代碼更健壯，編譯后的代碼也是針對(duì) V8 等 js 引擎優(yōu)化過(guò)的，所以執(zhí)行效率也不會(huì)太慢。
官方的編輯器插件還提供「Format code on save」的功能，可以保證輸出的代碼風(fēng)格一致，這一功能可以替代 jslint。
TS 1.8 版本里支持 jsx，await, async 等 es6、es7 的語(yǔ)法，所以可以在項(xiàng)目中省去 babel。