jsconfig.json文件的作用
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
开发项目时,这个文件好像是脚手架自带的,我也没有去深究他为什么存在。此时此刻也算是补足了这一部分的缺陷。