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文件

• 在編輯器或“ 項目”工具窗口中 右鍵單擊package.json文件，然后從上下文菜單中選擇“運行'npm install'。

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

為項目依賴項配置代碼完成

為了提供項目依賴項的代碼完成，IntelliJ IDEA會自動創建一個node_modules庫。在IntelliJ IDEA中，庫是一個文件或一組文件，除IntelliJ IDEA從您編輯的項目代碼中檢索的函數和方法外，其功能和方法還添加到IntelliJ IDEA的內部知識中。有關詳細信息和示例，請參閱配置JavaScript庫和代碼完成。

查看參數提示

參數提示顯示方法和函數中的參數名稱，以使代碼更易于閱讀。默認情況下，參數提示僅針對文字或函數表達式的值顯示，但不針對命名對象顯示。

配置參數提示

1. 在“ 設置/首選項”對話框（Ctrl+Alt+S）中，轉到“ 編輯器”| 一般| 外觀。將打開“ 外觀”頁面。

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語句

1. 在“ 設置/首選項”對話框（Ctrl+Alt+S）中，轉到“ 編輯器”| 一般| 自動導入。將打開“ 自動導入”頁面。

2. 在TypeScript / JavaScript區域中，選中“ 在代碼完成時添加ES6導入”復選框。

3. IntelliJ IDEA還可以為項目依賴項中定義的符號生成import語句。自動導入適用于包含TypeScript定義文件 （如在moment或redux中）或作為ES模塊編寫的源的包中的符號。

配置語法突出顯示

在瀏覽器中運行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正版授權信息的朋友可以。

有關產品資訊的更多精彩內容，敬請關注下方的微信公眾號▼▼▼