39

In VSCode, I get the error:

"Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning."

I can add the --experimentalDecorators flag to my tasks.json file to remove this error on build, but I can't seem to remove it from my intellisense or error list when I load VSCode.

Is there a way to do this?

15 Answers 15

44

I was having this same error. I added the following tsconfig.json file to my project root, restarted VSCode and it finally went away:

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "module": "amd",
        "target": "ES6" 
    }
}

UPDATE:

I've noticed that sometimes VS Code will not suppress this warning until you add a "files" array in your tsconfig.json, even an empty one will work. For me this has worked every single time now, if the message does not disappear, try the following:

{
    "compilerOptions": {
        ... 
    },
    "files": [],
    "exclude": [
        "node_modules"
    ]
}

Perhaps this will explain why everyone has mixed results?

11
  • 7
    Shouldn't the file be called jsconfig.json and not tsconfig.json? Mine only worked with the JS instead of TS.
    – Kalpers
    Commented Jan 1, 2016 at 18:20
  • 5
    Could not make this to work with tsconfig.json and jsconfig.json... (v0.10.11 linux-x64)
    – Dimanoid
    Commented Apr 4, 2016 at 16:30
  • 2
    no matter what setting i gave, it just wasn't going. had to go by @Wosi way
    – Vikram
    Commented Apr 5, 2016 at 19:58
  • 9
    I am using VS Code 1.3.1, and adding experimentalDecorators: true to tsconfig.json still does not get rid of this error. I am using typescript v1.8.10. other differences are module: commonjs and target: es5. Any ideas?
    – Jane Wayne
    Commented Jul 15, 2016 at 21:54
  • 3
    For me it was changing "target": "es5" to "target": "ES6" that resolved the issue.
    – C14L
    Commented Aug 28, 2016 at 16:51
34

VSC is by default looking at its own TS library and definition. If you're using a different version (which is very likely) you should point VSC to look for that versions definition.

In my settings.json file, i have the following set up:

// Place your settings in this file to overwrite default and user settings.
{
    "typescript.tsdk": "node_modules\\typescript\\lib"

}

I believe you can set this for either your User Settings or your Workspace Settings. So you can do a one time configuration in your User Settings or just for one project/workspace. This works if you have your typescript installed locally in the specified folder - which i believe is the default nodes module folder.

To edit your settings go to File/Preferences/User Setting or File/Preference/Workspace Settings.

UPDATE: Visual Studio Code just released a new version with better support for different versions of typescript. Check it out here: https://code.visualstudio.com/updates#_languages

3
  • 3
    This works great! If you are experiencing this problem w/ angular-cli using webpack, give this a try. angular-cli is using TypeScript 2.0 locally. Create a .vscode directory in the root of your project and add a settings.json file with this snippet. Commented Aug 22, 2016 at 23:23
  • 1
    Thank you! This finally solved the problem for me. PS. Just make sure you providing a correct relative path, it starts from the dir you opened in VSC. For me its "typescript.tsdk": "Apps/WebApp/node_modules/typescript/lib"
    – Dimanoid
    Commented Sep 21, 2016 at 12:38
  • 1
    Works great! You should mention that if you run a npm list typescript it will tell you how many versions you have installed, and if >1 you will need to 'tell it' explicitly which version to use.
    – benscabbia
    Commented Sep 22, 2016 at 5:21
16

I've to add the following in the settings.json file of vscode to remove the warning.

"javascript.implicitProjectConfig.experimentalDecorators": true

VSCode -> Preferences -> Settings

enter image description here

4
  • Please don't add the same answer to multiple questions. Answer the best one and flag the rest as duplicates, once you earn enough reputation. If it is not a duplicate, edit the answer and tailor the post to the question.
    – Rob
    Commented Mar 22, 2018 at 6:12
  • @Rob. Thanks for the info. Will do the same.
    – Manoj Paul
    Commented Mar 22, 2018 at 7:49
  • 1
    This worked for me. None of the previous answers did. Thank you @ManojPaul
    – Antuan
    Commented Feb 17, 2019 at 7:38
  • This setting has been deprecated in favor of js/ts.implicitProjectConfig.experimentalDecorators.(2)
    – JRichardsz
    Commented Dec 28, 2023 at 13:08
12

You could do it the hard way by deleting the lines which create the error in %code%\resources\app\plugins\vs.language.typescript\lib\tsserver.lib.

Look for the following code and delete it

            if (!compilerOptions.experimentalDecorators) {
              error(node, ts.Diagnostics.Experimental_support_for_decorators_is_a_feature_that_is_subject_to_change_in_a_future_release_Specify_experimentalDecorators_to_remove_this_warning);
            }
5
  • 1
    for the latest version (0.10.11 at the moment) path changed to resources/app/extensions/typescript/server/typescript/lib/tsserver.js
    – Dimanoid
    Commented Apr 4, 2016 at 16:28
  • 2
    I was also getting this error with a non-Visual Studio app (an angular app in javascript). In this case the file to fix is: node_modules/typescript/lib/tsserver.js
    – vt5491
    Commented Apr 6, 2016 at 3:06
  • @people Also note that in my case, I had to replace multiple lines like the above in the file.
    – Venryx
    Commented Nov 20, 2016 at 9:35
  • Just updated VSC; path changed now to: %code%\resources\app\extensions\typescript\node_modules\typescript\lib\tsserver.js
    – Venryx
    Commented Nov 26, 2016 at 10:00
  • I've been fighting with this for 6 months now, have tried basically everything, and this is the only thing that's ever worked for me. Thank you so much. Commented Feb 23, 2017 at 11:54
