vue項目中 jsconfig.json概念及使用步驟

Posted on by

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文件夾排除掉。
官方給出建議是這樣的：

隻要有可能，您應該使用不屬於項目源代碼的JavaScript文件排除文件夾。

意思就是 與開發無關的文件可以讓 IDE 全部在編譯時排除掉，像上面的配置中就排除瞭，構建過程依賴文件（node_modules）和生成的文件(dist 目錄) 排除這些文件，可以提高 vscode 的性能。。

2. 配置 webpack 別名

作為新手的你，是否遇到夠這種情況：無數次的 …/ …/ …/ 早已讓你眼花繚亂。

現在它來瞭，你需要配置paths ：

"paths": {
      "@/*": ["src/*"]
    }

用 @ 代替 項目中 src目錄，我們在 src 目錄下 找 components 就簡單多瞭

3. compilerOptions配置

總結

以上就是今天總結 jsconfig .json 的內容，本文僅僅簡單介紹瞭 jsconfig .json 的一些基本配置，而 jsconfig .json提供瞭大量能使我們快速便捷提高代碼效率的方法。

到此這篇關於vue項目中 jsconfig.json是什麼的文章就介紹到這瞭,更多相關vue jsconfig.json內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：