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去审查每一行的代码最近一次修改的作者

原文地址:https://www.cnblogs.com/honeynm/p/10024872.html

时间: 2024-08-29 18:17:13

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

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

XCode中插件管理工具:Alcatraz   转自http://blog.csdn.net/liwei3gjob/article/details/44266943 1.全能搜索家CodePilot 2.0 你要找的是文件?是文件夹?是代码?Never Mind,CMD+SHIFT+X调出CodePilot,输入任何你想到搜的东西吧!想搜appFinishLaunchingWithOptions?忘记咋拼了?没关系强大的代码搜索能力,appflaun一样也可以找到!超级强大的正则匹配,匹配任何你

Sublime text 3配置Python3开发环境及常用插件安装

一.环境准备 1.官方网站地址 2.Windows 10 二.安装Sublime Text 3 1.双击下载的.exe文件安装,安装路径不要有中文目录 2.安装Sublime Text 3时,勾选"Add to explorer context menu",可以在文件右键菜单添加"Open with Sublime Text",方便使用Sublime Text打开文件. 三.配置Python环境 运行环境 1.打开Tools > Build System &g

做软件开发的同学常用软件列表

工欲善其事必先利其器,作为一名程序员,如何才能在最快的时间内完成大量的编码任务?目前借助于开发工具算是一条比较好走的捷径,使用软件工具可以为编码工作带来便利,缩短编码时间,是大多数程序员都在使用的技巧. 软件一 Beyond Compare Beyond Compare一款不可多得的专业级别的文件夹以及文件对比工具,使用它可以很方便的对比出两个文件夹或者文件的不同之处,并把相差的每一个字节用颜色加以表示,查看方便.软件支持源代码文件的对比.修改.合并,代码目录对比以及代码更新定位,是一款程序工程

用VScode 做web开发用到的插件

HTML + CSS用到的插件 Auto Rename Tag Beautify Chinese (Simplified) Lang ESLint HTML CSS Support HTML Snippets HTMLHint Open HTML in Default Broser Path Autocomplete vetur JAVASCRIPT用到的插件 javascript(ES6)code snipets quokka Bracket Pair Colorizer TODO Highl

前端开发 sublime text 常用插件和配置

前端开发sublimeconfig mac配置 此文件目录中文件主要是关于sublime的插件配置,快捷键配置,主题和字体配置. 插件列表 所有插件都可以使用Package Control安装,具体的安装方法可以自行谷歌安装,不在本文的介绍范围之内.也可以是使用git 手动安装. 1.autoprefixer 该插件主要使编写css更加的方便和快捷,可以配置快捷键给标签属性添加浏览器厂商前缀.安装前需要确定电脑安装node. 配置快捷键如下: //autoprefixer快捷键设置 { "key

Android Studio 开发利器【常用插件】

1.ADB Idea ADB操作快捷菜单,快速清除数据,重启应用,卸载应用等 快捷键: Windows: Ctrl+Alt+Shift+A Mac OSX: Ctrl+Shift+A 当然,你可以在KeyMap处修改为自己喜欢的按键. 2.postfix 支持Log,Toast,Logd的快速书写 3.AndroidCodeGenerator 可自动生成findViewById方法和ViewHolder方法 将鼠标放在页面设置的xml文件名上,调出generate菜单(mac cmd+N) cm

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

在安装go插件时,会自动更新很多依赖库文件,都是从Github更新下来,但是因为Github的文件中,多有应用go官网中的文件,导致,因为网络缘故,不能直接下载,导致安装失败,如下: Installing github.com/nsf/gocode SUCCEEDED   Installing github.com/uudashr/gopkgs/cmd/gopkgs SUCCEEDED   Installing github.com/ramya-rao-a/go-outline FAILED  

React开发和模块管理的主流工具——Webpack

webpack 前端模块管理和打包工具 原址:http://www.infoq.com/cn/articles/react-and-webpack CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS:而后者则是异步加载,通过requirejs等工具适用于前端.随着npm成为主流的JavaScript组件发布平台,越来越多的前端项目也依赖于npm上的项目,或者自身就会发布到npm平台.因此,让前端项目更方便的使用npm上的资源成为

Windows开发中一些常用的辅助工具

经常有人问如何快速的定位和解决问题,很多时候答案就是借助工具, 记录个人Windows开发中个人常用的一些辅助工具. (1) Spy++ 相信windows开发中应该没人不知道这个工具, 我们常用这个工具查看窗口层次,跟踪窗口消息. (2) WinSpy 一个窗口相关的小工具,非常有用,可以帮我们快速查看和修改窗口属性.(这个工具是开源的, 拿来学习挺不错的) (3) Process Explorer 非常有用的工具,类似任务管理器,但是比任务管理器强大的多. 可以让我们查看查看每个进程的详细信