VSCode打字稿导入json文件突出显示问题

Question

在使用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"
  ]
}

Answer 1

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

中所述，应包含在tsconfig.json文件夹下

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

---

就我而言，这是一个测试文件，不应不包含在构建中。因此，我决定忽略vs中的这一亮点。

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