IntelliJ IDEA：配置JavaScript庫(kù)

配置JavaScript庫(kù)

在IntelliJ IDEA中，庫(kù)是一個(gè)文件或一組文件，除IntelliJ IDEA從您編輯的項(xiàng)目代碼中檢索的函數(shù)和方法外，其功能和方法也添加到IntelliJ IDEA的內(nèi)部知識(shí)中。在項(xiàng)目范圍內(nèi)，默認(rèn)情況下其庫(kù)是寫(xiě)保護(hù)的。

IntelliJ IDEA僅使用庫(kù)來(lái)增強(qiáng)編碼幫助（即代碼完成，語(yǔ)法突出顯示，導(dǎo)航和文檔查找）。請(qǐng)注意，庫(kù)不是管理項(xiàng)目依賴(lài)項(xiàng)的方法。

使用TypeScript社區(qū)存根（TypeScript定義文件）

在IntelliJ IDEA中，可以配置DefinitelyTyped存根并將其用作庫(kù)，這在以下情況下特別有用：

提示：TypeScript社區(qū)存根也稱(chēng)為T(mén)ypeScript定義文件，TypeScript聲明文件或DefinitelyTyped存根，或僅稱(chēng)為d.ts文件。

• 要改進(jìn)代碼完成，請(qǐng)解析對(duì)于IntelliJ IDEA靜態(tài)分析而言過(guò)于復(fù)雜的庫(kù)或框架的符號(hào)，并為這些符號(hào)添加類(lèi)型信息。
• 從測(cè)試框架中解析全局定義的符號(hào)。

下面的示例顯示了Node Express應(yīng)用程序中的一段代碼，其中未解析該post()函數(shù)：

安裝了建議的TypeScript定義文件后，IntelliJ IDEA成功解析post()：

IntelliJ IDEA允許您直接從編輯器下載TypeScript定義文件，使用意圖操作，或者您可以在JavaScript. Libraries頁(yè)面上執(zhí)行此操作。

使用意圖操作下載TypeScript定義

• 將光標(biāo)放在具有此庫(kù)或框架的require語(yǔ)句處，按Alt+Enter，然后選擇安裝TypeScript定義以獲取更好的類(lèi)型信息：
  
  
  IntelliJ IDEA下載庫(kù)的類(lèi)型定義，并將它們添加到JavaScript. Libraries頁(yè)面上的庫(kù)列表中：
  
  

在“設(shè)置/首選項(xiàng)”對(duì)話(huà)框中下載TypeScript定義

1. 在“設(shè)置/首選項(xiàng)”對(duì)話(huà)框（Ctrl+Alt+S）中，單擊“語(yǔ)言和框架”下的“JavaScript” ，然后單擊“庫(kù)”。在JavaScript的。將打開(kāi)“庫(kù)”頁(yè)面。
2. 單擊“下載”，在打開(kāi)的“下載庫(kù)”對(duì)話(huà)框中，選擇所需的庫(kù)，然后單擊“下載并安裝”。
   
   
   IntelliJ IDEA下載所選庫(kù)的類(lèi)型定義，并在“項(xiàng)目”視圖的“外部庫(kù)”節(jié)點(diǎn)中顯示它們。

配置Node.js核心庫(kù)

要獲得編譯為Node.js二進(jìn)制文件的fs， path， http和其他核心模塊的代碼完成和參考解析，您需要將Node.js核心模塊源配置為JavaScript庫(kù)。

配置Node.js Core

1. 在“設(shè)置/首選項(xiàng)”對(duì)話(huà)框（Ctrl+Alt+S）中，單擊“語(yǔ)言和框架”下的“Node.js和NPM” 。將打開(kāi)該“Node.js和NPM”頁(yè)面。
2. 選中Node.js的編碼輔助復(fù)選框。

   請(qǐng)注意，Node.js核心庫(kù)是特定于版本的。因此，如果您在“Node.js和NPM”頁(yè)面上更改Node.js的版本，則需要再次選中該復(fù)選框。之后，IntelliJ IDEA為這個(gè)新版本創(chuàng)建了一個(gè)新庫(kù)。

配置node_modules庫(kù)

為了提供項(xiàng)目依賴(lài)項(xiàng)的代碼完成，IntelliJ IDEA會(huì)自動(dòng)創(chuàng)建一個(gè)node_modules庫(kù)，因此Node.js模塊保存在項(xiàng)目中，但不會(huì)對(duì)它們進(jìn)行檢查，從而提高了性能。

