VSCode typescript导入json文件高亮问题

Posted 2023-03-13

【中文标题】VSCode typescript导入json文件高亮问题

【英文标题】：VSCode typescript importing json file highlighting issue

【发布时间】：2019-02-17 04:48:03

【问题描述】：

在使用 VSCode 时使用 typescript 中的 import 语句导入 json 文件时，我有一些奇怪的行为。请注意，这不是打字稿本身的问题，只是 VSCode 突出显示。

我已经编辑了我的 tsconfig.json，将值为 true 的 resolveJsonModule 和 esModuleInterop 添加到我的编译器选项中，以便在 typescript 中导入 json。

我也将此包添加到我的项目中 https://www.npmjs.com/package/json-d-ts 并向 tsconfig.json 添加了一个 typeRoots 属性，其值为 ["node_modules/json-d-ts"]

我已将 json 文件（位于 src/config/firebaseServiceKey.json）导入到父目录中的模块（位于 src/firebaseApp.ts）中，因此导入如下所示：

import databaseUrl from "./config/firebaseDatabaseURL.json";

VSCode 不会抱怨这个导入：

但是我有另一个模块在项目目录的不同级别导入相同的文件，这个模块在 test/utils.ts 中找到，它的导入看起来像这样：

import serviceKey from "../src/config/firebaseServiceKey.json";

这一次 VSCode 似乎不喜欢相对导入，并将模块突出显示为缺失：

任何想法如何解决配置 VSCode 以解决此问题？

这里是运行 tsc --traceResolution 结果的相关部分：

======== Resolving module '../src/config/firebaseServiceKey.json' from '/home/jty/April2018/vs-server/test/utils.ts'. ========
Explicitly specified module resolution kind: 'NodeJs'.
Loading module as file / folder, candidate module location '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json', target file type 'TypeScript'.
File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json.ts' does not exist.
File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json.tsx' does not exist.
File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json.d.ts' does not exist.
Directory '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json' does not exist, skipping all lookups in it.
Loading module as file / folder, candidate module location '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json', target file type 'javascript'.
File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json.js' does not exist.
File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json.jsx' does not exist.
Directory '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json' does not exist, skipping all lookups in it.
Loading module as file / folder, candidate module location '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json', target file type 'Json'.
File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json' exist - use it as a name resolution result.
======== Module name '../src/config/firebaseServiceKey.json' was successfully resolved to '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json'. ========

这是我的 tsconfig.json

"compilerOptions": 
    "module": "commonjs",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": 
        "*": [
            "node_modules/*",
            "src/types/*"
        ]
    
,
"include": [
    "src/**/*"
],
"typeRoots": [
    "node_modules/json-d-ts"
  ]

【问题讨论】：

首先，根据tsconfig.json 中的files、include 和exclude 设置确保包含test/utils.ts，因为VS Code 不应用指定的编译器选项在tsconfig.json 中排除的文件。如果这不是问题，请使用 --traceResolution 选项运行 tsc 以获取有关尝试解析 ../src/config/firebaseServiceKey.json 模块时发生的情况的更多信息。

这个问题可能是因为你试图在你的 TypeScript 项目目录之外导入一个 JSON 文件

嗨，谢谢马特，我已经为相关部分添加了我的 tsconfig.json 和 tsc 的结果，我认为它不是打字稿问题，因为它确实解决了模块和代码工作。但是 vscode 似乎没有那么聪明地解析模块。

事实上，如果 test/* 放在 tsconfig.json 中的“include”中，则构建失败并显示：“error TS2497: Module '”/home/jty/April2018/vs-server/src /config/firebaseServiceKey"' 解析为非模块实体，无法使用此构造导入。"否则，如果它不包括在内，那么它编译得很好。无论哪种方式，VSCode 都会抱怨。

【参考方案1】：

我遇到过类似的问题，请检查您的文件是否包含在 @Matt McCutchen 所说的内容中，该文件包含 import serviceKey from "../src/config/firebaseServiceKey.json"; 如您在tsconfig.json 中所述，应包含在src 文件夹下

"include": [
    "src/**/*"
],

---

在我的例子中，它是一个测试文件，应该不包含在构建中。因此，我决定忽略 vs. 中的那个亮点。

// @ts-ignore
import packageJson from '../../../../package.json';