IntelliJ IDEA是Java语言开发的集成环境，IntelliJ在业界被公认为优秀的Java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。
IntelliJ IDEA现已更新至2019.2版本，新版本改进了java13预览等20余项功能，提高了开发效率，赶快下载体验吧~（点击查看更新详情）
IntelliJ IDEA最新试用版
-
Java开发平台IntelliJ IDEA教程：与React集成（上）
-
Java开发平台IntelliJ IDEA教程：与React集成（中）
**仅Ultimate Edition 支持此功能。
整理一个React应用程序
所有针对JavaScript和HTML 的IntelliJ IDEA内置代码检查都可以在JSX代码中使用。IntelliJ IDEA会在变量和函数未使用，缺少结束标记，缺少语句等情况下提醒您：
对于某些检查，IntelliJ IDEA提供了快速修复，例如，建议添加缺少的方法。要查看快速修复弹出窗口，请按Alt+Enter。
使用ESLint
为了让ESLint正确理解React JSX语法，您需要eslint-plugin-react。使用此插件，例如，当未为React组件设置显示名称或使用了某些危险的JSX属性时，系统会警告您：
如果您使用create-react-app创建了应用程序，则您的开发环境已经预先配置为使用ESLint。
在IntelliJ IDEA中开始使用ESLint
-
在内置终端（视图|工具窗口|终端）中，键入npm install –save-dev eslint 和npm install –save-dev eslint-plugin-react。
-
将ESLint配置文件.eslintrc添加到您的项目。
-
在“ 设置/首选项”对话框（Ctrl+Alt+S）中，转到“ 语言和框架” | JavaScript | 代码质量工具| ESLint。在打开的ESLint页面上，选择自动ESLint配置。IntelliJ IDEA会自动在项目的node_modules文件夹中找到ESLint ，然后默认使用.eslintrc配置。
您还可以手动配置ESLint以使用自定义ESLint软件包和配置。
.eslintrc结构示例（带有react插件的ESLint 1.x）
-
在ecmaFeatures对象中，添加”jsx” = true。您还可以在此处指定要使用的其他语言功能，例如ES6类，模块等。
-
在plugins对象中，添加react。
-
在该rules对象中，您可以列出 要启用的ESLint内置规则以及可通过react plugin可用的规则。
{ "parser": "babel-eslint", "env": { "browser": true }, "ecmaFeatures": { "jsx": true }, "plugins": [ "react" ], "rules": { "semi": 2 }}
重构一个作出反应的应用
除了常见的IntelliJ IDEA重构之外，在React应用程序中，您还可以为React组件运行Rename并使用Extract Component 创建新组件。
重命名组件
将插入 放置在组件名称中，然后按 Shift+F6
下面是重命名仅在一个文件中定义和使用的组件的示例：
以相同的方式，您可以重命名在一个文件中定义的组件，然后使用命名的export导入到另一个文件：
提取JSX代码
您可以通过从现有组件的render方法中提取JSX代码来创建新的React组件。
1、选择要提取的代码，然后选择“ 重构”。从主菜单或上下文菜单中提取| Component。
2、命名组件。
3、选择类如果要定义组件作为一个类或函数，如果你想创建一个功能组件。
4、单击确定。新组件将在现有组件的旁边定义并在其中使用。
5、可选：使用“ 移动符 ”重构 将新组件和所有必需的导入移动到单独的文件中。
解构的应用做出反应
通过解构，您可以轻松地将数组和对象中的值分解为变量。此功能具有非常简洁的语法，通常在需要在应用程序中传递数据时使用。
在IntelliJ IDEA中，您可以使用专用的重构，意图操作或快速修复，简化从数组或对象中获取多个值的代码片段。在使用React类组件时，请考虑使用Introduce对象或数组销毁意图动作。
运行和调试应用程序做出反应
建议开始构建新的React单页应用程序的方法是Create React App。仅在这种情况下，您的开发环境才被预先配置为使用webpack和Babel。否则，您需要首先配置构建管道。
要运行一个应用程序做出反应
仅适用于使用创建的应用程序create-react-app。
在npm工具窗口（“ 视图” |“工具窗口” |“ npm”）中，双击start任务。
WebPack热模块的更换，开发服务器运行时，应用程序就会自动为你改变任何的源文件并保存更新重新加载。
要调试应用程序做出反应
仅适用于使用创建的应用程序create-react-app。
1、双击npm工具窗口中的启动任务 ，以开发模式启动应用程序。
2、等待应用程序被编译并且Webpack开发服务器准备就绪。在http：// localhost：3000 /中打开浏览器 以查看该应用程序。
3、复制运行应用程序的URL地址（默认情况下为http：// localhost：3000 /），以后在创建调试配置时将需要此URL。
，然后从列表中选择JavaScript调试。在“ 运行/调试配置：JavaScript调试”对话框中，将保存的URL http：// localhost：3000 /粘贴 到URL字段中。保存配置。
6、通过
在配置列表旁边单击，在代码中设置断点并启动调试会话 。
7、当遇到第一个断点时，切换到“ 调试工具”窗口，然后照常进行： 逐步执行程序， 停止并继续执行程序， 在挂起时对其进行检查，浏览调用堆栈和变量，设置监视，评估变量， 查看实际HTML DOM等等。
构建应用程序做出反应
如果在现有的IntelliJ IDEA项目中安装了React，则需要设置构建过程 。
如果您使用create-react-app创建应用程序，则 您的开发环境已经预先配置为使用Webpack和Babel。
测试应用程序做出反应
您可以在使用create-react-app创建的React应用程序中 运行和调试Jest测试。在开始之前，请确保将react-scripts包添加到package.json的 依赖项对象中。
要创建一个Jest运行/调试配置
在左侧窗格中单击，然后从列表中选择“ 笑话 ”。将打开“ 运行/调试配置：Jest”对话框。
或者，在“ 项目”工具窗口中选择一个测试文件，然后从上下文菜单中选择“ 创建
2、指定要使用的节点解释器以及 应用程序的工作目录。默认情况下，工作目录字段显示项目根文件夹。要更改此预定义设置，请指定所需文件夹的路径，或从列表中选择以前使用的文件夹。
3、在“ Jest包”字段中，指定react-scripts包的路径。
4、在“ Jest选项”字段中，输入–env=jsdom。
运行测试
1、从主工具栏上的列表中选择Jest运行/调试配置，然后单击
。
2、测试服务器将自动启动，而无需您采取任何步骤。在“ 运行工具”窗口中查看和分析来自测试服务器的消息。
3、在 “ 运行” 工具窗口的“ 测试运行器”选项卡中监视测试执行。
调试测试
1、从主工具栏上的列表中选择Jest运行/调试配置，然后单击
。
2、在打开的“ 调试工具”窗口中，照常进行： 逐步执行测试， 停止并继续执行 测试，在挂起时检查测试，依此类推。
已知限制
首次在调试会话期间打开应用程序时，可能会发生以下情况：页面加载时执行的代码中的某些断点未命中。原因是要在原始源代码中的断点处停止，IntelliJ IDEA需要从浏览器获取源映射。但是，浏览器只能在页面完全加载至少一次之后才能传递这些源映射。解决方法是，自己在浏览器中重新加载页面。
=====================================================
IntelliJ IDEA示例/使用教程/视频资源合集，请点击此处查看
想要了解或购买IntelliJ IDEA正版授权的朋友，欢迎咨询官方客服
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！