什么是jsconfig.json？

Question

如果我在互联网上搜索相同的问题，那么我只会得到 Visual Studio Code 网站和一些实现它的博客的链接。

我想知道

jsconfig.json

是 Visual Studio Code 特有的还是

javascript/webpack

？

如果我们将应用程序部署在AWS、Heroku等上会发生什么？我们需要做出改变吗？

Answer 1

它是一个配置文件，可帮助您的文本编辑器和模块捆绑器（如果您正在使用）。您的文本编辑器的语言服务器协议（LSP）会查看此文件以了解有关您的项目的更多信息。

模块捆绑器（例如（Vite、Turbo 等））也将在开发和构建期间使用 jsconfig.json。

虽然这似乎源自 Visual Studio Code，但任何使用 LSP 的编辑器都会使用文件 jsconfig.json，包括 Visual Studio Code、Sublime Text 等。

它最常用于在智能感知中包含/排除文件夹（现在大多数编辑器使用 LSP），并将源代码中的别名映射到某些文件夹。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "$libs": ["src/libs"],
      "$libs/*": ["src/libs/*"],
    }
  },
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"],
  "exclude": ["node_modules", "**/node_modules", "dist"]
}

该文件基本上告诉语言服务器：

基本网址

使用

.

位置作为项目根目录（即文件 jsconfig.json 所在的位置）。

路径

这意味着源代码中的$libs指向

/src/libs

。如果您的编辑器依赖 LSP 来定位文件，这非常有用。当您启动转到文件时，它将转到正确的位置。

包括

这意味着包含所有以这些扩展名结尾的文件夹和文件，为您提供文件搜索、代码补全。

排除

这意味着排除

node_modules

和

dist

文件夹内的所有内容。例如，当您搜索符号或变量时，您不希望编译后的包出现在搜索结果中。

备注

换句话说，您可以将 jsconfig.json 文件视为有点像 .gitignore 文件，但仅供编辑器的语言服务器使用。

但请记住，如果您要使用 jsconfig.json 来映射别名，则需要对模块捆绑器进行其他配置，并更新您的

eslint

配置，也就是说，如果您使用 ESLint .

例如，在 Node.js / CommonJS 环境中，您需要告诉 Node.js $libs 是什么。有很多方法可以做到这一点，但现在人们大多使用module-alias。

Answer 2

正如其他答案所指出的，该协议源自 Visual Studio Code - 但已被许多框架采用以在编译时工作：

前端

支持

jsconfig.json

和

tsconfig.json

的前端框架：

• 创建 React App（请参阅导入组件）
• Next.js（请参阅在 jsconfig.json 中使用 baseUrl 不适用于 Next.js）

后端

后端 Node.js 支持

jsconfig.json

/

tsconfig.json

:

• 模块别名

Answer 3

这绝对是 Visual Studio Code 特有的。

目录中存在 jsconfig.json 文件表明该目录是 JavaScript 项目的根目录。 jsconfig.json 文件指定根文件以及 JavaScript 语言服务提供的功能的选项。

查看jsconfig.json中的更多详细信息。

在 AWS 或 Heroku 上部署时不需要此文件。基本上，如果您使用 Git 存储库，则可以将其从提交中排除，即在 .gitignore 文件中添加 jsconfig.json。这将使您的项目独立于 IDE。