Pick up tsconfig from non-top-level folder

[iam3yal]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

Version 1.24.0
Commit 6a6e02cef0f2122ee1469765b704faf5d0e0d859
Date 2018-06-06T17:35:40.560Z
Shell 1.7.12
Renderer 58.0.3029.110
Node 7.9.0
Architecture x64
OS: Version: Windows 10.0.17134 Build 17134
Vetur version: 0.12.5

Problem

Error:
{
"resource": "/d:/Users/Eyal/Projects/Clients/DigitalTV/Web/experiment/dashboard/src/views/Home.vue",
"owner": "generated_diagnostic_collection_name#0",
"code": "undefined",
"severity": 8,
"message": "Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.",
"startLineNumber": 17,
"startColumn": 22,
"endLineNumber": 17,
"endColumn": 26
}

Image:

tsconfig.js file

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "node",
      "mocha",
      "chai"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "es2015",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Reproducible Case

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. code .

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

---

IssueHunt Summary

Backers (Total: $279.00)

• eyalsk ($50.00)
• issuehunt ($200.00)
• ryanjaeb ($5.00)
• egoist ($5.00)
• morkro ($5.00)
• $14.00 have been anonymously funded.

Submitted pull Requests

• #1734 Subfolders and tsconfig support

---

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[minawalphonce]

I have the same problem

[lxfater]

I also suffer the same problem。

[jessehallam]

I also have this problem. See this ticket for a repo which experiences this issue.

[ryanjaeb]

I'm running into this while experimenting with ASP.NET Core + Vue. A common project layout would put a Vue project inside a .NET Core project. Here's a stripped down repo layout:

C:.
│   .gitignore
│   RyanJaeb.Vetur815.sln
│
└───src
    └───RyanJaeb.Vetur815.Web
        │   RyanJaeb.Vetur815.Web.csproj
        │
        └───vue-client
            │   package.json
            │   tsconfig.json
            │
            ├───public
            │       index.html
            │
            └───src
                    App.vue

I know there are some limitations when it comes to handling multiple Vue projects in the same repo, but, for cases like the one above, there's only one Vue project and one tsconfig.json. Would it be possible for Vetur to figure out that my Vue project root is in a sub-directory in those cases?

My preferred layout would separate the Vue client and .NET Core projects completely, but most editors / IDEs struggle with it:

C:.
│   .gitignore
│
├───dotnet-core-api
│   │   RyanJaeb.Vetur815.sln
│   │
│   └───src
│       └───RyanJaeb.Vetur815.Web
│               Program.cs
│               RyanJaeb.Vetur815.Web.csproj
│               Startup.cs
│
└───vue-client
    │   package.json
    │   tsconfig.json
    │
    ├───public
    │       index.html
    │
    └───src
            App.vue

#424 might be a practical option for that type of layout, but when there's only one tsconfig.json it would be really awesome if I could open the directory with VSCode / Vetur and have everything work automatically.

[jessehallam]

@ryanjaeb It seems to me that Vetur should adopt the same logic as TS itself: Navigate up the tree, one level at a time, until a tsconfig.json file is discovered.

Instead it seems to be using the opposite logic of starting at the project root and looking for a tsconfig. If one isn't found, it kacks out.

[mythz]

I have a folder structure that looks like:

.vscode/
MyApp/
    node_modules/
    src/
        tsconfig.json      // contains "experimentalDecorators": true
MyApp.sln

Every time I open a .Vue SFC I get the same "Set the 'experimentalDecorators' option to remove this warning" error message reported here, I've tried adding in both by VSCode's User Settings and Workspace Settings:

"javascript.implicitProjectConfig.experimentalDecorators": true

The only way I've been able to get rid of these error messages is to place a dummy tsconfig.json at the root of my project folder:

/tsconfig.json

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

Reiterating @jessehallam comment above, it would be nice if vetur could instead resolve the closest tsconfig.json it can find from the .vue SFC it's analyzing.

[d3v2a]

for me it's not exactly the same problem but if vue project is not in the root of vscode project there no inteliSence ... i have to open a new vscode and open vue project as root and all work great

[kytosai]

I have same issue

[Daniel-Alderman77]

I also have the issue where I have /backend and /frontend at the root level. Creating a dummy tsconfig.json like @mythz said fixed the issue for me.

[kazazes]

This is a particularly tough issue to deal with in monorepo workspaces, polluting the root of a shared project with a dummy tsconfig.json isn't possible in most cases.

[kazazes]

The fix also doesn't seem triviable; Vetur only searches the workspace root for ts configurations.

Adding a VSCode option to specify Vetur project root(s) would work.

[RizziFrank]

