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

Flow

Flow的意義

Flow是faceBook開源的一個JavaScript靜態類型檢查工具，做用相似TypeScript，可是它不像TS那樣是一門獨立的語言，而是做爲一個babel-plugin,藉助babel的編譯切入JavaScript的編碼當中，同時，與ts不一樣的是，Flow.js的類型檢查不是強制的，能夠經過//@flow手動開啓，意味着，你能夠自由選擇某個文件是否開啓類型檢查。

 

Flow真是眼前一亮，我就想，TypeScript挺好的，但或許也給人帶來了一些煩惱，一旦用了TS，就意味着任什麼時候候都要強制類型檢查，我以爲，選擇JavaScript仍是TypeScript就變成了這樣一個問題：咱們手頭1000元，咱們究竟是買一件一萬元的比較喜歡的還耐用的衣服呢？仍是買一件很便宜可是又不耐用的地攤貨呢？（耐用指的是維護性），但Flow幫咱們找到了折中方案：類型檢查這東西，咱們在想用和須要用的時候用，同時不想用也能夠不用，就比如就是手裏有1000塊，那咱們就恰好去買1000塊錢的衣服

Flow的使用

//@flow
//數字
functionflow1(x:number){
  console.log(x);
}
flow1(2);
//字符串
functionflow2(x:string){
  console.log(x);
}
flow2("xxx");
//可選參數
functionflow3(x:?string){
  console.log(x);
}
flow3();
//多個值
functionflow4(x:"a"|"b"|"c"){
  console.log(x);
}
flow3("a");
//任意值
functionflow5(y:any){
  console.log(y);
}
flow3("a");
//數組
let arr:Array<boolean>=[true,false,true];

 

Flow的優勢

• 自由和[可選]的類型檢查風格
• 輕量化的類型檢查，知足一些基本要求，同時容易學習上手
• 藉助babel，webpack集成到JS代碼中，在當今前端社區中，這種方式很是容易被你們所理解和接受，同時也容易集成到已有的項目中

Flow的缺點

這傢伙簡直和JS一毛同樣，既有有好用的優勢，同時呢，卻也有一些明顯的缺點。

• 編輯器或IDE集成度低,好比，好比基本的變量提示功能
• 社區力量較弱，庫的數量較少
• 庫的類型定義質量不高，沒法徹底知足開發需求
• FacebookFlow團隊的roadmap也並非很清楚

Flow的安裝（Webpack集成）

(注意⚠️：你須要確保你有一個可運行的webpack配置，同時在module.rules配置項中引入了babel-loader解析全部js文件)

過程

1. 下載VScode擴展插件：FlowLanguageSupport，以在IDE中支持
2. 安裝plugin-transform-flow-strip-types插件，運行如下命令

npm install @babel/plugin-transform-flow-strip-types

4. 建立.babelrc文件，寫入如下配置

{
  "plugins":[
    "transform-flow-strip-types"
  ]
}

5. 運行如下命令，安裝flow命令行

npm install -g flow-bin

 

6. 在每次啓動項目前都檢查Flow是否有報錯，例如我就在在啓動腳本中添加以下語句，它每次會先檢查flow有沒有報錯，而後才用Node啓動項目

"scripts":{
  "start":"flow check src && node ./server.js",
}

7. 編寫flow代碼吧！！可是你須要給當前文件加上//@flow，若是不加，那麼flowcheck將不作檢查

//@flow
functionflow1(x:number){
  console.log(x);
}
//flow函數
flow1(2);
//普通函數
functioncommon(a){
  console.log(a);
}
common(1);

 

運行示例

運行 flow check src檢測src下的執行狀況

 

類型匹配，無錯誤

類型不匹配，報錯（要求數字但傳入了字符串）

 

 

Prettier

prettier的意思是漂亮的，但其實我以爲，「美化代碼」並非它的核心功能，它的核心功能是「統一代碼規範」（固然了，是用漂亮的規範去統一哈哈）。長久以來，團隊建設的一個重點要求就是」讓幾十我的寫的代碼看上去是一我的寫的「。假若如此，團隊協做，代碼維護能力便大大加強。Prettier是完成這一豐功偉績的功臣。

 

Prettier是用來規範代碼風格的，一些IDE好比VScode能夠給咱們提供代碼格式化的功能，可是這種功能仍然有限。Prettier則提供了至關完善的代碼風格規範。

 

試看——

A：我就喜歡這樣寫！！

