目前 我选用的IDE 是vscode Mac版 vscode官网
1,免费,不想用破解版
2,熟悉
3,快,完全不像Atom
4,配置教程很多,出问题容易解决
插件安装 ---我觉得够用就好 选择自己合适的
-
React Native Tools (必备)微软官方为 React Native 开发提供的专门的插件
-
Auto Rename Tag (优化开发体验,非必备,但推荐安装)修改HTML标签时，自动修改匹配的标签
-
Auto Close Tag (优化开发体验,非必备,但推荐安装)自动闭合HTML标签
-
Flow Language Support (优化开发体验,非必备) VS Code 中支持 Flow 的插件，当然前提是安装好 Flow
-
ESLint (优化开发体验,非必备,但推荐安装)静态代码检查主要用来对代码的编程规范，语法错误等进行扫描，从而在代码执行之前发现可能存在的问题
-
React-Native/React/Redux snippets for es6/es7 (必备) React Native，React，Redux 常见代码片段的插件
-
Document This (必备) 自动生成 JSDoc 注释的插件
-
TODO Highlight (必备) 支持
TODO:，FIXME:等类型注释关键词高亮的插件 -
Path Intellisense (优化开发体验,非必备,但推荐安装) 支持自动补全文件路径名的插件
-
Rainbow Brackets (优化开发体验,非必备,但推荐安装) 支持不同类型的括号进行彩色着色，支持圆括号，方括号和花括号
主题
- Dark+
语言推荐 en
将locale.json 文件中的"locale":"zh-CN" —>改为 "locale":"en" 重启ok
配置
-
屏蔽VSCode自带代码检测
自带代码检测无法很好的识别ES6,使用ESlint做代码检测之后,需要屏蔽VSCode自带. 在配置文件中添加:
"javascript.validate.enable": false -
设置默认打开.js文件为javascriptReact
默认的javascript文件识别下,不能很好的支持标签的补全.安装了ReactNativeTools插件之后,可以把.js文件标记为javascriptReact文件类型,只需要在配置文件中添加:
"files.associations": {"*.js":"javascriptreact"}
配置ESlint
-
全局安装eslint
npm install eslint -g -
命令行进去项目目录
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"},运行检查
npm run lint
配置完毕!!!
