【JavaScript】ESlint & Prettier & Flow組合，得此三神助，混沌歸太清

Flow

Flow的意義

Flow是faceBook開源的一個(gè)JavaScript靜態(tài)類型檢查工具，作用類似TypeScript，但是它不像TS那樣是一門獨(dú)立的語言，而是作為一個(gè)babel-plugin,借助babel的編譯切入JavaScript的編碼當(dāng)中，同時(shí)，與ts不同的是，F(xiàn)low.js的類型檢查不是強(qiáng)制的，可以通過//@flow手動(dòng)開啟，意味著，你可以自由選擇某個(gè)文件是否開啟類型檢查。
?
Flow真是眼前一亮，我就想，TypeScript挺好的，但或許也給人帶來了一些煩惱，一旦用了TS，就意味著任何時(shí)候都要強(qiáng)制類型檢查，我覺得，選擇JavaScript還是TypeScript就變成了這樣一個(gè)問題：我們手頭1000元，我們到底是買一件一萬元的比較喜歡的還耐用的衣服呢？還是買一件很便宜但是又不耐用的地?cái)傌浤?？（耐用指的是維護(hù)性），但Flow幫我們找到了折中方案：類型檢查這東西，我們在想用和需要用的時(shí)候用，同時(shí)不想用也可以不用，就好比就是手里有1000塊，那我們就剛好去買1000塊錢的衣服
Flow的使用
//@flow //數(shù)字 functionflow1(x:number){ console.log(x); } flow1(2); //字符串
functionflow2(x:string){ console.log(x); } flow2("xxx"); //可選參數(shù)
functionflow3(x:?string){ console.log(x); } flow3(); //多個(gè)值
functionflow4(x:"a"|"b"|"c"){ console.log(x); } flow3("a"); //任意值
functionflow5(y:any){ console.log(y); } flow3("a"); //數(shù)組 let arr:Array<boolean
>=[true,false,true];
?

Flow的優(yōu)點(diǎn)

* 自由和[可選]的類型檢查風(fēng)格
* 輕量化的類型檢查，滿足一些基本要求，同時(shí)容易學(xué)習(xí)上手
* 借助babel，webpack集成到JS代碼中，在當(dāng)今前端社區(qū)中，這種方式非常容易被大家所理解和接受，同時(shí)也容易集成到已有的項(xiàng)目中
Flow的缺點(diǎn)
這家伙簡直和JS一毛一樣，既有有好用的優(yōu)點(diǎn)，同時(shí)呢，卻也有一些明顯的缺點(diǎn)。
* 編輯器或IDE集成度低,比如，比如基本的變量提示功能
* 社區(qū)力量較弱，庫的數(shù)量較少
* 庫的類型定義質(zhì)量不高，無法完全滿足開發(fā)需求
* FacebookFlow團(tuán)隊(duì)的roadmap也并不是很清楚
Flow的安裝（Webpack集成）

(注意??：你需要確保你有一個(gè)可運(yùn)行的webpack配置，同時(shí)在module.rules配置項(xiàng)中引入了babel-loader解析所有js文件)
過程
* 下載VScode擴(kuò)展插件：FlowLanguageSupport，以在IDE中支持
* 安裝plugin-transform-flow-strip-types插件，運(yùn)行以下命令 npm install
@babel/plugin-transform-flow-strip-types 4. 創(chuàng)建.babelrc文件，寫入以下配置 { "plugins":[
"transform-flow-strip-types" ] } 5. 運(yùn)行以下命令，安裝flow命令行 npm install -g flow-bin
?
6. 在每次啟動(dòng)項(xiàng)目前都檢查Flow是否有報(bào)錯(cuò)，例如我就在在啟動(dòng)腳本中添加如下語句，它每次會(huì)先檢查flow有沒有報(bào)錯(cuò)，然后才用Node啟動(dòng)項(xiàng)目
"scripts":{ "start":"flow check src && node ./server.js", } 7.
編寫flow代碼吧??！但是你需要給當(dāng)前文件加上//@flow，如果不加，那么flowcheck將不做檢查 //@flow
functionflow1(x:number){ console.log(x); }//flow函數(shù) flow1(2); //普通函數(shù)
functioncommon(a){ console.log(a); } common(1);
?

運(yùn)行示例
運(yùn)行 flow check src檢測src下的執(zhí)行情況 ? 類型匹配，無錯(cuò)誤 類型不匹配，報(bào)錯(cuò)（要求數(shù)字但傳入了字符串） ? ?
Prettier

