Java开发平台IntelliJ IDEA教程:与React集成(下)

翻译|使用教程|编辑:吴园园|2019-10-12 11:10:39.550|阅读 311 次

概述:本系列教程内容为如何将IntelliJ IDEA与您喜欢的语言,平台或框架结合使用。IntelliJ IDEA与React集成在一起,可在配置,编辑,整理,运行,调试和维护应用程序方面提供帮助。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

IntelliJ IDEA是Java语言开发的集成环境,IntelliJ在业界被公认为优秀的Java开发工具之一,尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。

 IntelliJ IDEA现已更新至2019.2版本,新版本改进了java13预览等20余项功能,提高了开发效率,赶快下载体验吧~(点击查看更新详情)

点击下载IntelliJ IDEA最新试用版

**仅Ultimate Edition 支持此功能。

整理一个React应用程序

所有针对JavaScript和HTML 的IntelliJ IDEA内置代码检查都可以在JSX代码中使用。IntelliJ IDEA会在变量和函数未使用,缺少结束标记,缺少语句等情况下提醒您:

Java开发平台IntelliJ IDEA教程:与React集成(下)

对于某些检查,IntelliJ IDEA提供了快速修复,例如,建议添加缺少的方法。要查看快速修复弹出窗口,请按Alt+Enter。

要自定义检查清单,请打开 该 编辑器| IntelliJ IDEA设置的“ 检查”页面 Ctrl+Alt+S,并禁用您不想查看的检查或更改其严重性级别。

使用ESLint

除了提供内置的代码检查之外,IntelliJ IDEA还与linters集成在一起,例如用于JSX代码的ESLint。 ESLint带来了各种各样的整理规则,这些规则也可以通过插件进行扩展。键入时,IntelliJ IDEA会在编辑器中立即显示ESLint报告的警告和错误。借助ESLint,您还可以使用JavaScript标准样式。

为了让ESLint正确理解React JSX语法,您需要eslint-plugin-react。使用此插件,例如,当未为React组件设置显示名称或使用了某些危险的JSX属性时,系统会警告您:

Java开发平台IntelliJ IDEA教程:与React集成(下)

如果您使用create-react-app创建了应用程序,则您的开发环境已经预先配置为使用ESLint。

在IntelliJ IDEA中开始使用ESLint

  1. 在内置终端(视图|工具窗口|终端)中,键入npm install --save-dev eslint 和npm install --save-dev eslint-plugin-react。

  2. 将ESLint配置文件.eslintrc添加到您的项目。

  3. 在“ 设置/首选项”对话框(Ctrl+Alt+S)中,转到“ 语言和框架” | JavaScript | 代码质量工具| ESLint。在打开的ESLint页面上,选择自动ESLint配置。IntelliJ IDEA会自动在项目的node_modules文件夹中找到ESLint ,然后默认使用.eslintrc配置。

您还可以手动配置ESLint以使用自定义ESLint软件包和配置。

Java开发平台IntelliJ IDEA教程:与React集成(下)

.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

下面是重命名仅在一个文件中定义和使用的组件的示例:

1570847565.gif

以相同的方式,您可以重命名在一个文件中定义的组件,然后使用命名的export导入到另一个文件:

1570847670.gif

提取JSX代码

您可以通过从现有组件的render方法中提取JSX代码来创建新的React组件。

1、选择要提取的代码,然后选择“ 重构”。从主菜单或上下文菜单中提取| Component。

2、命名组件。

3、选择类如果要定义组件作为一个类或函数,如果你想创建一个功能组件。

4、单击确定。新组件将在现有组件的旁边定义并在其中使用。

1570847946.gif

5、可选:使用“ 移动符号”重构 将新组件和所有必需的导入移动到单独的文件中。

要修改IntelliJ IDEA用于新组件的代码模板, 在设置/首选项对话框(Ctrl+Alt+S)中,转到编辑器| 文件和代码模板,然后打开代码选项卡。

解构的应用做出反应

