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.