1. 程式人生 > >vscode 搭建react-native 詳解

vscode 搭建react-native 詳解

本文記錄如何使用vscode打造一個現代化的RN開發環境,旨在提高開發效率和質量。

問題

  1. 程式碼沒有提示:
    許多剛接觸RN開發的非前端同學,都會問“哪個編輯器有智慧提示?”。。。而對於前端同學來說,現在的日子已經好很多了,要什麼自行車。

  2. 低階程式碼錯誤:
    這裡的錯誤是指類似拼寫錯誤,符號錯誤等。寫完程式碼,跑起來各種報錯,有時候費死勁的找,最後發現是個中文的分號問題。

解決辦法

可選的方案大概有:

  1. 使用typescript: 直接使用有靜態型別支援的js版本,but要再學習一套語法,而且我的程式碼都是ts寫的,但很多好的公共庫不是啊。
  2. 使用flow: 由於網路的原因,這個環境真的難配,同時也是要學習一些新的語法。

我們的選擇:vscode + typings + eslint

  • vscode: 宇宙最強IDE家族的最新產品
  • typings: 基於typescirpt的介面檔案
  • eslint: 程式碼靜態檢查,技能檢測低階的語法錯誤,又能規範程式碼格式和應用最佳實踐

工具和外掛

必裝和推薦的外掛如下:

注:

  1. 點選各個外掛,會有對應的詳細的說明
  2. vscode和外掛的更新頻率還是比較快的,推薦及時更新
  3. vscode的外掛安裝很簡單,左側最下面那個按鈕就是擴充套件面板,直接搜尋外掛名字,點選安裝即可

程式碼智慧提示

對於第三方包,比如react-native:

全域性安裝typings:

npm install typings -g

安裝react和react-native的介面說明檔案:

typings install dt~react --save

typings install dt~react-native --save

等待安裝完成後(會取決於包的數目和網路狀況),在專案的根目錄下會有一個typings目錄和typings.json配置檔案:


完成後重啟一下code , 或者使用reload命令,現在react-native和react相關的程式碼就有提示說明了,效果如下:

方法智慧提示:

顯示方法的引數:

hover時顯示說明:


注: 對於其他的第三方包,可以用類似的方法,或者藉助於上面提到的外掛。

如果是業務程式碼開發者:

對於規範的模組化js程式碼,vscode可以自動建立聯絡並提示的,我們只需要寫好註釋即可。

如果是工具包或者SDK開發者:

我們的程式碼是要釋出給其他同學用的,則需要我們在釋出時提供相應的.d.ts介面檔案。
預設是包根目錄下index.d.ts檔案,否則需要在package.json配置中指明typings項(類似main)。

如何編寫介面檔案:文件

程式碼靜態檢查

程式碼靜態藉助於 eslint,它由CLI和配置檔案(規則)組成。

vscode中安裝了對應外掛後,就可以實時在編輯器上看到檢測結果,不用自己執行CLI。

注:本文會涉及eslint-cli的引數,一般開發用不到,在寫自動化指令碼命令時查下文件。

  1. 先安裝eslint cli和相關外掛,專案package.json中開發依賴增加(這是比較流行的RN配置):
"devDependencies": {
    "eslint": "^3.3.1",
    "babel-eslint": "^6.1.2",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-plugin-import": "^1.14.0",
    "eslint-plugin-jsx-a11y": "^2.1.0",
    "eslint-plugin-react": "^6.1.2"
}

然後執行npm install安裝。

  1. 配置檔案.eslintrc.js(這裡我們採用了js格式,因為可以加註釋。可選json格式)

這裡可以用eslint init啟動向導生成一個。

我們可直接使用現成的(好處是和團隊其他專案保持一致),在專案根目錄新建一個.eslintr.js檔案,內容如下

module.exports = {
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  extends: "airbnb",
  plugins: [
    "react",
    "jsx-a11y",
    "import"
  ],
  rules: {
    // 0 = off, 1 = warn, 2 = error
    // FB配置參考:
    // https://github.com/facebook/react-native/blob/8baaad9b0fbda2b02bb1834452aa63cac7910dc5/.eslintrc

    "global-require": 0,
    "no-use-before-define": 0,       // disallow use of variables before they are defined
    "max-len": 0,                    // specify the maximum length of a line in your program (off by default)
    "no-console": 0,                 // disallow use of console (off by default in the node environment)
    "no-undef": 2,                   // disallow use of undeclared variables unless mentioned in a /*global */ block

    "no-unused-vars": 0,
    "block-scoped-var": 0,           // treat var statements as if they were block scoped (off by default)
    "complexity": 0,                 // specify the maximum cyclomatic complexity allowed in a program (off by default)
    "consistent-return": 0,          // require return statements to either always or never specify values

    // allow async-await
    'generator-star-spacing': 0,

    "no-return-assign": 1,           // disallow use of assignment in return statement

    "react/jsx-filename-extension": 0,
    "react/self-closing-comp": 1,
    "react/jsx-closing-bracket-location": 0,
    "react/prop-types": 0, // 避免redux等注入屬性的情況
  },

  // 這裡設定可能用到的全域性變數
  "globals": {
    "window": true,
    "fetch": true,
    "__DEV__": true,
    "__APP__": true,
    "__ANDROID__": true,
    "__IOS__": true
  }
};

這裡主要配置了外掛和檢測規則,一些說明:

  1. 規則列表
  2. 規則後面的 0 代表關閉, 1 代表顯示警告, 2 代表顯示錯誤。有些規則可以配置引數,具體看上面的規則列表文件
  3. 有一些簡單錯誤,vscode是可以自動修復的(如果出現小燈泡的icon,就是可以自動修復)

這裡的規則基本都是實踐總結的js程式碼編寫的最佳實踐,遇到檢測錯誤時,直接搜尋規則,並閱讀說明。

不要隨便就關閉。

安裝vscode的eslint外掛後:

What’s more:

可以使用pre-commit工具,在每次提交之前執行eslint監測程式碼,如果失敗,則禁止提交。

Debug

vscode安裝了react-native-tools外掛後,可以代替chromDevTools除錯程式碼。

更接近原生的除錯方式。

我們常使用的方式是:

  1. 在終端開啟package server
  2. vscode選擇,dbug, attach to packager
  3. 在終端上,調出除錯選單,選擇 Debug JS Remotly

總結

工欲善其事必先利其器,折騰是值得的。

好的開發環境提交提供效率,同時保障質量。

好的開發體驗,可以讓你快樂coding。