使用jsconfig.json提高项目编码的体验

什么是 jsconfig.json？

当一个项目中存在tsconfig.json时，表示这是一个typecrtipt项目，目录中存在jsconfig.json文件表示该目录是JavaScript项目。 jsconfig.json文件指定JavaScript语言服务提供的功能选项。

jsconfig.json源于tsconfig.json，是TypeScript的配置文件。jsconfig.json相当于tsconfig.json的“allowJs”属性设置为true。

为什么需要一个 jsconfig.json 文件？

Visual Studio Code的JavaScript支持可以在两种不同的模式下运行：

1. 文件范围：无jsconfig.json在Visual Studio Code中打开的JavaScript文件被视为独立单元

2. 显式项目：使用jsconfig.json表示该目录是JavaScript项目，可以列出包括的目录和排除的目录，以及编译选项。

当项目中存在jsconfig.json时可以提高编码体验。

如何使用？

• 指定项目包含的目录，和不包含的目录，提高语言服务的性能：

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

• 通过compilerOptions属性配置JavaScript语言支持。

不要被 compilerOptions 混淆。 此属性的存在是因为 jsconfig.json 是 tsconfig.json 的后代，后者用于编译 TypeScript。

具体字段可根据tsconfig.json的编译选项

{
  "compilerOptions":{
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "target": "es2015",
    "module": "es2015",
    "lib": [
      "dom",
      "esnext"
    ],
    "baseUrl":".",
    "paths":{
      "@/*": [
        "src/*"
      ]
    }
  }
}

模板

• vue项目模板：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "target": "es2015",
    "module": "es2015",
    "lib": ["dom", "esnext"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": [
    "dist",
    "node_modules",
    "build",
    ".vscode",
    ".nuxt",
    "coverage",
    ".npm",
    ".yarn"
  ]
}