IntelliJ IDEA教程：使用JavaScript和?Node.js開發(fā)現(xiàn)代Web，移動(dòng)和桌面應(yīng)用程序

IntelliJ IDEA在業(yè)界被公認(rèn)為優(yōu)秀的Java開發(fā)平臺(tái)之一，本系列教程內(nèi)容為如何將IntelliJ IDEA與您喜歡的語言，平臺(tái)或框架結(jié)合使用。本期教程將為您介紹使用JavaScript和 Node.js開發(fā)現(xiàn)代Web，移動(dòng)和桌面應(yīng)用程序。趕快跟著小編一起來嘗試一下吧~

點(diǎn)擊下載IntelliJ IDEA最新試用版

溫馨提示：此功能僅在最終版（Ultimate）版本中受支持。

使用IntelliJ IDEA，您可以使用JavaScript和 Node.js開發(fā)現(xiàn)代Web，移動(dòng)和桌面應(yīng)用程序。

IntelliJ IDEA支持JavaScript和TypeScript編程語言， React和Angular框架，并提供與各種Web開發(fā)工具的緊密集成。

本次教程將為您介紹一個(gè)簡短的入門指南，它將引導(dǎo)您從創(chuàng)建Web應(yīng)用程序到調(diào)試和測試它。

創(chuàng)建新應(yīng)用程序

1. 選擇文件| 新的| 從主菜單中選擇項(xiàng)目，或單擊歡迎屏幕上的新建項(xiàng)目按鈕。

2. 在“ 項(xiàng)目類別和選項(xiàng)”對話框（“ 新建項(xiàng)目”向?qū)У牡谝豁摚┲校谧髠?cè)窗格中選擇“ 靜態(tài)Web ”。

3. 在右側(cè)窗格中，再次選擇Static Web，然后單擊Next。

4. 在向?qū)У牡诙撋希付?xiàng)目名稱以及將存儲(chǔ)項(xiàng)目相關(guān)文件的文件夾的路徑。單擊完成。

從現(xiàn)有的JavaScript應(yīng)用程序開始

如果要繼續(xù)開發(fā)現(xiàn)有的JavaScript應(yīng)用程序，請?jiān)?IntelliJ IDEA中打開它， 選擇要使用的JavaScript版本，并在其中配置庫。（可選）下載所需的npm依賴項(xiàng)。

打開計(jì)算機(jī)上已有的應(yīng)用程序源

單擊歡迎屏幕上的打開或選擇文件| 從主菜單打開。在打開的對話框中，選擇存儲(chǔ)源的文件夾。

從版本控制中檢出應(yīng)用程序源

1. 單擊“ 歡迎”屏幕上的“ 從版本控制中簽出”或選擇“ VCS” 從主菜單中查看版本控制。:

2. 從列表中選擇您的版本控制系統(tǒng)。

3. 在打開的特定于VCS的對話框中，鍵入您的憑據(jù)和存儲(chǔ)庫以檢出應(yīng)用程序源。

選擇JavaScript語言版本

要獲得可靠和有效的編碼幫助，您需要指定默認(rèn)情況下將在應(yīng)用程序的所有JavaScript文件中使用的語言版本。

1：在“ 設(shè)置/首選項(xiàng)”對話框（Ctrl+Alt+S）中，轉(zhuǎn)到“ 語言和框架”| JavaScript。在JavaScript頁面打開。

2：從列表中選擇一種受支持的JavaScript語言版本：

• ECMAScript 3

• ECMAScript 5.1

• JavaScript 1.8.5

• ECMAScript 6：此版本增加了對ECMAScript 2015-2017中引入的功能的支持以及對該標(biāo)準(zhǔn)的一些當(dāng)前提議。

• React JSX：此版本在ECMAScript 6之上添加了對JSX語法的支持

• Flow：此版本增加了對Flow語法的支持。

使用多個(gè)JavaScript版本

如果您正在使用同時(shí)使用ECMAScript 5.1和更新版本的ECMAScript，JSX或Flow的應(yīng)用程序，最簡單的方法是從JavaScript頁面上的列表中為整個(gè)項(xiàng)目選擇最高語言版本。例如，如果您使用ES5.1和JSX，請啟用JSX（因?yàn)樗荅S5.1和ES6的超集）。

為不同的文件夾配置不同的JavaScript語言版本

1. 在JavaScript頁面上，單擊JavaScript語言版本列表旁邊的“ JavaScript語言版本”對話框打開。

2. 單擊在打開的對話框中選擇您需要自定義語言版本的文件夾。IntelliJ IDEA將您返回到“ JavaScript語言版本”對話框，其中所選文件夾顯示在“ 路徑”字段中。

3. 從“ 語言”列表中，選擇所選文件夾中文件的語言版本。在項(xiàng)目中的所有其他JavaScript文件中，IntelliJ IDEA將使用在JavaScript頁面上選擇的版本。

