vue專案中 jsconfig.json概念及使用步驟

2022-07-07 18:03:58

vue專案中 jsconfig.json是什麼

當您在工作空間中有一個定義專案上下文的jsconfig.json檔案時，JavaScript體驗會得到改進。

這傑斯也太官方了，說白了就是提高在寫專案時舒適度的。

概述

目錄中存在tsconfig.json檔案表明該目錄是 TypeScript 專案的根目錄。該tsconfig.json檔案指定編譯專案所需的根檔案和編譯器選項。

JavaScript 專案可以使用jsconfig.json檔案來代替，它的作用幾乎相同，但預設啟用了一些與 JavaScript 相關的編譯器標誌。

一、使用tsconfig.json或jsconfig.json

jsconfig.json源於tsconfig.json，是TypeScript的組態檔。
jsconfig.json相當於tsconfig.json的「allowJs」屬性設定為true

二、使用步驟

1. 設定說明

程式碼如下（範例）：

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            // 解決專案中使用@作為路徑別名，導致vscode無法跳轉檔案的問題
            "@/*": ["src/*"]
        },
        // 解決prettier對於裝飾器語法的警告
        "experimentalDecorators": true,
        // 解決.jsx檔案無法快速跳轉的問題
        "jsx": "preserve"
    },
    //提高 IDE 效能
    "exclude": ["node_modules", "dist", "build"]
}

*Tips 在這裡特別說明一下 exclude 為什麼提高編譯器效能？

如果開發的專案根目錄下沒有 jsconfig.json，在預設情況下，像 VS Code，預設只會把 node_modules資料夾排除掉。
官方給出建議是這樣的：