目前 我選用的IDE 是vscode Mac版 vscode官網(wǎng)
1,免費(fèi),不想用破解版
2,熟悉
3,快,完全不像Atom
4,配置教程很多,出問題容易解決
插件安裝 ---我覺得夠用就好 選擇自己合適的
-
React Native Tools (必備)微軟官方為 React Native 開發(fā)提供的專門的插件
-
Auto Rename Tag (優(yōu)化開發(fā)體驗(yàn),非必備,但推薦安裝)修改HTML標(biāo)簽時(shí)渠退，自動(dòng)修改匹配的標(biāo)簽
-
Auto Close Tag (優(yōu)化開發(fā)體驗(yàn),非必備,但推薦安裝)自動(dòng)閉合HTML標(biāo)簽
-
Flow Language Support (優(yōu)化開發(fā)體驗(yàn),非必備) VS Code 中支持 Flow 的插件，當(dāng)然前提是安裝好 Flow
-
ESLint (優(yōu)化開發(fā)體驗(yàn),非必備,但推薦安裝)靜態(tài)代碼檢查主要用來對(duì)代碼的編程規(guī)范，語法錯(cuò)誤等進(jìn)行掃描解虱，從而在代碼執(zhí)行之前發(fā)現(xiàn)可能存在的問題
-
React-Native/React/Redux snippets for es6/es7 (必備) React Native夹囚，React养渴，Redux 常見代碼片段的插件
-
Document This (必備) 自動(dòng)生成 JSDoc 注釋的插件
-
TODO Highlight (必備) 支持
TODO:介劫，FIXME:等類型注釋關(guān)鍵詞高亮的插件 -
Path Intellisense (優(yōu)化開發(fā)體驗(yàn),非必備,但推薦安裝) 支持自動(dòng)補(bǔ)全文件路徑名的插件
-
Rainbow Brackets (優(yōu)化開發(fā)體驗(yàn),非必備,但推薦安裝) 支持不同類型的括號(hào)進(jìn)行彩色著色包归，支持圓括號(hào)苇经，方括號(hào)和花括號(hào)
主題
- Dark+
語言推薦 en
將locale.json 文件中的"locale":"zh-CN" —>改為 "locale":"en" 重啟ok
配置
-
屏蔽VSCode自帶代碼檢測
自帶代碼檢測無法很好的識(shí)別ES6,使用ESlint做代碼檢測之后,需要屏蔽VSCode自帶. 在配置文件中添加:
"javascript.validate.enable": false -
設(shè)置默認(rèn)打開.js文件為javascriptReact
默認(rèn)的javascript文件識(shí)別下,不能很好的支持標(biāo)簽的補(bǔ)全.安裝了ReactNativeTools插件之后,可以把.js文件標(biāo)記為javascriptReact文件類型,只需要在配置文件中添加:
"files.associations": {"*.js":"javascriptreact"}
配置ESlint
-
全局安裝eslint
npm install eslint -g -
命令行進(jìn)去項(xiàng)目目錄
eslint --initHow would you like to configure ESLint?
Use a popular style guideWhich style guide do you want to follow?
AirbnbDo you use React?
YesWhat format do you want your config file to be in?
JavaScript等命令行配置好后修改.eslintrc.js
module.exports = {?
"extends": "airbnb",?
"plugins": [?
"react",?
"react-native"?
],?
"globals": {?
"__DEV__": true,?
"fetch": true?
},?
"parser": "babel-eslint",?
"rules": {?
"max-len": ["error", 120],?
"no-console": 0,?
"react/forbid-prop-types": [0, { "forbid": ["any", "array", "object"] }],?
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]?
}};配置檢查腳本在package.json
"scripts": {?
"start": "node node_modules/react-native/local-cli/cli.js start",?
"test": "jest",?
"lint": "eslint --ext .js ./src --fix"},運(yùn)行檢查
npm run lint
配置完畢!!!
