Vue项目中jsconfig.json的作用与配置详解

在Vue项目中，jsconfig.json文件扮演着重要角色。

当工作空间存在定义项目上下文的文件时，JavaScript的开发体验将得到显著改善。

这杰斯过于官方，通俗来说，其核心目的是提升编写项目代码时的舒适度。

概述

若目录中存在tsconfig.json文件，则表明该目录为TypeScript项目的根目录，该文件指定了编译项目所需的根文件及编译器选项。

JavaScript项目可使用jsconfig.json文件作为替代，其作用与tsconfig.json几乎相同，但默认启用了若干与JavaScript相关的编译器标志。

一、使用tsconfig.json或jsconfig.json

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

二、使用步骤

1. 配置说明

参考以下代码示例：

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
            "@/*": ["src/*"]
        },
        // 解决prettier对于装饰器语法的警告
        "experimentalDecorators": true,
        // 解决.jsx文件无法快速跳转的问题
        "jsx": "preserve"
    },
    //提高 IDE 性能
    "exclude": ["node_modules", "dist", "build"]
}

*Tips 在此特别说明exclude为何能提高编译器性能？

若项目根目录下未配置jsconfig.json，VS Code默认仅排除node_modules文件夹。官方给出建议是这样的：

建议尽可能排除不属于项目源代码的JavaScript文件所在文件夹。

这意味着与开发无关的文件可在编译时被IDE完全排除，如上述配置中的构建依赖文件（node_modules）及生成文件（dist目录），排除这些文件能有效提升VS Code的运行性能。

2. 配置 webpack 别名

新手常遇到反复书写“…/ …/ …/”导致路径混乱的情况。

此时需配置paths字段：

"paths": {
      "@/*": ["src/*"]
    }

使用@符号替代项目中的src目录，使得在src目录下查找components变得更为简便。

3. compilerOptions配置

总结

以上为jsconfig.json内容的总结，本文仅简要介绍了其基本配置，实际上jsconfig.json提供了大量能快速便捷提升代码效率的方法。

至此关于Vue项目中jsconfig.json的介绍结束，更多相关Vue与jsconfig.json的内容请搜索本站往期文章或继续浏览下文，希望大家今后多多支持本站！