# jsconfig.json and tsconfig.json

> jsconfig.json 和 tsconfig.json 都是用來定義專案中 JavaScript 和 TypeScript 編譯和編輯器行為的配置檔案。

## 主要區別用途和作用的對象:
* jsconfig.json: 主要用於 JavaScript 專案，配置編輯器（如 VS Code）對 JavaScript 專案的開發時的提示字樣。不涉及 TypeScript 編譯器的配置。

* tsconfig.json: 主要用於 TypeScript 專案，配置 TypeScript 編譯器的行為以及專案的結構和編譯過程。

## 編譯器選項:
* jsconfig.json: 包含的 compilerOptions 主要影響編輯器的功能，例如程式提示、跳轉等。雖然有些選項與 TypeScript 類似，`但它們不會影響實際的編譯過程`。

* tsconfig.json: 包含的 compilerOptions 用於配置 TypeScript 編譯器的具體行為，例如目標 ECMAScript 版本、模組解析策略、類型檢查嚴格性等，直接影響編譯結果。

## 檔案範圍:
* jsconfig.json: 主要用於定義編輯器應該關注的檔案範圍，幫助提升編輯器性能和準確性。
* tsconfig.json: 用於定義 TypeScript 編譯器應該編譯的檔案範圍。

## Example
* jsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "checkJs": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*.js"],
  "exclude": ["node_modules"]
}

* tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "jsx": "react",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"]
    },
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

## 一同共用
**jsconfig.json** 和 **tsconfig.json** 通常不需要共用，因為它們針對不同的語言（JavaScript 和 TypeScript）和用途設計。然而，在某些情況下，可能需要兩者並存，但它們的作用範圍應該明確分開，以避免衝突。

> 什麼情況下需要兩者共存？

#### 混合專案：
* 如果一個專案中同時包含大量的 JavaScript 和 TypeScript 檔案，並且希望對兩者進行不同的配置，可以分別使用 jsconfig.json 和 tsconfig.json。
>
#### 過渡專案：
* 當一個 JavaScript 專案逐步遷移到 TypeScript 時，可以使用 jsconfig.json 來配置 JavaScript 部分，並使用 tsconfig.json 來配置 TypeScript 部分。

## 混和時需注意的部分

### 檔案範圍：
* 確保 `include` 和 `exclude` 設置不重疊或衝突。例如，jsconfig.json 應該主要包含 JavaScript 檔案，而 tsconfig.json 應該主要包含 TypeScript 檔案。

### 混合使用：
* 如果 JavaScript 檔案和 TypeScript 檔案之間有相互依賴，確保 TypeScript 編譯器可以處理 JavaScript。在 tsconfig.json 中，可以設置 `allowJs: true`。

## 結論
* 通常情況下，jsconfig.json 和 tsconfig.json 不需要同時使用，但在混合專案或過渡專案中可以共存。關鍵在於清晰分開它們的作用範圍，避免配置衝突。