7

Struggling with this across two different Angular 2 final release projects, this is my solution.

tsconfig.json in the src fold.

{
    "compilerOptions": {

        "experimentalDecorators": true

    }
} 

AND

Add this setting to File->Preferences->User settings

"typescript.tsdk": "node_modules\\typescript\\lib"
1
  • 2
    Only thing that worked for me out of all solutions on the internet, but I have to add it to settings.json which can be opened from workspace settings Commented Dec 29, 2016 at 23:49
6

As other answers pointed out, your Visual Studio Code needs to find the tsconfig.json file.

I had the same problem. And it's mostly because I didn't realize the project structure.

(Hint: Read the text from top to bottom in the picture below).

Solution

  1. I had confused the tsconfig.json with the tsconfig.app.json.
  2. And I had opened the wrong folder in Visual Studio. As a result, the tsconfig.json was not in scope.

Simply opening the right root folder (i.e. the project folder, one level higher than the src.) solved the problem for me.

2
  • Thanks for this one!! I was opening src folder with VS Code so all I had to do is copy tsconfig.json to src.
    – Marius B
    Commented Sep 13, 2017 at 8:01
  • @MariusB actually, it's still better to open the folder one level higher, because you're not only missing out on the tsconfig.json but also on other files, such as the package.json, ... they all need to be in the root of your project. So, really, you don't want to open the src folder, but you actually want to open its parent.
    – bvdb
    Commented Feb 11, 2019 at 14:33
4

This helped me with React JS files (VSCode Version 1.9.1).

1) Put into tsconfig.json:

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true
    }
}

2) Restart VS Code.

Note: as Tim mentioned below, you need to add the tsconfig.json even if your not using TypeScript.

Source: https://ihatetomatoes.net/how-to-remove-experimentaldecorators-warning-in-vscode/

1
  • 2
    I've had success with this. Note you need to add the tsconfig.json even if your not using TypeScript.
    – Tim Arney
    Commented Mar 30, 2017 at 10:39
3

You can use "typescript.tsdk" in setting.json to change specific folder path containing tsserver.js and lib.ts files used by VSCode.

See this example: Can I use a relative path to configure typescript sdk?

note: You find setting.json in File > Preferences > User Settings.

1
  • I had to edit the file the @Wosi way, and then edit "typescript.tsdk" to point to the directory of the updated file to get things working.
    – vt5491
    Commented Apr 12, 2016 at 8:43
3

If you use Grunt (grunt-ts), you must also add "experimentalDecorators: true" as option in the file gruntfile.js .

Your file should look something like this at the end:

module.exports = function(grunt) {
  grunt.initConfig({
    ts: {
      default : {
        src: ["**/*.ts", "!node_modules/**"]
      },
      options: {
        experimentalDecorators: true
      }
    }
  });
  grunt.loadNpmTasks("grunt-ts");
  grunt.registerTask("default", ["ts"]);
};

For more information you can read documentation on github https://github.com/TypeStrong/grunt-ts#experimentaldecorators

2

In Visual studio code 1.3.1 my fix is in C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\typescript\server\typescript\lib\tsserver.js and comment out or delete the line.

if (!compilerOptions.experimentalDecorators) {
     error(node, ts.Diagnostics.Experimental_support_for_decorators_is_a_feature_that_is_subject_to_change_in_a_future_release_Specify_experimentalDecorators_to_remove_this_warning);
}
1

I was having same error i figure it out as this was i name component file extension as .js it should be .ts

2
  • Are you sure? .js is JavaScript whereas .ts is TypeScript which gets compiled into JavaScript. In principle that's the same
    – slfan
    Commented Aug 6, 2016 at 14:30
  • @slfan yes they may be same but i notice that my file is written in typescript and i named it with .js ext which is wrong it will not compiled when you name it with.ts then it compiled into javascript
    – AHSAN KHAN
    Commented Aug 7, 2016 at 8:55
1

Even when opening VSCode at the right level within your project you might still need an extra tsconfig file in your root. I now have a tsconfig in my project root (only containing php index and folders), ts folder (legacy typescript classes) and my src folder (vue components).

Don't forget to close the folder and to restart VSCode.

0

Please check you oppened in your VS Code the folder of the entire project and not only the src folder, because if you open only the src, then ts.config.json file will not be in scope, and VS will not recognize the experimental decorators parameters.

In my case this fixed all the problem

0

I already had experimental decorators enabled in tsconfig.json, so I was a bit baffled until I found this thread on GitHub where someone says to check the settings in VS Code.

So I went to File --> Preferences --> Settings and searched for experimental decorators and checked both of these settings: experimental decorators enabled in settings

Here are the details of my version of VSCode:

Version: 1.52.1 (user setup)
Commit: ea3859d4ba2f3e577a159bc91e3074c5d85c0523
Date: 2020-12-16T16:34:46.910Z
Electron: 9.3.5
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.18363
0

Below answer for VSCode version 1.60.12

  1. press "ctrl" + ",".
  2. type "settings.json".
  3. see this image to click on settings..
  4. paste "js/ts.implicitProjectConfig.experimentalDecorators":true --> See my settings for reference

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.