React Native学习(二)---配置IDE

目前 我选用的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 --init

  How would you like to configure ESLint? Use a popular style guide

  Which style guide do you want to follow? Airbnb

  Do you use React? Yes

  What 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

  配置完毕!!!