Why does Typescript ignore my tsconfig.json inside Visual Studio Code?

Question

I got my project setup like this

project/
|
+---src/
|   |
|   +---app/
|       |
|       sample.ts
|
+---typings/
+---tsconfig.json

and here's my tsconfig.json

{
    "compilerOptions": {
        "rootDir": "src",
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "sourceMap": true,
        "noImplicitAny": false,
        "outDir": "dist"
    },
    "exclude": [
        "node_modules",
        "src/assets",
        "src/lib"
    ]
}

What I'm wondering is, why does VSC indicate errors such as

when clearly there is no error at all ( "experimentalDecorators": true is set in tsconfig.json ), and the app transpiles just fine? And it's not just decorators, Promise and the like is highlighted as well (I made sure to have tsconfig.json in the same folder as typings and I got the typings for es6-shim installed).

Not sure if it matters, but I'm on typescript@2.0.0-dev.20160707 at the moment.

Answer 1

Short Answer

VS Code ignores your tsconfig.json when you use a newer version of TypeScript than the one that VS Code provides out of the box.

You are using TypeScript 2.0.0-dev.20160707 , so that is probably what is happening.

How to use a newer TypeScript version in VS Code

First , install TypeScript into your node_modules . Choose stable or nightly.

npm install typescript --save-dev // stable
npm install typescript@next --save-dev // nightly

Second , add the resultant lib relative path to your settings.json . That is, open settings.json in VS Code via File > Settings > User Settings, and add the following property.

{
  "typescript.tsdk": "node_modules/typescript/lib"
}

Note , if you installed TypeScript globally ( -g ) instead of into your project's node_modules , then adjust your typescript.tsdk location appropriately.

Third , make sure you have a valid tsconfig.json . Here is an example.

{
    "compileOnSave": false,
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "experimentalDecorators": true,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ],
    "filesGlob": [
        "src/**/*.ts",
        "test/**/*.ts",
        "typings/index.d.ts"
    ]
}

Documentation

VS Code ships with a recent stable version of TypeScript in the box. If you want to use a newer version of TypeScript, you can define the typescript.tsdk setting (File > Preferences > User/Workspace Settings) pointing to a directory containing the TypeScript tsserver.js and the corresponding lib.*.d.ts files. The directory path can be absolute or relative to the workspace directory. By using a relative path, you can easily share this workspace setting with your team and use the latest TypeScript version (npm install typescript@next). Refer to this blog post for more details on how to install the nightly builds of TypeScript. (emphasis added).

See also: https://blogs.msdn.microsoft.com/typescript/2016/01/28/announcing-typescript-1-8-beta/

Answer 2

Locate the folder typescript was installed to by npm , in my case this was:

C:\Users\<username>\AppData\Roaming\npm\node_modules\typescript\\lib

Among other files, there should be:

lib.d.ts
tsserver.js

inside. Now open settings:

File -> Preferences -> User Settings/Workspace Settings

This should open a file settings.json , add:

{
    "typescript.tsdk": "C:\\Users\\<username>\\AppData\\Roaming\\npm\\node_modules\\typescript\\lib"
}

(mind the double backslashes \\\\ ), save and - important - restart Visual Studio Code. Enjoy.

Answer 3

In my case, the problem was that my tsconfig.json was in the wrong place. It was in the .vscode folder, but it should have been up a level.

I noticed this when I clicked on my Typescript version in the bottom right corner and the VSCode menu told me that no tsconfig file was found and prompted me to create one.

Answer 4

i faced the same error, for me the problem was with the "include": [...] option, which was set incorrectly.(wasn't covering all the files in src folder)

Answer 5

In my case, the problem was that the .ts file I was editing was not included in the tsconfig.json .

I've added a new scripts/build.ts file and in tsconfig.json I had:

{
  include: ["src/**/*.ts"]
}

had to add:

{
  include: ["src/**/*.ts", "scripts/**/*.ts"]
}

Answer 6

Ensure that you do not have a jsconfig.json file or any other overwriting config file in your project. That solved the problem for me!

Answer 7

There is a trick that you may or may not have noticed. When you change tsconfig , it is not recognized by VS Code, and you have to restart TypeScript Server.

I was facing a similar case when I was working on merging 7 React apps into Turborepo monorepos, and was troubled by the fact that tsconfig/.eslintrc could not reflect in real-time when I made changes to them, so I built this small extension to monitor those config files and Restart TypeScript / ESLint servers Automatically . Hope it helps.

VS Code extension:

https://marketplace.visualstudio.com/items?itemName=neotan.vscode-auto-restart-typescript-eslint-servers