prettier的意思是漂亮的，但其實(shí)我覺得，“美化代碼”并不是它的核心功能，它的核心功能是“統(tǒng)一代碼規(guī)范”（當(dāng)然了，是用漂亮的規(guī)范去統(tǒng)一哈哈）。長久以來，團(tuán)隊(duì)建設(shè)的一個(gè)重點(diǎn)要求就是”讓幾十個(gè)人寫的代碼看上去是一個(gè)人寫的“。倘若如此，團(tuán)隊(duì)協(xié)作，代碼維護(hù)能力便大大增強(qiáng)。Prettier是完成這一豐功偉績的功臣。
?
Prettier是用來規(guī)范代碼風(fēng)格的，一些IDE比如VScode可以給我們提供代碼格式化的功能，但是這種功能仍然有限。Prettier則提供了相當(dāng)完善的代碼風(fēng)格規(guī)范。
? 試看—— A：我就喜歡這樣寫！！ import {A,B,C,D,E} from‘lib’ B: 我建議啊，應(yīng)該這樣寫 import{ A, B, C,
D, E } from ‘lib’ A：你寫的不夠大氣！ B：你寫的不夠簡潔！ (互懟時(shí)刻即將開啟） ? Prettier和事佬
：好了好了，兩位英雄莫相爭執(zhí)，且聽我的！你們都寫成我這樣就得了！ A,B:好，那咱就這么辦 ?
如何使用Prettier

* 在VScode上下載Prettier擴(kuò)展插件，最好把編輯器重啟一下。然后保存時(shí)就可以自動(dòng)格式化了
* 根據(jù)官網(wǎng)上的指示進(jìn)行操作，下面這個(gè)講的是如何從Eslint上集成Prettier Integrating with Linters · Prettier
<https://prettier.io/docs/en/integrating-with-linters.html>
* 其實(shí)一般情況下，有VScode的Prettier插件就足夠指導(dǎo)開發(fā)了，如果你想一次性把全部JS/JSX文件全部格式化一遍，可以這樣，在根目錄下運(yùn)行：
yarn prettier --write './src/**/*.js' './src/**/*.jsx’ ?
運(yùn)行示例
右邊是格式化后的 ?
ESlint
ESlint這種和我們朝夕相處的伙伴就不必過多解釋了吧，它的作用是做一些靜態(tài)檢查，對于一些可能在JS運(yùn)行時(shí)候才會(huì)報(bào)的錯(cuò)誤立即檢測出來。
ESlint的使用

* 在VScode上下載Eslint擴(kuò)展插件，最好把編輯器重啟一下
* 設(shè)置Eslint這個(gè)VScode擴(kuò)展插件的AutoFix功能，如圖所示
* 在項(xiàng)目下安裝eslint命令行并進(jìn)行初始化 3.1 運(yùn)行 npm init: 先初始化下npm空間 3.2 運(yùn)行 npm i eslint,
安裝eslint 3.3 運(yùn)行 eslint --init：初始化eslint ? ? ? ? ?當(dāng)你敲出init后，
eslint的命令行會(huì)自動(dòng)詢問你一大堆選擇題，而你只要通過箭頭選擇選項(xiàng)并回車就好了，很方便?。?這些問題包括：
* Q1. 你想如何使用eslint?1.檢查語法2.檢查語法并且發(fā)現(xiàn)問題3.檢查語法，發(fā)現(xiàn)問題并強(qiáng)制約定代碼風(fēng)格
* Q2. 你的項(xiàng)目使用的模塊化方式？1.CommonJS 2.Import/export 3.None of these
* Q3. 你的環(huán)境？ 1.Node 2.瀏覽器
* Q4. 你使用到的框架? 1.React 2.Vue 3. None of these
* Q5. 你的項(xiàng)目使用TypeScript? 1.Y 2.N (爽！媽媽再也不用擔(dān)心我的配置了) ?
你可能會(huì)問：哎呀！我不小心搞錯(cuò)了選項(xiàng)！，那我要重新來一次嗎？ 不用的，因?yàn)槠鋵?shí)上面的選擇只是幫助生成配置文件而已，你要改隨時(shí)改配置文件就可以了呀。 ?
我們來看下面的一份配置文件 { "env":{ "browser":true, "es6":true }, "extends":[
"eslint:recommended", "plugin:@typescript-eslint/eslint-recommended" ],
"globals":{ "Atomics":"readonly", "SharedArrayBuffer":"readonly" },
"parser":"@typescript-eslint/parser", "parserOptions":{ "ecmaVersion":2018,
"sourceType":"module" }, "plugins":["@typescript-eslint"], "rules":{ "semi":
["error","always"], "quotes":["error","double"] } }
?
eslint真棒，讓我們看看這些配置選項(xiàng)都是怎么搞的吧 1.env配置項(xiàng) 常見的可配置的有 "env":{ "browser":true,//瀏覽器環(huán)境
"node":true,//Node環(huán)境 "es6":true,//es6語法 "commonjs":true,//commonjs "worker":true
//webwork相關(guān)語法 }, 2.globals配置項(xiàng)
它配的是全局變量，一般情況下，按照eslint的規(guī)則，直接使用全局變量是會(huì)報(bào)錯(cuò)的，globals配置項(xiàng)幫你避免了這一點(diǎn) "globals":{
"Atomics":"readonly", "SharedArrayBuffer":"readonly" },
?
3.parser配置項(xiàng) 可以配置解析器，默認(rèn)是用的typescript的解析器，比如我們項(xiàng)目中就改成了babel-parser "parser":
"@typescript-eslint/parser”,
?
4.rules 配置具體的檢查細(xì)節(jié)，比如下面這條配置直接干了no-console，如果使用console.log會(huì)報(bào)警告。如圖所示 "rules":{
"no-console":1 }
每個(gè)項(xiàng)目后面可以跟0，1，2三種數(shù)字 0:不報(bào)錯(cuò)，不警告 1：警告但不報(bào)錯(cuò) 2:報(bào)錯(cuò) 5.extends 你可能會(huì)問了，哎呀！！
這么多rules我還怎么配啊，這樣eslint配置文件連起來都可以繞VScode兩圈了！
不要擔(dān)心?。∥覀冇衑xtends配置項(xiàng)這個(gè)好東西，它提供的繼承功能直接集成了一些默認(rèn)的配置，如下 "extends":[
"eslint:recommended", "plugin:@typescript-eslint/eslint-recommended" ]
?
6.plugins 加各種插件，比如你想增加React的檢查怎么辦？ 你需要安裝eslint-plugin-react這個(gè)插件 然后在配置中增加以下內(nèi)容
"plugins":["react”] 就OK了 ?
運(yùn)行示例
? 備注：官方推薦使用局部eslint而非全局eslint ESLint was installed locally. We recommend using
this local copy instead of your globally-installed copy

• ? 上一篇：編寫優(yōu)雅代碼，從挖掉惡心的if/else 開始
• ? 下一篇： 如何守住你的年終獎(jiǎng)？