vsCode工具做react开发,几个常用插件
一、环境准备:
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开发,几个常用插件的更多相关文章
- Sublime text 3搭建Python开发环境及常用插件安装 转载
Sublime text 3搭建Python开发环境及常用插件安装 一.环境准备 1.官方网站地址 2.Windows 10 3.Sublime Text 3 + 官网购买license(Just a ...
- IOS开发中Xcode常用插件安装与管理(转)
XCode中插件管理工具:Alcatraz 转自http://www.cocoachina.com/industry/20140506/8325.html 苹果现在的成绩得益于其始终如一的坚持. ...
- Sublime text 3搭建Python开发环境及常用插件安装
参考 https://www.cnblogs.com/honkly/p/6599642.html 一.环境准备 1.官方网站地址 2.Windows 10 3.Sublime Text 3 + 官网 ...
- 【react开发】使用swiper插件,loop:true时产生的问题解决方案
这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转.出现了一个问题: 就是向右滑动到该帧时的swiper,点击 ...
- 在mac下做web开发,shell常用的快捷键
Ctrl + A 光标移动到行首 Ctrl + E 光标移动到行末 Ctrl + K 清屏(也可是用clear命令) Command +shift+{} 终端的tab左右切换
- VSCode安装go语言开发环境,go插件问题解决
在安装go插件时,会自动更新很多依赖库文件,都是从Github更新下来,但是因为Github的文件中,多有应用go官网中的文件,导致,因为网络缘故,不能直接下载,导致安装失败,如下: Instal ...
- 【maven】之开发pom配置常用插件
1.打包跳过测试代码 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId&g ...
- react开发vscode插件推荐
原文地址:https://github.com/xieqingtian/blog/issues/2 由于本人主要是做react开发,用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记 ...
- React开发实时聊天招聘工具 -第一章
第一章 课程道学 6个页面 弱化css Antd-mobile作为组件库 Redux 状态管理 React-Router 路由 Axios异步请求 后端Express框架 Socket.io 数据库: ...
随机推荐
- JVM系列——从菜鸟到入门
持续更新系列. 参考自<深入理解Java虚拟机>.<Java性能权威指南>.<分布式Java应用基础与实践>. Java的内存结构 JVM系列——运行时数据区 JV ...
- AOP 技术原理——代理模式全面总结
前言 非常重要的一个设计模式,也很常见,很多框架都有它的影子.定义就不多说了.两点: 1.为其它对象提供一个代理服务,间接控制对这个对象的访问,联想 Spring 事务机制,在合适的方法上加个 tra ...
- java面试中被问到的问题
技术面 1) Spring 的注解有哪些? 2) 你如何理解 spring IOC 技术,如果不使用spring,你有哪些方式来加载 bean? 3) spring aop 的原理是什么?它是怎样一 ...
- 复制id_rsa命令
pbcopy < ~/.ssh/id_rsa.pub https://aliasan-conf.taijiankong.cn/duotai/2T7b253i8.pac
- VS2017 编译Assimp
1. 下载Assimp:http://assimp.sourceforge.net/ 2. 要下载和安装DirectX SDK 安装出现错误,错误代码s1023,解决方法:https://blog.c ...
- B - Assignment
Tom owns a company and he is the boss. There are n staffs which are numbered from 1 to n in this com ...
- vue里的v-show和v-if
v-show:false 对应的是display:none:不移除dom元素.对网页渲染性能更好,适应于频繁的操作该dom的显示隐藏. v-if: false 对应 ...
- Spring-Boot之Redis基础
Spring-Boot之Redis基础 准备 Redis下载地址:github.com/MSOpenTech/redis/releases Redis数据库的默认端口号是 6379 开启Redis服务 ...
- python全栈开发 * 36知识点汇总 * 180721
36 操作系统的发展史 进程一.手工操作--穿孔卡片 1.内容: 程序员将对应于程序和数据的已穿孔的纸带(或卡片)装入输入机,然后启动输入机把程序和数据输入计算机内存,接着通过控制 台开关启动程序针对 ...
- stm32f769ni-discovery编译例程需要修改
找不到cmsis_os.h: 方法:在pack文件夹下找cmsis_os.h文件,有四个,选RTOS2文件夹下的. 原因:cmsis_os2.h是新版本,cmsis_os.h封装了cmsis_os2. ...