教你使用vscode 搭建react-native開(kāi)發(fā)環(huán)境

問(wèn)題

代碼沒(méi)有提示：
許多剛接觸RN開(kāi)發(fā)的非前端同學(xué)，都會(huì )問(wèn)“哪個(gè)編輯器有智能提示？”。。。而對于前端同學(xué)來(lái)說(shuō)，現在的日子已經(jīng)好很多了，要什么自行車(chē)。

低級代碼錯誤：
這里的錯誤是指類(lèi)似拼寫(xiě)錯誤，符號錯誤等。寫(xiě)完代碼，跑起來(lái)各種報錯，有時(shí)候費死勁的找，最后發(fā)現是個(gè)中文的分號問(wèn)題。

解決辦法

可選的方案大概有：

1. 使用typescript: 直接使用有靜態(tài)類(lèi)型支持的js版本，but要再學(xué)習一套語(yǔ)法，而且我的代碼都是ts寫(xiě)的，但很多好的公共庫不是啊。
2. 使用flow: 由于網(wǎng)絡(luò )的原因，這個(gè)環(huán)境真的難配，同時(shí)也是要學(xué)習一些新的語(yǔ)法。

我們的選擇：vscode + typings + eslint

• vscode: 宇宙最強IDE家族的最新產(chǎn)品
• typings: 基于typescirpt的接口文件
• eslint: 代碼靜態(tài)檢查，技能檢測低級的語(yǔ)法錯誤，又能規范代碼格式和應用最佳實(shí)踐

工具和插件

編輯器：

必裝和推薦的插件如下：

注：

• 點(diǎn)擊各個(gè)插件，會(huì )有對應的詳細的說(shuō)明
• vscode和插件的更新頻率還是比較快的，推薦及時(shí)更新
• vscode的插件安裝很簡(jiǎn)單，左側最下面那個(gè)按鈕就是擴展面板，直接搜索插件名字，點(diǎn)擊安裝即可

代碼智能提示

對于第三方包，比如react-native:

全局安裝typings:

npm install typings -g

安裝react和react-native的接口說(shuō)明文件：

typings install dt~react --save

typings install dt~react-native --save

等待安裝完成后（會(huì )取決于包的數目和網(wǎng)絡(luò )狀況），在項目的根目錄下會(huì )有一個(gè)typings目錄和typings.json配置文件:

完成后重啟一下code , 或者使用reload命令，現在react-native和react相關(guān)的代碼就有提示說(shuō)明了，效果如下：

方法智能提示：

顯示方法的參數：

hover時(shí)顯示說(shuō)明：

注： 對于其他的第三方包，可以用類(lèi)似的方法，或者借助于上面提到的插件。

如果是業(yè)務(wù)代碼開(kāi)發(fā)者：

對于規范的模塊化js代碼，vscode可以自動(dòng)建立聯(lián)系并提示的，我們只需要寫(xiě)好注釋即可。

如果是工具包或者SDK開(kāi)發(fā)者：

我們的代碼是要發(fā)布給其他同學(xué)用的，則需要我們在發(fā)布時(shí)提供相應的.d.ts接口文件。
默認是包根目錄下index.d.ts文件，否則需要在package.json配置中指明typings項（類(lèi)似main)。

如何編寫(xiě)接口文件：

代碼靜態(tài)檢查

代碼靜態(tài)借助于 eslint，它由CLI和配置文件（規則）組成。

vscode中安裝了對應插件后，就可以實(shí)時(shí)在編輯器上看到檢測結果，不用自己運行CLI。

注：本文會(huì )涉及eslint-cli的參數，一般開(kāi)發(fā)用不到，在寫(xiě)自動(dòng)化腳本命令時(shí)查下文檔。

先安裝eslint cli和相關(guān)插件，項目package.json中開(kāi)發(fā)依賴(lài)增加（這是比較流行的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安裝。

配置文件.eslintrc.js（這里我們采用了js格式，因為可以加注釋?？蛇xjson格式）

這里可以用eslint init啟動(dòng)向導生成一個(gè)。

我們可直接使用現成的（好處是和團隊其他項目保持一致），在項目根目錄新建一個(gè).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
  }
};

這里主要配置了插件和檢測規則，一些說(shuō)明：

• 規則列表
• 規則后面的 0 代表關(guān)閉， 1 代表顯示警告， 2 代表顯示錯誤。有些規則可以配置參數，具體看上面的規則列表文檔
• 有一些簡(jiǎn)單錯誤，vscode是可以自動(dòng)修復的（如果出現小燈泡的icon，就是可以自動(dòng)修復）

這里的規則基本都是實(shí)踐總結的js代碼編寫(xiě)的最佳實(shí)踐，遇到檢測錯誤時(shí)，直接搜索規則，并閱讀說(shuō)明。

不要隨便就關(guān)閉。

安裝vscode的eslint插件后：

What's more:

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

Debug

vscode安裝了react-native-tools插件后，可以代替chromDevTools調試代碼。

更接近原生的調試方式。

我們常使用的方式是：

• 在終端開(kāi)啟package server
• vscode選擇，dbug, attach to packager
• 在終端上，調出調試菜單，選擇 Debug JS Remotly

總結

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

好的開(kāi)發(fā)環(huán)境提交提供效率，同時(shí)保障質(zhì)量。

好的開(kāi)發(fā)體驗，可以讓你快樂(lè )coding。

到此這篇關(guān)于教你使用vscode 搭建react-native開(kāi)發(fā)環(huán)境的文章就介紹到這了,更多相關(guān)vscode 搭建react-native內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！