一、环境准备:
1、下载安装VSCode,Node.js,Yarn
2、打开命令行终端或powershell,输入yarn global add create-react-app安装react的脚手架create-react-app
3、打开VSCode,安装相应插件
必要:ESLint、DocumentThis、EasyLess、Complete JSDoc Tags、vscode-flow-ide、React native Tools、vscode-wechat、npm、babel-javascript、debugger for chrome、git lens、node debug 2、
可选:javascript (ES6) code snippets、reactjs code snippets、react-native/react/redux snippets for es6/es7、highlight bad chars、color highlight、Path Intellisense、partial diff

二、新建demo
1、VSCode编辑器中使用快捷键ctrl+`打开终端
2、在终端输入create-react-app demo,自动创建名称为demo的项目
3、cd demo进入demo项目中
4、yarn start或yarn build运行项目

三、react项目中使用echarts
1、终端输入命令yarn add echarts 引入echarts
2、在需要使用echarts的js文件中,引入echarts模块,具体有哪些可以按需引入的模块列表可查看demo->node_modules->echarts->index.js文件

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

四、快捷键
终端使用ctrl+c退出批处理操作

1、vscode-fileheader 
添加文件头 
2、reactjs code snippets 
react 开发的一些简写,提高开发效率 
3、Path Autocomplete 
路径提示功能 
4、git blame 
安装git后, git blame可以基于git去审查每一行的代码最近一次修改的作者

vsCode工具做react开发,几个常用插件的更多相关文章

  1. Sublime text 3搭建Python开发环境及常用插件安装 转载

    Sublime text 3搭建Python开发环境及常用插件安装 一.环境准备 1.官方网站地址 2.Windows 10 3.Sublime Text 3 + 官网购买license(Just a ...

  2. IOS开发中Xcode常用插件安装与管理(转)

    XCode中插件管理工具:Alcatraz    转自http://www.cocoachina.com/industry/20140506/8325.html 苹果现在的成绩得益于其始终如一的坚持. ...

  3. Sublime text 3搭建Python开发环境及常用插件安装

    参考  https://www.cnblogs.com/honkly/p/6599642.html 一.环境准备 1.官方网站地址 2.Windows 10 3.Sublime Text 3 + 官网 ...

  4. 【react开发】使用swiper插件,loop:true时产生的问题解决方案

    这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转.出现了一个问题: 就是向右滑动到该帧时的swiper,点击 ...

  5. 在mac下做web开发,shell常用的快捷键

    Ctrl + A 光标移动到行首 Ctrl + E 光标移动到行末 Ctrl + K 清屏(也可是用clear命令) Command +shift+{} 终端的tab左右切换

  6. VSCode安装go语言开发环境,go插件问题解决

    在安装go插件时,会自动更新很多依赖库文件,都是从Github更新下来,但是因为Github的文件中,多有应用go官网中的文件,导致,因为网络缘故,不能直接下载,导致安装失败,如下:   Instal ...

  7. 【maven】之开发pom配置常用插件

    1.打包跳过测试代码 <plugin>  <groupId>org.apache.maven.plugins</groupId>  <artifactId&g ...

  8. react开发vscode插件推荐

    原文地址:https://github.com/xieqingtian/blog/issues/2 由于本人主要是做react开发,用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记 ...

  9. React开发实时聊天招聘工具 -第一章

    第一章 课程道学 6个页面 弱化css Antd-mobile作为组件库 Redux 状态管理 React-Router 路由 Axios异步请求 后端Express框架 Socket.io 数据库: ...

随机推荐

  1. prometheus杂碎

    一个监控及告警的系统,内含一个TSDB(时序数据库).在我而言是一个数采程序 重要成员分三块 exploter:实际是外部接口,让各个程序实现这个接口,供普罗米修斯定时从此接口中取数 alert:告警 ...

  2. pip 安装出现超时问题的解决

    pip 安装出现超时问题的解决 我们在用默认的pip源进行安装python库时,会出现超时问题下载不了,如下图显示所示: 那么我们应该如何解决呢? 方法: 在自己电脑的  C:\Users\yanji ...

  3. zoj 3430 Detect the Virus(AC自己主动机)

    Detect the Virus Time Limit: 2 Seconds      Memory Limit: 65536 KB One day, Nobita found that his co ...

  4. java使用代理发post请求

    这东西啊,本身是无用的,但是要是移植就有用. package util; import java.util.Properties; public class HttpProxyConfiger { p ...

  5. .net IIS MVC Rest api 跨域 PUT DELETE 404 无法使用问题解决方案

    一.WebConfig配置法(system.webServer 重点是 httpProtocol handlers) http://www.jinxuliang.com/blog/article/re ...

  6. Postman-REST-Client_v0.8.1之chrome插件下载

    一.前言 安装chrome浏览器postman-rest-client插件,实现基于资源RestFul的http协议的GET.POST.DELETE.PUT等方式请求调用,具体安装使用步骤如下所示 二 ...

  7. js中文输入法字符串截断

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Dynamic attention in tensorflow

    新代码在contrib\seq2seq\python\ops\attention_decoder_fn.py 和之前代码相比 不再采用conv的方式来计算乘,直接使用乘法和linear 给出了两种at ...

  9. svn中status为missing的文件的处理方式

    svn中status为missing的文件在每次commit时都会出现在待提交的列表里,而且它的上级文件夹前面有个红色的点,有碍观瞻,处理方式也很简单: 1.在待提交的列表里,右击该文件->de ...

  10. C++ Msi函数判断应用是否已经安装

    #include <Windows.h> #include <Msi.h> #pragma comment(lib, "Msi.lib") bool Che ...