TypeScript, Vue and experimentalDecorators

5
votes

I've created a Vue project through Vue-CLI v3.0.0-beta.15, now, everything is working, I mean, when I do npm run serve it compiles and runs fine but TypeScript throws the following error message and only inside the editor!

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

The things I've tried and didn't work:

  1. I double check that the experimentalDecorators is set to true in my tsconfig.json file which Vue does by default.

  2. I tried to create a jsconfig.json file with the following options:

    {
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

  3. I tried to change the following options in VSCode "javascript.implicitProjectConfig.experimentalDecorators": true

Now, I'm using the Vetur extension with VSCode which I already posted an issue on their repo but I don't use any extensions with Visual Studio for Vue and yet I get the same error so I don't know what triggers it but I think that something doesn't pick the tsconfig.json file.

Here are the steps I've taken to generate the project:

  1. mkdir experiment && cd $_
  2. npm init
  3. npm install -D @vue/cli
  4. ./node_modules/.bin/vue create dashboard

  5. I've used the following options:

    • Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
    • Use class-style component syntax? Yes
    • Use Babel alongside TypeScript for auto-detected polyfills? Yes
    • Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
    • Pick a linter / formatter config: TSLint
    • Pick additional lint features: Lint on save
    • Pick a unit testing solution: Mocha
    • Pick a E2E testing solution: Cypress
    • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
    • Save this as a preset for future projects? No

  6. Then navigate to dashboard/src/views/Home.vue

That's how it looks like in Visual Studio:

enter image description here

And that's how it looks like in VSCode:

enter image description here

2
typescriptvue.jsvisual-studio-codevetur
I'll just throw this one in from memory, but I had a similar error some weeks bakc, with an not updated version of vetur from code marketplace. To be more specific, check your %UserProfile%\.vscode\extensions\vetur\vetur\package.json, check the dev-dependencies (last in the file and compare to github.com/vuejs/vetur/blob/master/package.json (tslint version I think) - ippi
Will try that soon. :) - Eyal Alon

2 Answers

5
votes

Have you seen this post ?

Maybe you should try : Go to File => Preferences => Settings (or Control+comma) and it will open the User Settings file. Add "javascript.implicitProjectConfig.experimentalDecorators": true

EDIT :

Ok so in your first exemple you have opened your project in the experiment directory, but the tsconfig.json is located in a sub directory, the tsconfig must be in the root directory. try to open vscode with dashboard as the root folder of your vscode project and restart your editor.

2
votes

As it turns out I had to create jsconfig.json at the root of the folder where the tsconfig.json file is and the error in Visual Studio goes away but VSCode still displays the error regardless to the options I've set but this seems like it's a Vetur bug as opposed to a bug in VSCode, TypeScript or a configuration issue.

Opening the Dashboard folder as opposed to the Src folder which is the actual root of my project "fixed" the problem in VSCode so I guess that Vetur doesn't pick the tsconfig.json file when it's nested.