選擇：vscode + typings + eslint

目前創(chuàng)新互聯(lián)公司已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、陽(yáng)春網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

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

工具和插件

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

代碼智能提示

對(duì)于第三方包，比如react-native:

全局安裝typings:

npm install typings -g

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

typings install dt~react --save

typings install dt~react-native --save

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

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

方法智能提示：

顯示方法的參數(shù)：

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

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

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

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

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

如何編寫接口文件：文檔

代碼靜態(tài)檢查

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

vscode中安裝了對(duì)應(yīng)插件后，就可以實(shí)時(shí)在編輯器上看到檢測(cè)結(jié)果，不用自己運(yùn)行CLI。

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

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

然后運(yùn)行npm install安裝。

配置文件.eslintrc.js（這里我們采用了js格式，因?yàn)榭梢约幼⑨??？蛇xjson格式）
這里可以用eslint init啟動(dòng)向?qū)梢粋€(gè)。

我們可直接使用現(xiàn)成的（好處是和團(tuán)隊(duì)其他項(xiàng)目保持一致），在項(xiàng)目根目錄新建一個(gè).eslintr.js文件，內(nèi)容如下

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等注入屬性的情況

},

// 這里設(shè)置可能用到的全局變量
"globals": {
"window": true,
"fetch": true,
"DEV": true,
"APP": true,
"ANDROID": true,
"IOS": true
}
};

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

規(guī)則列表
規(guī)則后面的 0 代表關(guān)閉， 1 代表顯示警告， 2 代表顯示錯(cuò)誤。有些規(guī)則可以配置參數(shù)，具體看上面的規(guī)則列表文檔
有一些簡(jiǎn)單錯(cuò)誤，vscode是可以自動(dòng)修復(fù)的（如果出現(xiàn)小燈泡的icon，就是可以自動(dòng)修復(fù)）
這里的規(guī)則基本都是實(shí)踐總結(jié)的js代碼編寫的最佳實(shí)踐，遇到檢測(cè)錯(cuò)誤時(shí)，直接搜索規(guī)則，并閱讀說(shuō)明。

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

安裝vscode的eslint插件后：

What’s more:

可以使用pre-commit工具，在每次提交之前運(yùn)行eslint監(jiān)測(cè)代碼，如果失敗，則禁止提交。

Debug

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

更接近原生的調(diào)試方式。

我們常使用的方式是：

在終端開啟package server
vscode選擇，dbug, attach to packager
在終端上，調(diào)出調(diào)試菜單，選擇 Debug JS Remotly

當(dāng)前標(biāo)題：使用VisualStudioCode開發(fā)react-native
文章網(wǎng)址：http://aaarwkj.com/article40/isjpeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、建站公司、響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)