web-dev-qa-db-fra.com

VSCode TypeScript importation du problème de mise en évidence du fichier json

J'ai un comportement étrange lors de l'importation de fichiers json à l'aide de l'instruction import dans TypeScript lors de l'utilisation de VSCode. Notez que ce n'est pas un problème avec TypeScript lui-même, juste la mise en évidence de VSCode.

J'ai modifié mon tsconfig.json en ajoutant resolJsonModule et esModuleInterop avec la valeur true à mes options de compilation pour permettre l'importation de json dans TypeScript.

J'ai également ajouté ce package à mon projet https://www.npmjs.com/package/json-d-ts et ajouté un attribut typeRoots au tsconfig.json avec une valeur de ["node_modules/json-d-ts "]

J'ai importé le fichier json (trouvé dans src/config/firebaseServiceKey.json) dans un module (trouvé dans src/firebaseApp.ts) qui se trouve dans un répertoire parent, ainsi l'importation ressemble à ceci:

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

VSCode ne se plaint pas de cette importation:

Good import highlighting

Cependant, j'ai un autre module qui importe le même fichier à un niveau différent dans le répertoire du projet, ce module se trouve dans test/utils.ts son importation ressemble à ceci:

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

Cette fois, VSCode ne semble pas aimer l'importation relative et met en évidence le module comme manquant:

enter image description here

Des idées sur la façon de réparer configurer VSCode pour résoudre ce problème?

Voici la section pertinente du résultat de l'exécution de 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'. ========

Voici mon 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"
  ]
}
jsontypescriptvisual-studio-codevscode-settings
16
Uzer

J'ai rencontré un problème similaire, vérifiez que votre fichier est inclus comme l'a dit @Matt McCutchen, le fichier qui contient import serviceKey from "../src/config/firebaseServiceKey.json"; doit être inclus dans le dossier src comme vous l'avez décrit dans le tsconfig.json

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

Dans mon cas, c'était un fichier de test qui devrait pas être inclus dans la construction. Pour cette raison, j'ai décidé d'ignorer ce point culminant dans le vs.

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