想要开发现代Web，移动和桌面应用程序，IntelliJ IDEA告诉你其实就这么容易！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/juejuexiaozhu/article/details/99682627

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

温馨提示：此功能仅在最终版（Ultimate）版本中受支持。

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

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

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

创建新应用程序

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

在“ 项目类别和选项”对话框（“ 新建项目”向导的第一页）中，在左侧窗格中选择“ 静态Web ”。

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

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

从现有的JavaScript应用程序开始

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

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

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

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

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

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

在打开的特定于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语言版本

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

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

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

下载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，移动和桌面应用程序

配置参数提示

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

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

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

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

JavaScript中的自动导入

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

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

按下时Alt+Enter，IntelliJ IDEA显示建议的快速修复：

如果有多个可能的导入源，IntelliJ IDEA会显示一个建议列表：

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

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

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

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

配置语法突出显示

在浏览器中运行JavaScript

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

执行以下操作之一：

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

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

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

调试JavaScript

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

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