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文件中定义的类的名称:

    

  所有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

    

原文地址:https://www.cnblogs.com/bjlhx/p/8968425.html

时间: 2024-10-12 15:18:24

003-代码补全,运行,调试的相关文章

Windows 10环境安装VIM代码补全插件YouCompleteMe

Windows 10环境安装VIM代码补全插件YouCompleteMe 折腾一周也没搞定Windows下安装VIM代码补全插件YouCompleteMe,今天在家折腾一天总算搞定了.关键问题是在于Python环境:必须确保环境变量Path里只有一个python.exe. ycmd是client-server架构.ycmd本身是server,可以为多种客户端所用,如VIM/YouComplete,emacs/emacs-ycmd等.服务端有不同引擎,如clang补全c-familiy语言,其他引

[jetbrains系列] 外链第三方库+代码补全设置

jetbrains系列的IDE真的是太好用了,有种相见恨晚的感觉. 在开发过程中第三方库是必不可少的,在开发的时候如果有一个可以补全的IDE可以节省查文档的时间. 举个例子:给pycharm配pyspark的环境变量,并且设置代码补全.最终结果应该是这样的: 首先配置的是第三方库的编译(解释)支持,在Run/Edit Configurations里.点+号添加一个新的配置. 在Configuration选项卡里找到Environment中的Environment variables,如下编辑:

vim--golang代码补全

我想说,我折腾了很久编辑器,试了九种办法 最后我只成功了一种 但我依然想就我混乱的逻辑做下整理 一.一开始,我试图入手ipad编码软件,大概9美金吧,叫Textastic.我试图用它的近亲来试验Textastic Mac Trial看看能否代码补全. 我安装了golang.tmbundle. 语法高亮和snips是有的.可惜没有补全. 二.我想,听说TextMate是Textastic Mac Trial的近亲,何不试试TextMate?于是下载安装 mkdir -p ~/Library/App

史上最强大的 Vim 代码补全引擎:YouCompleteMe

引言 自己之前Vim的代码补全插件都是使用 ctags + autotag + taglist + omnicppcompele 的组合,而且很多时候都没有提示或提示补全,而且每次打开一个新文件文件都需要创建一个 ctag 标签库,代码补全才能正能工作,十分的繁琐蛋疼.当时我就在想,既然源代码都有了,难道就没有一个 Vim 插件能的通过已有的源代码,实时构建语法书来提供代码补全提示吗?通过一番搜索,终于发现了她--YouCompleteMe,看了介绍,我开始迫不及待的试用了,顿时感觉从小米加步枪

Eclipse自动代码补全

Windows——>Preferences——>Java-->Editor-->Content Asist, 在Auto activation triggers for Java后面的文本框里只有一个“.”. 现在你将其改为“.abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ”即可. 然后你再试试,会发现,现在的补全功能跟VS差不多了.你还可以在Advanced和Favorite里进行高级的设置. 值得注意的是: 虽然这样实现

ADT中的代码补全设置

设置自动补全代码 刚刚学Android,有很多变量和方法 都不熟悉.需要有提示,才更加方便. 快捷方式:Alt + /    可以出现代码提示. 默认的只有输入“ .” 以后才会有代码补全提示,可作如下设置: 在Auto activation triggers for Java: 那一栏修改为“._abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ” 表示输入._abc等任何字符都会有代码补全提示. 在XML中也作如下设置: 加上“<=:_a

vim-一种简单易懂的django代码补全方式

既:Pydiction Pydiction 允许你在 Vim 中实现 TAB 代码补全, 可以补全的内容包括:标准的.自定义的,以及第三方模块和包.外加关键字.BIFs,和字符串. Pydiction主要由三个部分组成: python_pydiction.vim–该文件为 Vim 的 plugin 文件,实现 Python 文件的 TAB 补全功能 complete-dict–该文件为 Vim 的 dictionary 文件,其中包含 Python 关键字和模块结构等信息.是 plugin 进行

VisualGDB教程 代码补全

下载安装 使用代码补全 使用:

一款程序员的杀手级应用:TabNine代码补全工具

近日,一位来自加拿大的大四学霸,开发了一款"Deep TabNine"代码补全工具,实现了这一大胆的想法. 它支持23种编程语言.5种编辑器,使用简单,效果惊艳. 不少使用过的网友说:TabNine是他们用过的最好的代码补全工具,这是属于程序员的杀手级应用. 在VS Code的扩展商店里,TabNine已经被下载1.3万次,获得全5星好评. Deep TabNine支持Java\Python\C++\Haskell 除以上几种语言之外,Deep TabNine还支持Java.C.PHP

python代码补全工具Kite

Python 的代码补全工具 Kite,它可以帮助广大开发者在敲代码时,实时生成与上下文相关的代码片段. 这不仅大大提高了代码敲写效率,同时也让开发者能更轻松地完成更复杂.更多字符的代码语句.Python 之父 Guido van Rossum 用后,也非常喜爱这个功能,向大家强烈推荐了这一高效工具. 它的使用条件很简单,支持多种IDE和操作系统,并且免费使用. 下载地址:https://kite.com/download/ 支持Windows.Mac.Linux 支持Atom.PyCharm.