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 為什么 提高 編譯器 性能 ？

如果開發(fā)的項目根目錄下沒有 jsconfig.json，在默認情況下，像 VS Code， 默認只會把 node_modules文件夾排除掉。
官方給出建議是這樣的：

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

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

2. 配置 webpack 別名

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

現(xiàn)在它來了，你需要配置paths ：

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

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

3. compilerOptions配置

總結

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

到此這篇關于vue項目中 jsconfig.json是什么的文章就介紹到這了,更多相關vue jsconfig.json內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論