欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vscode vue3中jsconfig與tsconfig的區(qū)別詳細(xì)講解

 更新時(shí)間：2025年05月20日 10:32:19   作者：花花魚(yú)  
這篇文章主要介紹了vscode vue3中jsconfig與tsconfig區(qū)別的相關(guān)資料,jsconfig.json用于JavaScript項(xiàng)目,允許處理JS文件,tsconfig.json用于TypeScript項(xiàng)目,控制編譯選項(xiàng),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、基本說(shuō)明

‌jsconfig.json和tsconfig.js的主要區(qū)別在于它們的應(yīng)用場(chǎng)景和功能。‌

應(yīng)用場(chǎng)景

  • ‌jsconfig.json‌：主要用于JavaScript項(xiàng)目，特別是那些需要JavaScript語(yǔ)言服務(wù)支持的項(xiàng)目。它相當(dāng)于tsconfig.json的“allowJs”屬性設(shè)置為true，即允許JavaScript文件被TypeScript編譯器處理‌。
  • ‌tsconfig.json‌：專門(mén)用于TypeScript項(xiàng)目，用于指定編譯TypeScript代碼時(shí)的編譯選項(xiàng)和編譯目標(biāo)等信息。通過(guò)修改該文件，可以定制TypeScript編譯器的行為，例如指定編譯目標(biāo)、啟用或禁用特定的語(yǔ)言特性、設(shè)置代碼檢查規(guī)則等‌。

功能差異

  • ‌jsconfig.json‌：主要用于指定項(xiàng)目的根文件和JavaScript語(yǔ)言服務(wù)提供的功能選項(xiàng)。它可以幫助VSCode更好地處理項(xiàng)目，提供智能提示等功能。雖然jsconfig.json源于tsconfig.json，但默認(rèn)啟用了與JavaScript相關(guān)的編譯器標(biāo)志，適用于純JavaScript項(xiàng)目‌23。
  • ‌tsconfig.json‌：包含更詳細(xì)的編譯選項(xiàng)，用于控制TypeScript編譯器的行為。它可以設(shè)置編譯目標(biāo)、模塊系統(tǒng)、是否啟用嚴(yán)格模式等，適用于TypeScript項(xiàng)目‌13。

配置方式

  • ‌jsconfig.json‌：可以通過(guò)VSCode等編輯器自動(dòng)生成，也可以通過(guò)手動(dòng)添加配置選項(xiàng)來(lái)實(shí)現(xiàn)。它主要用于提高開(kāi)發(fā)體驗(yàn)，如路徑智能提示等‌12。
  • ‌tsconfig.json‌：通常通過(guò)命令行工具如tsc --init自動(dòng)生成，也可以手動(dòng)添加配置選項(xiàng)。它用于控制TypeScript編譯的具體行為和選項(xiàng)‌

2、基本配制

1. 配置 jsconfig.json

對(duì)于 JavaScript 項(xiàng)目，jsconfig.json 提供了一種方式來(lái)定義項(xiàng)目的結(jié)構(gòu)和特定的編譯選項(xiàng)。以下是一個(gè)基本的 jsconfig.json 配置示例

{
  "compilerOptions": {
    "target": "es5",                       // 指定 ECMAScript 目標(biāo)版本
    "module": "esnext",                 // 指定生成代碼的模塊系統(tǒng)
    "checkJs": true,                      // 允許在 js 文件中報(bào)告錯(cuò)誤
    "allowJs": true,                      // 允許編譯 js 文件
    "baseUrl": "./",                      // 指定非相對(duì)模塊名的解析基地址
    "paths": {                            // 路徑映射，例如將特定導(dǎo)入重寫(xiě)為本地文件
      "*": ["types/*"]
    }
  },
  "include": [                            // 要包含的文件或目錄
    "src/**/*"
  ],
  "exclude": [                            // 要排除的文件或目錄
    "node_modules",
    "dist"
  ]
}

2. 配置 tsconfig.json

對(duì)于 TypeScript 項(xiàng)目，tsconfig.json 文件是核心配置文件，它允許你指定編譯選項(xiàng)和項(xiàng)目的結(jié)構(gòu)。以下是一個(gè)基本的 tsconfig.json 配置示例

