VsCode的jsconfig配置文件说明详解

下面是关于VsCode的jsconfig配置文件说明详解的完整攻略。

什么是 jsconfig.json？

jsconfig.json 是一个用于在 VS Code 中指定 JavaScript 项目根目录的配置文件。

在 jsconfig.json 文件中，我们可以通过配置路径映射、JS 声明、解析模块、编译选项等，来使 VS Code 更好地为 JavaScript 代码提供语法提示等辅助功能。

如何创建 jsconfig.json?

在项目根目录创建一个名为 jsconfig.json 文件即可。具体的，我们可以按照以下标准格式来编写：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src",
    "paths": {
      "*": ["*", "src/*"]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

配置项讲解

下面我们来详细讲解一下 jsconfig.json 中的各个可配置项。

compilerOptions

在 compilerOptions 配置项中，我们可以指定 TypeScript 编译器的选项。

以下是几个常用的选项：

module

通过指定 module 选项来指定生成代码的模块类型，默认使用 commonjs。

例如：

"compilerOptions": {
    "module": "amd"
}

target

通过指定 target 选项来指定 编译后的 JavaScript 代码的版本，默认是 ES5。

例如：

"compilerOptions": {
    "target": "es2017"
}

allowSyntheticDefaultImports

这个选项可以启用导入默认值，允许您导入默认到一个非默认的导出模块。默认情况下它是禁用的。

例如：

"compilerOptions": {
    "allowSyntheticDefaultImports": true
}

baseUrl 和 paths

通过 baseUrl 和 paths 选项来指定模块的根目录和相关的路径映射。

例如：

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

在上面的配置中，@ 符号表示使用 baseUrl 配置中指定的根目录，使用 paths 配置中指定的路径时，对应使用 src 目录下的文件。

exclude

在 exclude 配置项中，我们可以指定哪些文件或目录不需要包含到项目中。

例如：

"exclude": [
    "node_modules",
    "dist"
]

示例说明

以下分别给出两个使用示例。

示例1

在我们的项目中，使用了一些自定义的目录结构，例如 ./api 用于存放 API 调用相关的代码，./libs 用于存放自定义的工具类库。

那么在 jsconfig.json 中，我们可以通过以下配置来告诉 VS Code 如何查找相关的依赖：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "api/*": ["./api/*"],
      "libs/*": ["./libs/*"]
    }
  },
  "exclude": ["node_modules"]
}

这样，在我们编写代码的时候，就可以采用如下方式来引入相关依赖：

import { get } from 'api/request';
import { debounce } from 'libs/utils';

示例2

在我们的项目中，使用了 Vue.js 作为前端框架。

由于 Vue.js 采用的是单文件组件的方式进行开发，所以在我们编写代码的时候，需要对 *.vue 文件进行相应的类型声明，以便在使用的时候能够获得正确的提示。

那么在 jsconfig.json 中，我们可以通过以下的配置来指定相关的类型声明：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"],
      "@/*": ["src/*"]
    },
    "types": [
      "vue",
      "webpack-env",
      "jest"
    ],
    "typeRoots": [
      "node_modules/@types",
      "node_modules/vue/types"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "public"
  ]
}

在上面的配置中，通过指定 types 选项来告诉 VS Code 需要编写 Vue.js 代码，并且需要支持 webpack 环境和 Jest 测试环境。

并且在其 typeRoots 配置中，指定了包含类型声明的根目录。

这样，我们在编写 Vue.js 代码时，就可以获得类似于如下的语法提示：

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  private message: string = 'Hello World';
}
</script>