I ran into this issue because I'd used the Vue CLI to create my project. It creates the project folder below the folder I'm in. Because of this I had the parent folder open in VSCode as the root, so the tsconfig.json file wasn't the root of what I had open with VSCode. Closing that folder and re-opening the child folder fixed this issue. The reason for the issue was the same as @mythz described.

Don't forget to move the .vscode, if you have one.

[alperencaliskan]

I had mentioned that issue here #349 with a small modification to overcome this problem. https://github.com/vuejs/vetur/pull/349/files
I am using this like for a year.

Latest binary is here
https://github.com/alperencaliskan/vetur/releases/tag/0.13.0-tsconfig-fix

[xiaocongWang]

I have the same problem.

[paleo]

I have the same problem.

A solution is given above: #815 (comment) .

[kendallroth]

Unfortunately the mentioned solution does not work for me. I am not using TypeScript in the project so I used a jsconfig.json file instead (but also tried tsconfig.json). No matter where I put the file, or what value I set the implicit value to, I cannot get the errors to go away. In normal JS files, however, there is no error (as expected).

I have been unable to test whether the file actually has a project configuration, as I appear to have no > JavaScript: Go to project configuration options in the command palette.

[lcc19941214]

for me it's not exactly the same problem but if vue project is not in the root of vscode project there no inteliSence ... i have to open a new vscode and open vue project as root and all work great

This really really helps!
As for me, modifying javascript.implicitProjectConfig.experimentalDecorators and tsconfig.json and restarting vscode had no effect. For I opened my vue + ts project under another one is vscode.

[FlorianWendelborn]

Are there any plans to fix this issue? It pretty much makes using typescript impossible with vetur.

[7sempra]

Modification of the workaround; avoids most duplication:

/tsconfig.json

{
  "extends": "./path/to/real/tsconfig.json"
}

[zhump]

Are there any plans to fix this issue? It pretty much makes using typescript impossible with vetur.

[RizziFrank]

Are there any plans to fix this issue? It pretty much makes using typescript impossible with vetur.

Agreed. But in the mean time, make sure not to miss @7sempra 's workaround. That's been working for me in the interim.

[FlorianWendelborn]

@RizziFrank The workaround falls apart in monorepos, unfortunately.

[Smilebags]

Putting a file in some place vetur is expecting it seems like a workaround rather than a solution. Is there any better way to resolve this yet?

[MaverickMartyn]

Just here to state my support for this.
We really need this, as many "standard-ish" project structures in templates, have the tsconfig in a subfolder. I am for example working on a TypeScript Vue app, in which all config files are in the /src/ subdirectory.
A simple setting to define a custom location of a per workspace basis would be great.

[issuehunt-oss]

@eyalsk has funded $20.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss]

An anonymous user has funded $2.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss]

@eyalsk has funded $25.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss]

@egoist has funded $5.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[bjufre]

Any updates????

[Minigugus]

What about #1734 ? It's ready for almost 2 months now 😦

[davidbludlow]

A workaround that probably works in cases where the problem is caused by using a vscode workspace with one Vue project and some other not-Vue projects: #424 (comment)

[issuehunt-oss]

An anonymous user has funded $10.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[issuehunt-oss]

@morkro has funded $5.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[fchu]

For what's worth, a similar issue arose for the ESlint Extension for vscode: microsoft/vscode-eslint#196.

Their solution was to detect based on package/eslintrc file locations, with a fallback that allows the user to explicitly name the working directories.

I guess it's a tempting assumption to think that "vscode project folder", "git root folder", and "npm project folder" are often the same, but it's an incorrect one.

[yoyo930021]

Hi everyone,

If you interested this issue,

you can go to #2377 and #2378.
View and post your ideas.

[nattyluke]

Best way for monorepos at the moment may be a vetur.config.js like:

module.exports = {
    projects: [
      {
        root: './frontend', //root of subproject
        package: './package.json', // It is relative to root property.
        tsconfig: './tsconfig.json',  // It is relative to root property.
      }
    ]
  }

Source: https://vuejs.github.io/vetur/reference/

[Minigugus]

@nattyluke Could have been nothing at all with #1734... Maybe it's not too late (behind a property for instance)?

I said Could have been nothing at all because of the following comment:

But it's practically impossible now and unnecessary to have multiple tsconfig.json in a Vue project. The only thing you're experiencing is that the files are in the wrong place. #2377

In response to #2377 (comment).

[maggie44]

Went around in circles on this one. Seems there was a solution to the issue I was having based on the merged pull request above: https://vuejs.github.io/vetur/guide/setup.html#advanced

Posting here in case others come across this thread as I did.