VSCode loses tsconfig settings

[waderyan]

From @sam-s4s on August 19, 2016 0:6

• VSCode Version: 1.4.0
• OS Version: Windows 10

I'm working with Angular2 and Typescript, and VSCode often loses my tsconfig. The file is still there in the explorer, but its settings are ignored.

For example, it will give me this error on my AppComponent class (which has a Component decorator)...

[ts] 
Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
class AppComponent

And also, in my pollyfills.ts file, I'm doing a require('zone.js/dist/zone.js'); and I get the following error:

[ts] 
Cannot find name 'require'.
any

But, as you can see, my tsconfig.json is as follows:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "strictNullChecks": false
    },
    "awesomeTypescriptLoaderOptions": {
        "useWebpackText": true
    }
}

My directory structure is as follows:

root/
root/package.json
root/tsconfig.json
root/typings.json
root/webpack.config.js
root/app/polyfills.ts
root/app/main.ts
root/app/app.component.ts
root/app/index.html

I'm not sure if it's at all related to the fact that I have awesomeTypescriptLoaderOptions following compilerOptions, and VSCode is getting confused?

I have found that sometimes if I modify or remove and re-add the tsconfig.json file, VSCode will then pick everything up correctly - but then at some point later (in this case it was about 15 minutes, no restarts of the app) it will decide to drop everything again...

Copied from original issue: microsoft/vscode#10683

[waderyan]

ping @dbaeumer any ideas here?

I have confirmed OP's setup is correct, although I am new to awesome typescript loader.

[waderyan]

From @dbaeumer on August 22, 2016 9:4

@sam-s4s if your project is based on https://github.com/AngularClass/angular2-webpack-starter then you need to tell VS Code that you want to use TS from the node_modules folder of the workspace folder. Angular2 webpack project don't work with TS 1.8.10 due to module resolving issues. You can instruct VS Code to use the TS from the local node_modules folder using the following setting: "typescript.tsdk": "./node_modules/typescript/lib"

[waderyan]

From @sam-s4s on August 23, 2016 22:57

I have my own custom webpack setup, but it is similar, including Typescript 2.

I will try adding that setting in...

I'm a little unsure how that should affect the IDE though... and that it sometimes works and sometimes doesn't is strange...

[waderyan]

From @christiandreher on August 31, 2016 14:7

I am facing the same issues. Adding "typescript.tsdk": "./node_modules/typescript/lib" to .vscode/settings.json did not help
I am using typescript@2.0.0

[waderyan]

From @dbaeumer on September 1, 2016 7:51

@sam-s4s @christiandreher do any of you have a test case that demonstrates the behavior that we can clone from?

[waderyan]

From @christiandreher on September 1, 2016 8:30

@dbaeumer With the help of another issue I unfortunately don't remember anymore I found out that a simple restart can solve the problem. A complete system reboot, restarting VSCode was not enough. So I think that supplying a repo won't help, since this seems to be closely system related. Or did I misunderstood you?

[waderyan]

From @sam-s4s on September 2, 2016 1:49

@dbaeumer For me, I'm using Angular2, so my test case was literally the quickstart :)

https://angular.io/docs/ts/latest/quickstart.html

[waderyan]

From @ijager on November 20, 2016 19:16

I have the same problem with this Angular2-Meteor boilerplate project using Typescript 2.0.0.

Seems like VSCode just ignores the projects tsconfig most of the time, as it keeps complaining about ExperimentalDecorators..

Here is the tsconfig.json from that project:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "typings.d.ts"
  ],
  "compileOnSave": false,
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit": true
  }
}

I noticed the files property effects this behaviour. When I remove the "files" key value pair altogether and restart VSCode, it will not complain about ExperimentalDecorators, however my project does not build in Meteor.. so I need it there, since I need the typings.
I found out that I can 'fix' it by adding another file, for example client/main.ts, to the files array like this:

