JQuery Intellisense in VSCode

        想起以前 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

Screen Shot 2022-08-08 at 12.06.55 PM.png

 

參考文獻:
[1] James Calderon 的 Jquery VS Comde.md

[2] JQurery Intellisense in VSCode

[3] Javascript in visual studio Code

arrow
arrow
    創作者介紹
    創作者 boming 的頭像
    boming

    Michael Lin 的小部落格

    boming 發表在 痞客邦 留言(0) 人氣()