如何增強vscode中js程式碼提示功能-js教程-PHP中文網

如何增強vscode中js程式碼提示功能

零下一度

發布： 2018-05-14 10:20:39

原創

21546 人瀏覽過

這篇文章主要為大家介紹如何增強vscode中js程式碼提示功能的相關資料，文中透過範例程式碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。

使用types 增強vscode中javascript程式碼提示功能

##微軟的vscode

使用過ts的同學都知道*.d.ts 類型聲明文件，其管理工具，從最初的tsd,到後來的typings,一直到現在的@types,類型聲明文件為ts的智慧提示，類型檢查提供了強大支援。

我們也可以使用類型宣告文件，增強vscode編輯javascript時的智慧提示。

#現在，我們可以不依賴typings直接使用npm安裝所需的types類型文件。

例如，我們要安裝sequelize的類型文件，可以直接使用：

npm install @types/sequelize --save-dev

登入後複製

安裝完成後，我們在node_

如果有的第三方npm套件官方未提供類型聲明檔案時，可能會安裝出錯，找不到對應的套件。這時，就沒辦法利用其增強js程式碼的提示功能。

如果你熟悉使用ts如何寫*.d.ts文件，也可以自己寫一個。

設定 jsconfig.json 檔案

#針對jsconfig.json檔案的詳細說明，請參考這裡。

在jsconfig.json檔案中加入：

"include": [
 "model/**",
 "service/**"
],
"typeAcquisition": {
 "include": [
  "sequelize"
 ]
}

登入後複製

其中typeAcquisition參數是必配的，標識啟用類型感知功能，裡面的include標識對哪一個包啟用。

上面的include不是必須的，只是用來識別jsconfig.json檔案對哪些檔案運作。

開啟後，如圖：

#我們上圖中範例提示的就是sequelize套件中Model類別的實例方法和

屬性。

vscode對智慧感知的圖標，也給了一定的總結：

##在js檔案中啟用語意檢查
如果要在js中啟用類型檢查，可以在檔案最上方新增// @ts-check

註釋

。

// @ts-check
let easy = &#39;abc&#39;
easy = 123 // Error: Type &#39;123&#39; is not assignable to type &#39;string&#39;

或在 jsconfig.json中進行設定：

{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

登入後複製

以上是如何增強vscode中js程式碼提示功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！