{
  "compilerOptions": {
    "target": "es5",                       // 指定 ECMAScript 目標(biāo)版本
    "module": "esnext",                 // 指定生成代碼的模塊系統(tǒng)
    "strict": true,                       // 啟用所有嚴(yán)格類型檢查選項(xiàng)
    "esModuleInterop": true,              // 允許導(dǎo)入非 ES 模塊
    "skipLibCheck": true,                 // 跳過(guò)聲明文件的類型檢查
    "forceConsistentCasingInFileNames": true, // 禁止對(duì)同一個(gè)文件的不一致的引用
    "baseUrl": "./",                      // 指定非相對(duì)模塊名的解析基地址
    "paths": {                            // 路徑映射，例如將特定導(dǎo)入重寫(xiě)為本地文件
      "*": ["types/*"]
    },
    "outDir": "./dist",                   // 指定輸出目錄結(jié)構(gòu)
    "rootDir": "./src",                   // 用來(lái)控制輸出目錄結(jié)構(gòu)的根文件夾
    "allowJs": true,                      // 允許編譯 js 文件(即使它是 tsconfig.json)
    "checkJs": true,                      // 報(bào)告 js 文件中的錯(cuò)誤
  },
  "include": [                            // 要包含的文件或目錄
    "src/**/*"
  ],
  "exclude": [                            // 要排除的文件或目錄
    "node_modules",
    "**/*.spec.ts"
  ]
}

3、相關(guān)說(shuō)明

  • 目標(biāo)版本 (target): 根據(jù)你的運(yùn)行環(huán)境選擇合適的 ECMAScript 版本（如 es5, es6 等）。

  • 模塊系統(tǒng) (module): 根據(jù)你的項(xiàng)目需要選擇合適的模塊系統(tǒng)（如 commonjs, es6, esnext 等）。

  • 嚴(yán)格模式 (strict): 啟用后，TypeScript 會(huì)啟用所有嚴(yán)格類型檢查的選項(xiàng)。這對(duì)于保證代碼質(zhì)量非常有幫助。

  • 輸出目錄 (outDir): 指定編譯后的文件輸出目錄。

  • 包含與排除 (include, exclude): 控制哪些文件和目錄應(yīng)該被包含或排除在編譯過(guò)程中。通常，你會(huì)包括源代碼目錄，并排除如 node_modules 和測(cè)試文件等。

  • 路徑映射 (paths): 在大型項(xiàng)目中，你可能需要將某些導(dǎo)入重定向到特定的本地文件或目錄。這可以通過(guò)路徑映射來(lái)實(shí)現(xiàn)。

  • 檢查 JavaScript 文件 (checkJs): 對(duì)于 JavaScript 項(xiàng)目，即使使用了 TypeScript，你也可以開(kāi)啟這個(gè)選項(xiàng)來(lái)檢查 JavaScript 文件中的錯(cuò)誤。

  • 允許 JavaScript 文件 (allowJs): 在 TypeScript 項(xiàng)目中，允許 TypeScript 編譯器處理 JavaScript 文件。

3、最新生成的demo中的配制

tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ]
}

references:代表引用了下面的三個(gè)json文件，也就是說(shuō)包含這三個(gè)。

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

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

include說(shuō)明：

加了編譯項(xiàng)，然后我們?nèi)绻霈F(xiàn)了鼠標(biāo)移上去Unknown的提示，比如說(shuō)el-button，我們加了

"compilerOptions": {
    "types": ["element-plus/global"]
  }

發(fā)現(xiàn)并沒(méi)有什么用，這樣的話，我們就要在include里加上這一個(gè)引用就可以了。

tsconfig.node.json

{
  "extends": "@tsconfig/node22/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*",
    "eslint.config.*"
  ],
  "compilerOptions": {
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",

    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

說(shuō)明：

繼承了node22/tsconfig.json的配制，包含了vite的配制，還有端到端測(cè)試的配制等等。

tsconfig.vitest.json

{
  "extends": "./tsconfig.app.json",
  "include": ["src/**/__tests__/*", "env.d.ts"],
  "exclude": [],
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",

    "lib": [],
    "types": ["node", "jsdom"]
  }
}

說(shuō)明：

extends：繼承tsconfig.app.json的配置項(xiàng)，避免重復(fù)配置。

總結(jié)

到此這篇關(guān)于vscode vue3中jsconfig與tsconfig區(qū)別的文章就介紹到這了,更多相關(guān)vscode vue3 jsconfig與tsconfig內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論