当前位置：首页 > news >正文

jsconfig.json文件的作用

news 来源：原创 2025/7/18 20:44:27

jsconfig.json文件的作用

为什么今天会谈到这个呢？有这么一个场景：我们每次开发项目时都会给路径配置别名，配完别名之后可以简化我们的开发，但是随之而来的就有一个问题，一般来说，当我们使用相对路径时，vscode都可以使用CTRL+鼠标左键来跳转到指定的文件当中，但是当我们配置了别名之后，vscode竟然无法跳转了，这就是为什么需要这个文件的原因。

jsconfig.json文件主要属性的作用

compilerOptions

该属性下定义了一些 JavaScript 编译器选项，如下

module: 指定模块系统的类型。如果设置为 CommonJS，表示使用 CommonJS 模块系统（通常用于 Node.js 环境）。
target: 设置 JavaScript 代码的目标版本。如果设置为 "ES6"，表示编译目标是 ES6（ECMAScript 2015）。
baseUrl: 用于设置模块解析的基本路径。如果设置为 "./"，表示当前目录作为解析模块路径的根目录。
paths: 定义了模块路径的别名，方便在代码中引用。它通过映射路径来简化引入模块的书写，该属性是解决vscode等编辑器能够正确识别别名路径的重要属性。

include

该属性定义了需要包含在项目中的文件/目录。它指定了哪些文件会被编译器和编辑器工具识别并提供 IntelliSense（代码提示）等功能。

exclude

该属性定义了需要排除在外的文件或目录。它指定了不应被包含在项目中的路径。

总结

jsconfig.json文件与tsconfig.json文件类似，通常都是为了帮助编辑器理解项目结构。只不过之前在写TypeScript项目时，如果配置了路径别名之后，没有在tsconfig.json文件中的compilerOptions.pahts中定义对应的别名的话，编辑器会报路径找不到的错误，但是这次是我工作一年多以来第一次使用JavaScript来开发项目，刚开始配置别名不能跳转也觉得无所谓，直到项目开发完毕之后我才觉得有点别扭(在找bug时无法跳转简直是巨大的灾难)，因此用了点时间ai了一下，找到问题的根源。实际上，在最开始使用vue-cli开发项目时，这个文件好像是脚手架自带的，我也没有去深究他为什么存在。此时此刻也算是补足了这一部分的缺陷。