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 [email protected] 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

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 3

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.