想起以前 Visual Studio 再打 Javascript 文件時都會有 JQuery 的智能感知, 那VSCode 要如何也有智能感知, 老實說在選用工具時或是套件時智能感知的功能一直是被我列入考量的項目之一, 因為目前非常習慣了 VSCode 所以也是希望他能夠擁有我想要的編輯環境, 那廢話不多說就開始了, 其實只有三個步驟
步驟1. 安裝 jquery 定義檔
這邊的範例是我先 cd 到 VSCode 的 workspace 路徑了, 利用 npm 套件管理下載模組定義檔 @types/jquery, 如果安裝完成應該會看到 workspace 目錄底下增加了 package.json 和 node_modules 資料夾
p.s. 如果是用 nvm 託管 npm 的需要先激活 nvm ex. > source ~/.bash_profile (有的使用者可能會放在 .zshrc, .profile 或是 .bashrc 根據當時您的 profile 設定)
> cd your_workspace_dir
> npm i --save-dev @types/jquery
步驟2. 調整 jsconfig.json 參數
接著你可以在你的 js 資料夾中加入檔名為 jsconfig.json 其內文如下
這邊我是放在 Workspace 下, 因為我的 Workspace 底下有許多模組每個模組裡面都有 js 資料夾, 我不想每個都是管理
{
"typeAcquisition": {
"include": [
"./node_modules/@types/jquery"
],
"exclude": [
"./node_modules"
]
}
}
步驟 3. 重啟 VSCode
重啟 VSCode (James Calderon [1] 的文章說這步驟很重要 )
其他提醒 :
James Calderon 的文章中很貼心的提醒, 如果有用到 git 做版控記得在 .gitignore 中在排除 jsconfig.json 檔案以及 node_modules 資料夾, 以免一起被上版控了
結果顯示 :
在重啟 VSCode 後就可以看到 JQuery 的智能感知, 更詳細的內容可以參考文件[3], 官方有更詳細的 js setting
參考文獻:
[1] James Calderon 的 Jquery VS Comde.md
留言列表