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 数据库: ...
随机推荐
- prometheus杂碎
一个监控及告警的系统,内含一个TSDB(时序数据库).在我而言是一个数采程序 重要成员分三块 exploter:实际是外部接口,让各个程序实现这个接口,供普罗米修斯定时从此接口中取数 alert:告警 ...
- pip 安装出现超时问题的解决
pip 安装出现超时问题的解决 我们在用默认的pip源进行安装python库时,会出现超时问题下载不了,如下图显示所示: 那么我们应该如何解决呢? 方法: 在自己电脑的 C:\Users\yanji ...
- zoj 3430 Detect the Virus(AC自己主动机)
Detect the Virus Time Limit: 2 Seconds Memory Limit: 65536 KB One day, Nobita found that his co ...
- java使用代理发post请求
这东西啊,本身是无用的,但是要是移植就有用. package util; import java.util.Properties; public class HttpProxyConfiger { p ...
- .net IIS MVC Rest api 跨域 PUT DELETE 404 无法使用问题解决方案
一.WebConfig配置法(system.webServer 重点是 httpProtocol handlers) http://www.jinxuliang.com/blog/article/re ...
- Postman-REST-Client_v0.8.1之chrome插件下载
一.前言 安装chrome浏览器postman-rest-client插件,实现基于资源RestFul的http协议的GET.POST.DELETE.PUT等方式请求调用,具体安装使用步骤如下所示 二 ...
- js中文输入法字符串截断
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Dynamic attention in tensorflow
新代码在contrib\seq2seq\python\ops\attention_decoder_fn.py 和之前代码相比 不再采用conv的方式来计算乘,直接使用乘法和linear 给出了两种at ...
- svn中status为missing的文件的处理方式
svn中status为missing的文件在每次commit时都会出现在待提交的列表里,而且它的上级文件夹前面有个红色的点,有碍观瞻,处理方式也很简单: 1.在待提交的列表里,右击该文件->de ...
- C++ Msi函数判断应用是否已经安装
#include <Windows.h> #include <Msi.h> #pragma comment(lib, "Msi.lib") bool Che ...