IntelliJ IDEA教程:使用JavaScript和 Node.js开发现代Web,移动和桌面应用程序

翻译|使用教程|编辑:吴园园|2019-08-02 09:45:39.370|阅读 437 次

概述:IntelliJ在业界被公认为优秀的Java开发平台之一,本系列教程内容为如何将IntelliJ IDEA与您喜欢的语言,平台或框架结合使用。本期教程将为您介绍使用JavaScript和 Node.js开发现代Web,移动和桌面应用程序。

相关链接:

IntelliJ IDEA在业界被公认为优秀的Java开发平台之一,本系列教程内容为如何将IntelliJ IDEA与您喜欢的语言,平台或框架结合使用。本期教程将为您介绍使用JavaScript和 Node.js开发现代Web,移动和桌面应用程序。赶快跟着小编一起来尝试一下吧~

点击下载IntelliJ IDEA最新试用版

温馨提示:此功能仅在最终版(Ultimate)版本中受支持

使用IntelliJ IDEA,您可以使用JavaScript和 Node.js开发现代Web,移动和桌面应用程序。

IntelliJ IDEA支持JavaScript和TypeScript编程语言, React和Angular框架,并提供与各种Web开发工具的紧密集成。

本次教程将为您介绍一个简短的入门指南,它将引导您从创建Web应用程序到调试和测试它。

创建新应用程序

  1. 选择文件| 新的| 从主菜单中选择项目,或单击欢迎屏幕上的新建项目按钮。

  2. 在“ 项目类别和选项”对话框(“ 新建项目”向导的第一页)中,在左侧窗格中选择“ 静态Web ”。

  3. 在右侧窗格中,再次选择Static Web,然后单击Next。

  4. 在向导的第二页上,指定项目名称以及将存储项目相关文件的文件夹的路径。单击完成。

从现有的JavaScript应用程序开始

如果要继续开发现有的JavaScript应用程序,请在IntelliJ IDEA中打开它, 选择要使用的JavaScript版本,并在其中配置库。(可选)下载所需的npm依赖项。

打开计算机上已有的应用程序源

单击欢迎屏幕上的打开或选择文件| 从主菜单打开。在打开的对话框中,选择存储源的文件夹。

从版本控制中检出应用程序源

  1. 单击“ 欢迎”屏幕上的“ 从版本控制中签出”或选择“ VCS” 从主菜单中查看版本控制。:

  2. 从列表中选择您的版本控制系统。

  3. 在打开的特定于VCS的对话框中,键入您的凭据和存储库以检出应用程序源。

选择JavaScript语言版本

要获得可靠和有效的编码帮助,您需要指定默认情况下将在应用程序的所有JavaScript文件中使用的语言版本。

1:在“ 设置/首选项”对话框(Ctrl+Alt+S)中,转到“ 语言和框架”| JavaScript。在JavaScript页面打开。

2:从列表中选择一种受支持的JavaScript语言版本:

  • ECMAScript 3

  • ECMAScript 5.1

  • JavaScript 1.8.5

  • ECMAScript 6:此版本增加了对ECMAScript 2015-2017中引入的功能的支持以及对该标准的一些当前提议。

  • React JSX:此版本在ECMAScript 6之上添加了对JSX语法的支持

  • Flow:此版本增加了对Flow语法的支持。

使用多个JavaScript版本

如果您正在使用同时使用ECMAScript 5.1和更新版本的ECMAScript,JSX或Flow的应用程序,最简单的方法是从JavaScript页面上的列表中为整个项目选择最高语言版本。例如,如果您使用ES5.1和JSX,请启用JSX(因为它是ES5.1和ES6的超集)。

为不同的文件夹配置不同的JavaScript语言版本

  1. 在JavaScript页面上,单击JavaScript语言版本列表旁边的“ JavaScript语言版本”对话框打开。

  2. 单击在打开的对话框中选择您需要自定义语言版本的文件夹。IntelliJ IDEA将您返回到“ JavaScript语言版本”对话框,其中所选文件夹显示在“ 路径”字段中。

  3. 从“ 语言”列表中,选择所选文件夹中文件的语言版本。在项目中的所有其他JavaScript文件中,IntelliJ IDEA将使用在JavaScript页面上选择的版本。

IntelliJ IDEA教程:使用JavaScript和 Node.js开发现代Web,移动和桌面应用程序

下载npm依赖项

确保您的计算机上有Node.js. 如果您的应用程序使用某些工具,库或框架,请下载所需的软件包。

在空项目中插入安装包

在嵌入式终端(Alt+F12)中,键入:

