React Native 項目配置 Flow （windows環境）

 

　　Flow 是 Javascript 的靜態類型檢查器，由Facebook團隊開發，以檢查在大型項目中JavaScript腳本不容易發現的錯誤（如：變量、參數類型檢查等）

 

　　1.設置Flow

　　安裝 flow-bin 到當前項目

　　 npm install --save-dev flow-bin  

　　添加一個"flow"腳本到你的package.json

{
  "name": "my-flow-project",
  "version": "1.0.0",
  "devDependencies": {
    "flow-bin": "^0.51.1"
  },
  "scripts": {
    "flow": "flow"
  }
}

　　

　　2.運行 Flow

　　a. 在項目根目錄下運行此命令

　　 npm run flow init 

　　注：在Flow官方文檔中，第一次運行須要運行此命令，且會產生一個配置文件 .flowconfig，而經過 react-native init ProjectName 或者經過 create-react-native-app ProjectName 建立的 react-native 項目默認設置了 flow 且建立了 .flowconfig 文件，因此不須要執行此命令（跳過此步驟）。

　　b. 給須要flow檢查的文件里加上 //@flow 或者 /*@flow*/ ，而後在項目根目錄下運行如下命令

　　 npm run flow 

　　執行結果以下：如下檢查的是項目 node_modules 目錄下的 js 文件

　　

　　注：執行此命令若是報錯

 後 node_modules 目錄下的文件只要有設置了 //@flow 或  /*@flow*/ 都會檢查一遍，且檢查的文件還不少，致使咱們檢查指定文件的時候效率較低，故咱們在開發工具 WebStorm 上直接配置：
 1. 打開Preferences -> Languages & Frameworks -> JavaScript -> JavaScript language version -> 選擇 Flow
 2. 配置 Flow executable：../../node_modules\flow-bin\flow-win64-v0.51.1\flow.exe
 3. 選擇：
　　Type checking
　　Navigation,code completion,and type hinting

 注：flow.exe 文件是 np install flow-bin 所得的執行文件　　解決：修改項目中的 .flowconfig 文件版本號爲安裝 flow-bin 的版本號:0.51.1

 
 根據以上配置，最後執行 npm run flow

 如圖：
 

　 另外設置錯誤、警告代碼給予提示：

     打開 Preferences -> Editor -> General -> Errors and Warnings -> Error 

     

     測試：在項目中新建 test.js 文件並在頭部註明：//@flow 或 /*@flow*/

    以下圖 一、二、3 處都會給出 根據 Flow 文件代碼檢查機制獲得的錯誤提示，因此咱們能夠很直觀的發現錯誤的具體位置，方便修改