通过解构,您可以轻松地将数组和对象中的值分解为变量。此功能具有非常简洁的语法,通常在需要在应用程序中传递数据时使用。

在IntelliJ IDEA中,您可以使用专用的重构,意图操作或快速修复,简化从数组或对象中获取多个值的代码片段。在使用React类组件时,请考虑使用Introduce对象或数组销毁意图动作。

1570848238.gif

运行和调试应用程序做出反应

建议开始构建新的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。

1570848540.png

5、创建一个新的JavaScript调试配置:选择Run | 编辑配置,单击添加图标,然后从列表中选择JavaScript调试。在“ 运行/调试配置:JavaScript调试”对话框中,将保存的URL http:// localhost:3000 /粘贴 到URL字段中。保存配置。

6、通过调试按钮在配置列表旁边单击,在代码中设置断点并启动调试会话 。

7、当遇到第一个断点时,切换到“ 调试工具”窗口,然后照常进行: 逐步执行程序, 停止并继续执行程序, 在挂起时对其进行检查,浏览调用堆栈和变量,设置监视,评估变量, 查看实际HTML DOM等等。

1570848768.png

构建应用程序做出反应

如果在现有的IntelliJ IDEA项目中安装了React,则需要设置构建过程 。

如果您使用create-react-app创建应用程序,则 您的开发环境已经预先配置为使用Webpack和Babel。

测试应用程序做出反应

您可以在使用create-react-app创建的React应用程序中 运行和调试Jest测试。在开始之前,请确保将react-scripts包添加到package.json的 依赖项对象中。 

您可以通过运行/调试配置来运行和调试Jest测试,或者直接在编辑器中或在“ 项目”工具窗口中运行Jest测试。

要创建一个Jest运行/调试配置

1、打开“ 运行/调试配置”对话框(主菜单上的“运行” |“编辑配置 ”),添加按钮在左侧窗格中单击,然后从列表中选择“ 笑话 ”。将打开“ 运行/调试配置:Jest”对话框。

或者,在“ 项目”工具窗口中选择一个测试文件,然后从上下文菜单中选择“ 创建

2、指定要使用的节点解释器以及 应用程序的工作目录。默认情况下,工作目录字段显示项目根文件夹。要更改此预定义设置,请指定所需文件夹的路径,或从列表中选择以前使用的文件夹。

3、在“ Jest包”字段中,指定react-scripts包的路径。

4、在“ Jest选项”字段中,输入--env=jsdom。

1570849072.png


运行测试

1、从主工具栏上的列表中选择Jest运行/调试配置,然后单击覆盖范围内运行 。

2、测试服务器将自动启动,而无需您采取任何步骤。在“ 运行工具”窗口中查看和分析来自测试服务器的消息。

3、在 “ 运行” 工具窗口的“ 测试运行器”选项卡中监视测试执行。

调试测试

1、从主工具栏上的列表中选择Jest运行/调试配置,然后单击调试按钮

2、在打开的“ 调试工具”窗口中,照常进行: 逐步执行测试, 停止并继续执行 测试,在挂起时检查测试,依此类推。

已知限制

首次在调试会话期间打开应用程序时,可能会发生以下情况:页面加载时执行的代码中的某些断点未命中。原因是要在原始源代码中的断点处停止,IntelliJ IDEA需要从浏览器获取源映射。但是,浏览器只能在页面完全加载至少一次之后才能传递这些源映射。解决方法是,自己在浏览器中重新加载页面。

=====================================================

IntelliJ IDEA示例/使用教程/视频资源合集,请点击此处查看

想要了解或购买IntelliJ IDEA正版授权的朋友,欢迎咨询慧都官方客服

关注下方微信公众号,及时获取产品最新消息和最新资讯

图片2.jpg



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:IntelliJ IDEA

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
IntelliJ IDEA

IntelliJ在业界被公认为优秀的Java开发平台之一,在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面表现突出,并支持基于Android平台的程序开发。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat