typescriptvisual-studio-codeparcel

Intellisense issue in vscode with typescript


I have a typescript project that I edit via VSCode.

I'm using parcel, which means I have to "import" images into code. By default, typescript doesn't like that, so I've added a declarations.d.ts file in my repository to allow these.

For some reason, VSCode only considers the declarations file when it's open in the editor. As soon as I close the file, these errors pop up again:

Cannot find module [...] or its corresponding type declarations ts(2307)

Here is a minimal reproductible example, as well as a screen recording of the issue

├── package.json
├── package-lock.json
└── src
    ├── assets
    │   └── image.png
    ├── declarations.d.ts
    ├── index.html
    └── main.ts

Stuff I tried

Setup


Solution

  • Just add this config file in your codebase as tsconfig.json

    {
      "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "target": "ES2020",
        "noImplicitAny": false,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "allowJs": true,
        "noEmit": false,
        "removeComments": true,
        "baseUrl": "src",
        "lib": ["ES6","DOM"]
      },
      "compileOnSave": false,
      "include": ["./src/**/*", "tests/*.ts"],
      "exclude": ["node_modules", "dist", "tests"]
    }