在“項(xiàng)目”工具窗口中，node_modules也標(biāo)記為庫(kù)：

但是，該node_modules庫(kù)僅包含項(xiàng)目package.json文件的dependencies對(duì)象中列出的模塊。IntelliJ IDEA不包含依賴(lài)項(xiàng)對(duì)node_modules庫(kù)的依賴(lài)性，但實(shí)際上將它們從項(xiàng)目中排除。

配置庫(kù)的范圍

有時(shí)您可能會(huì)注意到IntelliJ IDEA建議不相關(guān)的完成，例如，客戶(hù)端代碼中的Node.js API。發(fā)生這種情況是因?yàn)槟J(rèn)情況下IntelliJ IDEA在整個(gè)項(xiàng)目文件夾中使用庫(kù)來(lái)完成。IntelliJ IDEA允許您通過(guò)配置庫(kù)的范圍來(lái)調(diào)整代碼完成。

配置庫(kù)的范圍

1. 在“設(shè)置/首選項(xiàng)”對(duì)話(huà)框（Ctrl+Alt+S）中，單擊“語(yǔ)言和框架”下的“JavaScript” ，然后單擊“庫(kù)”。將打開(kāi)“JavaScript. Libraries”頁(yè)面，其中顯示了所有已有庫(kù)的列表。
2. 選擇所需的庫(kù)，清除其旁邊的“已啟用”復(fù)選框，然后單擊“管理范圍”。該JavaScript庫(kù)。將打開(kāi)“JavaScript. Libraries使用范圍”對(duì)話(huà)框。
3. 單擊  并選擇要包含在庫(kù)范圍中的文件或文件夾。IntelliJ IDEA將您帶回JavaScript Libraries Usage Scopes對(duì)話(huà)框，其中Path字段顯示所選文件或文件夾。
4. 對(duì)于每個(gè)添加的文件或文件夾，從“庫(kù)”列表中選擇要配置的庫(kù)。

示例：配置HTML和Node.js核心庫(kù)的范圍

在IntelliJ IDEA中處理全棧JavaScript應(yīng)用程序時(shí)，您經(jīng)常會(huì)注意到代碼完成建議客戶(hù)端代碼中的一些Node.js API和Node.js代碼中的DOM API。這是因?yàn)槟J(rèn)情況下在整個(gè)項(xiàng)目中啟用帶有DOM API的HTML庫(kù)和帶有Node.js API 的Node.js核心庫(kù)。要?jiǎng)h除不相關(guān)的完成建議，您需要配置這些庫(kù)的范圍。

1. 在“設(shè)置/首選項(xiàng)”對(duì)話(huà)框（Ctrl+Alt+S）中，單擊“語(yǔ)言和框架”下的“JavaScript” ，然后單擊“庫(kù)”。將打開(kāi)“JavaScript. Libraries”頁(yè)面，其中顯示為當(dāng)前項(xiàng)目配置的所有庫(kù)。
   
   
2. 清除HTML和Node.js核心項(xiàng)旁邊的“已啟用”復(fù)選框。
3. 單擊“管理范圍”。將打開(kāi)“JavaScript庫(kù)使用范圍”對(duì)話(huà)框。
4. 要配置HTML庫(kù)的范圍，請(qǐng)單擊 ，選擇具有客戶(hù)端代碼的文件夾，然后從“庫(kù)”下拉列表中選擇“HTML”。
5. 要配置Node.js核心庫(kù)的作用域，請(qǐng)?jiān)俅螁螕? ，選擇包含服務(wù)器端代碼的文件夾，然后從“庫(kù)”下拉列表中選擇“Node.js核心” 。
   
   
   現(xiàn)在IntelliJ IDEA解析了HTML和Node.js核心庫(kù)中的項(xiàng)目，并僅在這些所選項(xiàng)目文件夾的文件中建議它們完成。

配置通過(guò)CDN鏈接添加的庫(kù)

當(dāng)通過(guò)CDN鏈接引用.js庫(kù)文件時(shí)，它可用于運(yùn)行時(shí)，但對(duì)于IntelliJ IDEA是不可見(jiàn)的。要將此類(lèi)庫(kù).js文件中的對(duì)象添加到完成列表，請(qǐng)下載該文件并將其配置為外部庫(kù)。

下載庫(kù)