下載npm依賴項(xiàng)

確保您的計(jì)算機(jī)上有Node.js.?如果您的應(yīng)用程序使用某些工具，庫或框架，請下載所需的軟件包。

在空項(xiàng)目中插入安裝包

在嵌入式終端（Alt+F12）中，鍵入：

npm install

如果您的項(xiàng)目中已有package.json文件

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

• 或者，npm install在終端（Alt+F12）中運(yùn)行。

為項(xiàng)目依賴項(xiàng)配置代碼完成

為了提供項(xiàng)目依賴項(xiàng)的代碼完成，IntelliJ IDEA會(huì)自動(dòng)創(chuàng)建一個(gè)node_modules庫。在IntelliJ IDEA中，庫是一個(gè)文件或一組文件，除IntelliJ IDEA從您編輯的項(xiàng)目代碼中檢索的函數(shù)和方法外，其功能和方法還添加到IntelliJ IDEA的內(nèi)部知識(shí)中。有關(guān)詳細(xì)信息和示例，請參閱配置JavaScript庫和代碼完成。

查看參數(shù)提示

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

配置參數(shù)提示

1. 在“ 設(shè)置/首選項(xiàng)”對話框（Ctrl+Alt+S）中，轉(zhuǎn)到“ 編輯器”| 一般| 外觀。將打開“ 外觀”頁面。

2. 單擊“ 顯示參數(shù)名稱提示”復(fù)選框旁邊的“ 配置”（默認(rèn)情況下選中該復(fù)選框）。

3. 在打開的“ 配置參數(shù)名稱提示”對話框中，選中“ 選項(xiàng)”區(qū)域中的“ 顯示所有參數(shù)的名稱”復(fù)選框。

4. 要隱藏所有類型值的參數(shù)提示，請清除“ 顯示參數(shù)名稱提示”復(fù)選框。了解更多從 參數(shù)信息。

JavaScript中的自動(dòng)導(dǎo)入

1. IntelliJ IDEA可以為模塊，類，組件以及導(dǎo)出的任何其他符號生成import語句。如果您在項(xiàng)目中使用ES6，則當(dāng)您完成ES6符號時(shí)，IntelliJ IDEA可以動(dòng)態(tài)添加缺少的導(dǎo)入語句。

   

2. 對于早期的JavaScript版本或完成時(shí)的wheauto-importrt被禁用，IntelliJ IDEA將該符號標(biāo)記為未解析并顯示工具提示

   
   

3. 按下時(shí)Alt+Enter，IntelliJ IDEA顯示建議的快速修復(fù)：

   
   

4. 如果有多個(gè)可能的導(dǎo)入源，IntelliJ IDEA會(huì)顯示一個(gè)建議列表：

   
   

在代碼完成時(shí)添加ES6 import語句

1. 在“ 設(shè)置/首選項(xiàng)”對話框（Ctrl+Alt+S）中，轉(zhuǎn)到“ 編輯器”| 一般| 自動(dòng)導(dǎo)入。將打開“ 自動(dòng)導(dǎo)入”頁面。

2. 在TypeScript / JavaScript區(qū)域中，選中“ ;在代碼完成時(shí)添加ES6導(dǎo)入”復(fù)選框。

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

配置語法突出顯示

在瀏覽器中運(yùn)行JavaScript 

1. 在編輯器中，使用JavaScript引用打開HTML文件。此HTML文件不一定必須是實(shí)現(xiàn)應(yīng)用程序起始頁面的HTML文件。

2. 執(zhí)行以下操作之一：

3. 選擇查看| 從主菜單中在瀏覽器中打開或按Alt+F2。然后從列表中選擇所需的瀏覽器。

4. 將鼠標(biāo)指針懸停在代碼上以顯示瀏覽器圖標(biāo)欄： 

5.  單擊指示所需瀏覽器的圖標(biāo)。

調(diào)試JavaScript 

• IntelliJ IDEA為適用于Chrome的客戶端JavaScript代碼提供內(nèi)置調(diào)試器。

• 您還可以在Firefox，版本36及更高版本中調(diào)試客戶端JavaScript。但是，強(qiáng)烈建議您使用Chrome或Chrome系列的任何其他瀏覽器。使用IntelliJ IDEA，您可以調(diào)試在內(nèi)置服務(wù)器，外部服務(wù)器或遠(yuǎn)程服務(wù)器上運(yùn)行的JavaScript應(yīng)用程序。

如果本篇教程對您有用的話，歡迎分享您的疑問和看法~

有想要了解IntelliJ IDEA正版授權(quán)信息的朋友可以。

有關(guān)產(chǎn)品資訊的更多精彩內(nèi)容，敬請關(guān)注下方的微信公眾號▼▼▼