"files": [
    "typings.d.ts",
    "client/main.ts"
  ],

Now after reloading VSCode, ExperimentalDecorators are allowed. I am not sure why that would matter, but it works..
However when creating a new Typescript file, it will complain again for that file, until I restart VSCode.

The weird part is that using the exact same compiler with Meteor just works, and the project builds and runs just fine.

• VSCode Version: Code 1.7.1 (02611b40b24c9df2726ad8b33f5ef5f67ac30b44, 2016-11-03T13:46:00.226Z)
• OS Version: Darwin x64 16.1.0

[waderyan]

From @bfricka on December 1, 2016 23:5

I have the same issue, although it's not specific to VSCode. For me, this was happening for a new project I created (from scratch) in WebStorm. I thought it might be an issue w/ their recent 2016.3 update, so I tried VSCode and got the same errors.

Originally I had my project set up similar to the angular/angular repo, where there was a tsconfig.json inside the sources directory (as opposed to the base repository), along with a separate package.json in that directory. This is specifically to define peerDependencies and allow for clean building. To work locally, I had tsconfig paths mapped similar to how angular/angular is doing it as well. Thus my structure looked something like this:

base/
    package.json (contains dependencies for working locally)
    src/
        package.json (contains peerDependencies, identical to base dependencies)
        tsconfig.json
        *.ts files

This is what my tsconfig.json looked like in the src directory:

{
  "compilerOptions": {
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["dom", "es5", "es6", "es2016.array.include"],
    "module": "es6",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "outDir": "./dist",
    "paths": {
      "@angular/*": ["../node_modules/@angular/*"],
      "@ngrx/*": ["../node_modules/@ngrx/*"],
      "lodash/*": ["../node_modules/lodash/*"],
      "rxjs/*": ["../node_modules/rxjs/*"]
    },
    "removeComments": false,
    "rootDir": ".",
    "skipLibCheck": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "stripInternal": true,
    "target": "es5"
  },
  "files": ["./index.ts", "./vendor.d.ts", "../typings/index.d.ts"]
}

Running tsc from src would build and emit fine, so there was no help from, for example, --traceResolution (since it was working). I thought it must be an issue with the TypeScript service that WebStorm uses, so I tried VSCode and found the same issue.

BTW, this issue for me makes TypeScript IDE tooling nearly useless, since I'm relying on resolving multiple modules (which can't be found), as well as the use of the "libs" property, which means no types for ES6 constructs (e.g. generic Promise types).

When I found this thread, I noticed that getting rid of "files" worked for some, but it's not only "files". Trying to define "include" causes the same failure. However, removing them both fixed the issue IDE issue for me as well.

Unfortunately, I need to define my files, and I figured that, in my case at least, it must have something to do with the way I have my folders / files structured. So I moved the tsconfig.json down to the base directory, and stripped out the "paths" and "rootDir" and modified any references accordingly (e.g './index.ts' -> './src/index.ts').

This alone didn't work. I then tried copying nearly the whole schema from a known working project, and here is the result: I had to change "files" to "include". I also had to change change my references for ['./src/vendor.d.ts', './src/index.ts'] to: ['./src/**/*.ts']. The typings reference was fine.

With this finding I went back to my old config (in src) and modified it to match the "include" format mentioned in the last paragraph, and for now at least, it's working like that.

I have zero clue why this works, where the others don't, nor why there is this discrepancy between tsc and the TypeScript service used for tooling in these editors. Either way, this config works in both VSCode and WebStorm. Sorry so long, and I hope this helps someone.

• VSCode Version: 1.7.2 (1.7.2)
• TypeScript v2.0.8 & v2.0.10 (tried both)
• OS Version: macOS 10.12.1 (16B2555) Darwin 16.1.0

[waderyan]

@bfricka thank you for opening this issue. Looks like this means were seeing this issue from the TypeScript language service. Migrating this issue to that repo to pick up the discussion and get help from their engineers.