• 將光標(biāo)定位到庫(kù)的CDN鏈接，按Alt+Enter，然后從列表中選擇下載庫(kù)：
  
  
  該庫(kù)將下載到IntelliJ IDEA緩存（但不會(huì)下載到您的項(xiàng)目中），并顯示一條信息彈出消息：
  
  
  在JavaScript Libraries頁(yè)面上，下載的庫(kù)將添加到列表中，并在當(dāng)前項(xiàng)目的范圍內(nèi)啟用它：
  
  
  在“項(xiàng)目”工具窗口中，庫(kù)顯示在“外部庫(kù)”節(jié)點(diǎn)下：
  
  

更改庫(kù)的可見(jiàn)性

• 默認(rèn)情況下，IntelliJ IDEA將下載的庫(kù)標(biāo)記為全局，這意味著您可以在任何其他IntelliJ IDEA項(xiàng)目中啟用和重用它。要更改此默認(rèn)設(shè)置，請(qǐng)?jiān)诹斜碇羞x擇下載的庫(kù)，單擊“編輯”，然后在打開(kāi)的“編輯庫(kù)”對(duì)話(huà)框中選擇“項(xiàng)目”。
  
  

配置自定義第三方JavaScript庫(kù)

假設(shè)您的項(xiàng)目或計(jì)算機(jī)上的其他地方有一個(gè)JavaScript框架文件，并且您希望IntelliJ IDEA將其視為庫(kù)，而不僅僅是您編輯的項(xiàng)目代碼。

配置自定義庫(kù)

1. 下載所需的框架文件。
2. 在“設(shè)置/首選項(xiàng)”對(duì)話(huà)框（Ctrl+Alt+S）中，單擊“語(yǔ)言和框架”下的“JavaScript” ，然后單擊“庫(kù)”。將打開(kāi)“JavaScript. Libraries”頁(yè)面，單擊“添加”。“新建庫(kù)”對(duì)話(huà)框?qū)⒋蜷_(kāi)。
3. 指定外部JavaScript庫(kù)的名稱(chēng)，單擊 ，然后從列表中選擇“附加文件”或“附加目錄 ”。在打開(kāi)的對(duì)話(huà)框中，選擇包含下載框架的文件或文件夾。
   
   

可選

• 默認(rèn)情況下，庫(kù)是Global，這意味著您可以將其附加到任何其他項(xiàng)目。要禁止重新使用庫(kù)，請(qǐng)?jiān)凇靶陆◣?kù)”對(duì)話(huà)框中選擇“項(xiàng)目”。
• 默認(rèn)情況下，庫(kù)在整個(gè)當(dāng)前項(xiàng)目的范圍內(nèi)啟用。您可以按配置庫(kù)的范圍中所述更改此默認(rèn)設(shè)置。
• 在“文檔URL”區(qū)域中，指定庫(kù)或框架的官方文檔的路徑。當(dāng)您此庫(kù)中的符號(hào)上按下Shift+F1時(shí)，IntelliJ IDEA將打開(kāi)此URL 。

查看與文件關(guān)聯(lián)的庫(kù)

• 打開(kāi)該文件在編輯或選擇該項(xiàng)目視圖，單擊狀態(tài)欄上的 。IntelliJ IDEA打開(kāi)一個(gè)彈出窗口，列出與當(dāng)前文件關(guān)聯(lián)的庫(kù)。要更改列表，請(qǐng)單擊“范圍內(nèi)的庫(kù)”鏈接，然后在打開(kāi)的“管理范圍”對(duì)話(huà)框中編輯范圍設(shè)置。
• 或者，在編輯器中打開(kāi)文件，然后在上下文菜單中選擇“使用JavaScript庫(kù) ”。IntelliJ IDEA打開(kāi)一個(gè)包含可用配置庫(kù)的彈出列表。與當(dāng)前文件關(guān)聯(lián)的庫(kù)標(biāo)有勾號(hào)。
  • 要從庫(kù)的范圍中刪除當(dāng)前文件，請(qǐng)清除此庫(kù)旁邊的復(fù)選框。
  • 要將庫(kù)與當(dāng)前文件關(guān)聯(lián)，請(qǐng)選中此庫(kù)旁邊的復(fù)選框。

刪除庫(kù)

1. 在“設(shè)置/首選項(xiàng)”對(duì)話(huà)框（Ctrl+Alt+S）中，單擊“語(yǔ)言和框架”下的“JavaScript” ，然后單擊“庫(kù)”。將打開(kāi)“JavaScript. Libraries”頁(yè)面，其中顯示了所有已有庫(kù)的列表。
2. 選擇所需的庫(kù)，然后單擊“刪除”。