一、环境准备:
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. 学习:ups电池放电时间是怎么计算的?

    例如现有20KVA的UPS一台,负载功率为8000W,电池节数为64节,容量为32AH,电池电压为12V,那么UPS电源的放电时间计算方法如下: 负载功率*放电时长=电池放电量*电池电压*逆变率 80 ...

  2. [转]理解Go语言中的nil

    最近在油管上面看了一个视频:Understanding nil,挺有意思,这篇文章就对视频做一个归纳总结,代码示例都是来自于视频. nil是什么 相信写过Golang的程序员对下面一段代码是非常非常熟 ...

  3. java 爬取 国税局 省市区级联关系

    爬取网址 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2018/index.html 因为数据比较大,存储为一个json,会内存溢出. 所以按照每 ...

  4. Houdini技术体系 基础管线(四) :Houdini驱动的UE4植被系统 上篇

    背景 之前在<Houdini技术体系 过程化地形系统(一):Far Cry5的植被系统分析>一文中已经对AAA游戏中过程化植被的需求有了一定的定义,后续工作就是如何用Houdini开发功能 ...

  5. 我对CopyOnWrite的思考

    CopyOnWrite 后文中表述为 COW CopyOnWrite容器即写的时候复制一个新的容器进行写:通俗的理解是当我们往一个容器添加元素的时候,不直接往当前容器添加,而是先将当前容器进行Copy ...

  6. CSS外边距属性,深入理解margin

    margin See the Pen margin by wmui (@wmui) on CodePen. 该属性用于设置元素的外边距,外边距是透明的,默认值0.这是一个简写属性,属性值最多为4个,例 ...

  7. 【目录】Docker 基本操作

    1 容器基本操作 : https://www.cnblogs.com/defineconst/p/9990611.html 2 容器启动退出 : https://www.cnblogs.com/def ...

  8. c++ 模板相关

    https://blog.csdn.net/lezardfu/article/details/60466161 https://www.cnblogs.com/ymy124/p/3632634.htm ...

  9. lamda表达式和stream

    stream主要用于处理数据,看一下jdk的文档,并且主要处理集合对象: int sum = widgets.stream() .filter(w -> w.getColor() == RED) ...

  10. 怎么才能使服务器Nginx(或者Apache)支持字体文件

    为了在前端正确地显示字体,浏览器必须使用正确的http header来接受字体文件.如果服务器没有设置要求的头信息,那么有些浏览器就会在控制台报错或者直接不能显示. 可能你的服务器已经配置好了,你无须 ...