npm install

如果您的项目中已有package.json文件

  • 在编辑器或“ 项目”工具窗口中 右键单击package.json文件,然后从上下文菜单中选择“运行'npm install'。

  • 或者,npm install在终端(Alt+F12)中运行。

为项目依赖项配置代码完成

为了提供项目依赖项的代码完成,IntelliJ IDEA会自动创建一个node_modules库。在IntelliJ IDEA中,库是一个文件或一组文件,除IntelliJ IDEA从您编辑的项目代码中检索的函数和方法外,其功能和方法还添加到IntelliJ IDEA的内部知识中。有关详细信息和示例,请参阅配置JavaScript库和代码完成。

查看参数提示

参数提示显示方法和函数中的参数名称,以使代码更易于阅读。默认情况下,参数提示仅针对文字或函数表达式的值显示,但不针对命名对象显示。

IntelliJ IDEA教程:使用JavaScript和 Node.js开发现代Web,移动和桌面应用程序

配置参数提示

  1. 在“ 设置/首选项”对话框(Ctrl+Alt+S)中,转到“ 编辑器”| 一般| 外观。将打开“ 外观”页面。

  2. 单击“ 显示参数名称提示”复选框旁边的“ 配置”(默认情况下选中该复选框)。

  3. 在打开的“ 配置参数名称提示”对话框中,选中“ 选项”区域中的“ 显示所有参数的名称”复选框。

  4. 要隐藏所有类型值的参数提示,请清除“ 显示参数名称提示”复选框。了解更多从 参数信息。

JavaScript中的自动导入

  1. IntelliJ IDEA可以为模块,类,组件以及导出的任何其他符号生成import语句。如果您在项目中使用ES6,则当您完成ES6符号时,IntelliJ IDEA可以动态添加缺少的导入语句。

    IntelliJ IDEA教程:使用JavaScript和 Node.js开发现代Web,移动和桌面应用程序

  2. 对于早期的JavaScript版本或完成时的wheauto-importrt被禁用,IntelliJ IDEA将该符号标记为未解析并显示工具提示

    IntelliJ IDEA教程:使用JavaScript和 Node.js开发现代Web,移动和桌面应用程序

  3. 按下时Alt+Enter,IntelliJ IDEA显示建议的快速修复:

    IntelliJ IDEA教程:使用JavaScript和 Node.js开发现代Web,移动和桌面应用程序

  4. 如果有多个可能的导入源,IntelliJ IDEA会显示一个建议列表:

    IntelliJ IDEA教程:使用JavaScript和 Node.js开发现代Web,移动和桌面应用程序

在代码完成时添加ES6 import语句

  1. 在“ 设置/首选项”对话框(Ctrl+Alt+S)中,转到“ 编辑器”| 一般| 自动导入。将打开“ 自动导入”页面。

  2. 在TypeScript / JavaScript区域中,选中“ 在代码完成时添加ES6导入”复选框。

  3. IntelliJ IDEA还可以为项目依赖项中定义的符号生成import语句。自动导入适用于包含TypeScript定义文件 (如在moment或redux中)或作为ES模块编写的源的包中的符号。

IntelliJ IDEA教程:使用JavaScript和 Node.js开发现代Web,移动和桌面应用程序

配置语法突出显示

在浏览器中运行JavaScript 

  1. 在编辑器中,使用JavaScript引用打开HTML文件。此HTML文件不一定必须是实现应用程序起始页面的HTML文件。

  2. 执行以下操作之一:

  3. 选择查看| 从主菜单中在浏览器中打开或按Alt+F2。然后从列表中选择所需的浏览器。

  4. 将鼠标指针悬停在代码上以显示浏览器图标栏: 

  5.  单击指示所需浏览器的图标。

调试JavaScript 

  • IntelliJ IDEA为适用于Chrome的客户端JavaScript代码提供内置调试器。

  • 您还可以在Firefox,版本36及更高版本中调试客户端JavaScript。但是,强烈建议您使用Chrome或Chrome系列的任何其他浏览器。使用IntelliJ IDEA,您可以调试在内置服务器,外部服务器或远程服务器上运行的JavaScript应用程序。


如果本篇教程对您有用的话,欢迎分享您的疑问和看法~

有想要了解IntelliJ IDEA正版授权信息的朋友可以咨询慧都官方客服

有关产品资讯的更多精彩内容,敬请关注下方的微信公众号▼▼▼

图片2.jpg



标签:

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

文章转载自:IntelliJ IDEA https://www.jetbrains.com/help/idea/javascript-specific-guidelines.html

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

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