vsCode工具做react開發,幾個常用插件


vsCode工具做react開發,幾個常用插件:https://www.cnblogs.com/honeynm/p/10024872.html

 

一、環境准備:
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去審查每一行的代碼最近一次修改的作者


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM