IntelliJ IDEA使用之JavaScript

JavaScript

使用IntelliJ IDEA，您可以使用JavaScript和Node.js開發(fā)現(xiàn)代Web，移動和桌面應(yīng)用程序。IntelliJ IDEA支持JavaScript和TypeScript編程語言， React和Angular框架，并提供與各種Web開發(fā)工具的緊密集成。

在此頁面上，您將找到一個簡短的入門指南，它將引導(dǎo)您逐步創(chuàng)建Web應(yīng)用程序，以及調(diào)試和測試它。

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

1. 在主菜單上選擇：文件|新建|項目（File | New | Project），或單擊歡迎屏幕上的“新建項目”按鈕。
2. 在“項目類別和選項”對話框（“新建項目”向?qū)У牡谝豁摚┲校谧髠?cè)窗格中選擇“靜態(tài)Web”。
3. 在右側(cè)窗格中，再次選擇“靜態(tài)Web”，然后單擊“下一步”。
4. 在向?qū)У牡诙撋希付椖棵Q以及將存儲項目相關(guān)文件的文件夾的路徑。單擊“完成”。

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

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

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

• 單擊歡迎屏幕上的“打開”，或在主菜單上選擇：文件|打開（File | Open）。在打開的對話框中，選擇存儲源的文件夾。

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

1. 單擊“歡迎”屏幕上的“從版本控制中簽出”，或從主菜單上選擇：VCS|從版本控制中簽出。
2. 從列表中選擇您的版本控制系統(tǒng)。
3. 在打開的特定于VCS的對話框中，鍵入您的憑據(jù)和存儲庫以檢出應(yīng)用程序源。

選擇JavaScript語言版本

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

1. 在“設(shè)置/首選項”對話框（Ctrl+Alt+S）中，選擇“ 語言和框架”下的“ 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語法的支持。

使用多個JavaScript版本

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

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

1. 在JavaScript頁面上，單擊JavaScript語言版本下拉列表旁邊的 。將打開“JavaScript語言版本”對話框。
2. 單擊 ，并在打開的對話框中選擇您需要自定義語言版本的文件夾。IntelliJ IDEA將返回“JavaScript語言版本”對話框，其中所選文件夾顯示在“Path”字段中。
3. 從“語言”下拉列表中，選擇所選文件夾中文件的語言版本。在項目中的所有其他JavaScript文件中，IntelliJ IDEA將使用在JavaScript頁面上選擇的版本。
   
   

下載npm依賴項

在開始之前，安裝Node.js。如果您的應(yīng)用程序使用某些工具，庫或框架，請下載所需的軟件包。

在空項目中安裝包：

• 打開嵌入式終端（查看|工具窗口|終端（View | Tool Windows | Terminal），或Alt+F12）并在命令提示符下鍵入：

  npm install <package name>

如果項目中已有package.json文件：

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

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

為了為項目依賴項提供代碼完成，IntelliJ IDEA自動創(chuàng)建了一個node_modules庫。在IntelliJ IDEA中，一個庫是一個文件或一組文件，它的函數(shù)和方法被添加到IntelliJ IDEA的內(nèi)部知識中，以及IntelliJ IDEA從您編輯的項目代碼中檢索到的函數(shù)和方法。有關(guān)詳細信息和示例，請參閱：配置JavaScript庫。

在JavaScript中自動導(dǎo)入

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

對于早期的JavaScript版本或禁用完成時自動導(dǎo)入，IntelliJ IDEA會將符號標(biāo)記為未解析并顯示工具提示：

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

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

1. 在“設(shè)置/首選項”對話框（Ctrl+Alt+S）中，單擊“編輯器”下的“常規(guī)” ，然后單擊“自動導(dǎo)入”。將打開“自動導(dǎo)入”頁面。
2. 在TypeScript/JavaScript區(qū)域中，選中“在代碼完成時添加ES6導(dǎo)入”復(fù)選框。

在瀏覽器中運行JavaScript

1. 在編輯器中，使用JavaScript引用打開HTML文件。此HTML文件不一定必須是實現(xiàn)應(yīng)用程序起始頁面的文件。
2. 執(zhí)行以下操作之一：
   • 在主菜單上選擇：查看|在瀏覽器中打開，或按Alt+F2。然后從彈出菜單中選擇所需的瀏覽器。
   • 將鼠標(biāo)指針懸停在代碼上以顯示瀏覽器圖標(biāo)欄：   ，單擊指示所需瀏覽器的圖標(biāo)。

調(diào)試JavaScript

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

您還可以在Firefox 36及更高版本的Firefox中調(diào)試客戶端JavaScript。但是，強烈建議您使用Chrome或Chrome系列的任何其他瀏覽器。使用IntelliJ IDEA，您可以調(diào)試在內(nèi)置服務(wù)器，外部服務(wù)器或遠程服務(wù)器上運行的JavaScript應(yīng)用程序。有關(guān)詳細信息，請參閱：在Chrome中調(diào)試JavaScript，和：在Firefox中調(diào)試JavaScript。