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

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页面上选择的版本。

下载npm依赖项

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

在空项目中插入安装包

在嵌入式终端（Alt+F12）中，键入：

npm install

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

• 或者，npm install在终端（Alt+F12）中运行。

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

查看参数提示

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

配置参数提示

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

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

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

JavaScript中的自动导入

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

   

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

   

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

   

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

   

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

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

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

配置语法突出显示

在浏览器中运行JavaScript 

2. 执行以下操作之一：

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

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

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

调试JavaScript 

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

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

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

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

标签：