Проблема с выделением файла json при импорте машинописного текста VSCode

У меня странное поведение при импорте файлов json с использованием оператора импорта в машинописном тексте при использовании VSCode. Обратите внимание, что это не проблема самого машинописного текста, просто выделение кода VSCode.

Я отредактировал свой tsconfig.json, добавив resolveJsonModule и esModuleInterop со значением true для моих параметров компилятора, чтобы включить импорт json в машинописный текст.

Также я добавил этот пакет в свой проект https://www.npmjs.com/package/json-d-ts и добавил атрибут typeRoots в tsconfig.json со значением ["node_modules / json-d-ts"]

Я импортировал файл json (находится в src / config / firebaseServiceKey.json) в модуль (находится в src / firebaseApp.ts), который находится в родительском каталоге, поэтому импорт выглядит следующим образом:

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

VSCode не жалуется на этот импорт:

Проблема с выделением файла json при импорте машинописного текста VSCode

Однако у меня есть другой модуль, который импортирует тот же файл на другом уровне в каталоге проекта, этот модуль находится в test / utils.ts, его импорт выглядит так:

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

На этот раз VSCode, похоже, не нравится относительный импорт, и он выделяет модуль как отсутствующий:

Проблема с выделением файла 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"
  ]
}

Во-первых, убедитесь, что test/utils.ts включен на основе настроек files, include и exclude в tsconfig.json, поскольку VS Code не применяет параметры компилятора, указанные в tsconfig.json, к исключенным файлам. Если проблема не в этом, запустите tsc с опцией --traceResolution, чтобы получить дополнительную информацию о том, что происходит, когда он пытается разрешить модуль ../src/config/firebaseServiceKey.json.

Matt McCutchen 14.09.2018 03:00

Проблема может возникнуть из-за того, что вы пытаетесь импортировать файл JSON вне каталога проекта TypeScript.

Mikhail Burshteyn 14.09.2018 13:39

Привет, спасибо, Мэтт, я добавил свой tsconfig.json и результат tsc для соответствующего раздела, я не думаю, что это проблема с машинописным текстом, поскольку он разрешает работу модуля и кода. Но vscode, похоже, не так умно разрешает модуль.

Uzer 14.09.2018 13:40

Фактически, если test / * помещен в "include" в tsconfig.json, тогда сборка завершится ошибкой: "error TS2497: Module '" / home / jty / April2018 / vs-server / src / config / firebaseServiceKe‌ y "' преобразуется в немодульную сущность и не может быть импортирована с помощью этой конструкции ". в противном случае, если он не включен, он компилируется нормально. VSCode в любом случае жалуется.

Uzer 14.09.2018 13:46
Как сделать HTTP-запрос в Javascript?
Как сделать HTTP-запрос в Javascript?
В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:
20
4
5 067
1

Ответы 1

Я столкнулся с аналогичной проблемой, проверьте, включен ли ваш файл, как сказал @Matt McCutchen, файл, содержащий import serviceKey from "../src/config/firebaseServiceKey.json"; должен быть включен в папку src, как вы описали в tsconfig.json

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

В моем случае это был тестовый файл, который нужно было включить в сборку нет. Из-за этого я решил проигнорировать это выделение в vs.

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

Другие вопросы по теме