import {A,B,C,D,E} from‘lib’

B: 我建議啊，應該這樣寫

import{
  A,
  B,
  C,
  D,
  E
} from ‘lib’

A：你寫的不夠大氣！

B：你寫的不夠簡潔！

(互懟時刻即將開啓）

 

Prettier和事佬：好了好了，兩位英雄莫相爭執，且聽個人！大家都寫成我這樣就得了！

A,B:好，那咱就這麼辦

 

如何使用Prettier

1. 在VScode上下載Prettier擴展插件，最好把編輯器重啓一下。而後保存時就能夠自動格式化了
2. 根據官網上的指示進行操做，下面這個講的是如何從Eslint上集成Prettier Integrating with Linters · Prettier
3. 其實通常狀況下，有VScode的Prettier插件就足夠指導開發了，若是你想一次性把所有JS/JSX文件所有格式化一遍，能夠這樣，在根目錄下運行：

yarn prettier --write './src/**/*.js' './src/**/*.jsx’

 

運行示例

右邊是格式化後的

 

ESlint

ESlint這種和咱們朝夕相處的夥伴就沒必要過多解釋了吧，它的做用是作一些靜態檢查，對於一些可能在JS運行時候纔會報的錯誤當即檢測出來。

ESlint的使用

1. 在VScode上下載Eslint擴展插件，最好把編輯器重啓一下
2. 設置Eslint這個VScode擴展插件的AutoFix功能，如圖所示
3. 在項目下安裝eslint命令行並進行初始化

  3.1 運行 npm init: 先初始化下npm空間    
  3.2 運行 npm i eslint, 安裝eslint
  3.3 運行 eslint --init：初始化eslint

         當你敲出init後，eslint的命令行會自動詢問你一大堆選擇題，而你只要經過箭頭選擇選項並回車就行了，很方便啊！

這些問題包括：

• Q1. 你想如何使用eslint?1.檢查語法2.檢查語法而且發現問題3.檢查語法，發現問題並強制約定代碼風格
• Q2. 你的項目使用的模塊化方式？1.CommonJS 2.Import/export 3.None of these
• Q3. 你的環境？ 1.Node 2.瀏覽器
• Q4. 你使用到的框架? 1.React 2.Vue 3. None of these
• Q5. 你的項目使用TypeScript? 1.Y 2.N

(爽！媽媽不再用擔憂個人配置了)

 

你可能會問：哎呀！我不當心搞錯了選項！，那我要從新來一次嗎？

不用的，由於其實上面的選擇只是幫助生成配置文件而已，你要改隨時改配置文件就能夠了呀。

 

咱們來看下面的一份配置文件

{
  "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真棒，讓咱們看看這些配置選項都是怎麼搞的吧

1.env配置項

常見的可配置的有

"env":{
  "browser":true,//瀏覽器環境
  "node":true,//Node環境
  "es6":true,//es6語法
  "commonjs":true,//commonjs
  "worker":true//webwork相關語法
},

2.globals配置項

它配的是全局變量，通常狀況下，按照eslint的規則，直接使用全局變量是會報錯的，globals配置項幫你避免了這一點

"globals":{
  "Atomics":"readonly",
  "SharedArrayBuffer":"readonly"
},

 

3.parser配置項

能夠配置解析器，默認是用的typescript的解析器，好比咱們項目中就改爲了babel-parser

"parser": "@typescript-eslint/parser」,

 

4.rules

配置具體的檢查細節，好比下面這條配置直接幹了no-console，若是使用console.log會報警告。如圖所示

"rules":{
  "no-console":1
}

每一個項目後面能夠跟0，1，2三種數字

0:不報錯，不警告
1：警告但不報錯
2:報錯

5.extends

你可能會問了，哎呀！！這麼多rules我還怎麼配啊，這樣eslint配置文件連起來均可以繞VScode兩圈了！

不要擔憂！！咱們有extends配置項這個好東西，它提供的繼承功能直接集成了一些默認的配置，以下

"extends":[
  "eslint:recommended",
  "plugin:@typescript-eslint/eslint-recommended"
]

 

6.plugins

加各類插件，好比你想增長React的檢查怎麼辦？

你須要安裝eslint-plugin-react這個插件

而後在配置中增長如下內容

"plugins":["react」]

就OK了

 

運行示例

 

備註：官方推薦使用局部eslint而非全局eslint

ESLint was installed locally. We recommend using this local copy instead of your globally-installed copy