003-代码补全,运行,调试
一、代码补全
IntelliJ IDEA为JavaScript代码中的React API和JSX提供代码补全。代码补全适用于React方法,特定于React的属性,HTML标记和组件名称,React事件,组件属性等。从React官方网站了解更多信息。
要获得React方法和React特定属性的代码完成,您需要在项目中的某处存在react.js库文件。通常库已经在你的node_modules文件夹中。
完成React方法,属性和事件 默认情况下,键入时会自动显示代码完成弹出窗口。例如:
在JSX标签中,IntelliJ IDEA为特定于React的属性(如className或classID)和非DOM属性提供编码帮助,如key或ref,此外,自动完成也适用于在项目的CSS文件中定义的类的名称:
![](https://images2018.cnblogs.com/blog/292888/201804/292888-20180428162052378-1403869717.png)
所有React事件(如onClick或onChange)也可以使用花括号(= {})自动完成:
代码补全也适用于大括号内的JavaScript表达式。这适用于您定义的所有方法和功能:
代码补全HTML标签和组件名称 IntelliJ IDEA为您在JavaScript中或其他组件内部的方法内定义的HTML标记和组件名称提供代码完成:
补全也适用于使用ES6样式语法的导入组件
补全组件属性 IntelliJ IDEA为使用propTypes定义的组件属性提供代码完成并解析它们,以便您可以快速跳转或预览其定义:
当您自动完成组件的名称时,IntelliJ IDEA将自动添加所有必需的属性。如果组件使用中缺少某些必需的属性,IntelliJ IDEA会提醒您。
二、将HTML属性传输给JSX
您使用类属性或事件处理程序复制一段HTML代码并将其粘贴到JSX中时,IntelliJ IDEA会自动用React特定的属性(className,onClick,onChange等)替换这些属性。
三、运行和调试React应用程序
开始构建新的React单页应用程序的建议方法是创建React应用程序。只有在这种情况下,您的开发环境才会预先配置为使用webpack和Babel。否则,您需要首先配置构建管道。
3.1、要运行React应用程序,请执行以下操作之一:
在npm tool window (View|tool window| npm)中,双击start任务【参看http://www.cnblogs.com/bjlhx/p/8967531.html】。感谢Webpack Hot Module Replacement,当开发服务器运行时,只要您更改任何源文件并保存更新,应用程序就会自动重新加载。
3.2、调试React应用程序
1》
等待应用程序编译完成并且Webpack开发服务器准备就绪。在http:// localhost:3000 /上打开浏览器查看应用程序。
复制正在运行应用程序的URL地址(默认情况下为http:// localhost:3000 /),创建调试配置时稍后需要此URL。
2》创建一个新的JavaScript调试配置:选择Run |编辑配置“,单击,然后从列表中选择”JavaScript Debuging“。在run/debug配置:JavaScript调试对话框中,将保存的URL(http:// localhost:3000 /)粘贴到URL字段中。保存配置。
3》在代码中设置断点并通过单击配置列表旁边的开始调试会话。
4》当命中第一个断点时,切换到调试工具窗口并照常进行:逐步执行程序,停止并恢复程序执行,在暂停时检查它,探索调用堆栈和变量,设置监视,评估变量,查看实际的HTML DOM等。
更多详细参看:http://www.jetbrains.com/help/idea/react.html#react_code_completion
相关文章
- 存储过程系列之调试存储过程 SQL Server 2005
- 使用UnityVS1.8.2搭配VS2013进行Unity3D代码调试(下载+安装+使用+问题解决)
- VS2008 ActiveX(ocx控件)的调试工具ActiveX Control Test Container安装说明
- 【华为云技术分享】使用pdb调试python代码的方法
- Python自带又好用的代码调试工具Pdb学习笔记
- Javascript之旅——第七站:说说js的调试
- JavaScript反调试代码
- 第一百二十三节,JavaScript错误处理与调试
- 用Visual Studio Code写Node和调试代码
- 如何调试Javascript代码
- 安卓动态调试七种武器之离别钩 – Hooking(下)
- MDK5.30下载来了,含镜像下载地址,ARM同时带来Cortex-M55调试展示(2020-05-05)
- webpack里JavaScript文件编译的调试
- occ-backend-base-url 的相关代码,如何调试?
- SAP Word template出了错误后的调试办法
- Atitit. Attilax软件研发and开发之道 1. 基本语言3 2. 标准化库api3 3. Ied与代码编写 调试3 4. ui3 5. 通讯3 6. 第三方库3 7. 数据
- Python语言学习:python语言代码调试—异常处理之详细攻略
- java 内存调试 mat
- 工欲善其事 之 Web 前端调试工具格式化混淆过的 JS 代码
- 60集Python入门视频PPT整理 | Python代码的测试、调试与探查
- 你妹都看得懂的手机网游制作教程(第21篇)游戏黑屏了,别急我们来调试代码
- 使用VS2022和WSL2开发和调试C++代码
- FPGA-RAM核的使用及调试
- Zigbee代码调试问题,hex乱问题?
- Cypress 本身启动过程的调试