Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pick up tsconfig from non-top-level folder #815

Closed
3 tasks done
iam3yal opened this issue Jun 8, 2018 · 56 comments · Fixed by #2495 · May be fixed by #1734
Closed
3 tasks done

Pick up tsconfig from non-top-level folder #815

iam3yal opened this issue Jun 8, 2018 · 56 comments · Fixed by #2495 · May be fixed by #1734
Labels
💵 Funded on Issuehunt This issue has been funded on Issuehunt integ:typescript

Comments

@iam3yal
Copy link

iam3yal commented Jun 8, 2018

Issuehunt badges

  • 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:
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)

Submitted pull Requests


Become a backer now!

Or submit a pull request to get the deposits!

Tips

@minawalphonce
Copy link

I have the same problem

@lxfater
Copy link

lxfater commented Jun 17, 2018

I also suffer the same problem。

@jessehallam
Copy link

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

@ryanjaeb
Copy link

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
Copy link

@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
Copy link

mythz commented Jul 26, 2018

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
Copy link

d3v2a commented Jul 28, 2018

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
Copy link

kytosai commented Aug 16, 2018

I have same issue

@Daniel-Alderman77
Copy link

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
Copy link

kazazes commented Sep 8, 2018

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
Copy link

kazazes commented Sep 8, 2018

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
Copy link

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
Copy link

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
Copy link

I have the same problem.

@paleo
Copy link

paleo commented Nov 12, 2018

I have the same problem.

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

@kendallroth
Copy link

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
Copy link

lcc19941214 commented Nov 22, 2018

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
Copy link

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

@7sempra
Copy link

7sempra commented Dec 30, 2018

Modification of the workaround; avoids most duplication:

/tsconfig.json

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

@zhump
Copy link

zhump commented Jan 22, 2019

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

@RizziFrank
Copy link

RizziFrank commented Jan 22, 2019

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
Copy link

@RizziFrank The workaround falls apart in monorepos, unfortunately.

@Smilebags
Copy link

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?

@octref octref changed the title Vetur doesn't pick tsconfig.json? Pick up tsconfig from non-top-level folder Feb 13, 2019
@MaverickMartyn
Copy link

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
Copy link

issuehunt-oss bot commented Feb 2, 2020

@eyalsk has funded $20.00 to this issue.


@kbirger

This comment has been minimized.

@issuehunt-oss
Copy link

issuehunt-oss bot commented Feb 16, 2020

An anonymous user has funded $2.00 to this issue.


@issuehunt-oss
Copy link

issuehunt-oss bot commented Mar 2, 2020

@eyalsk has funded $25.00 to this issue.


@issuehunt-oss
Copy link

issuehunt-oss bot commented Mar 24, 2020

@egoist has funded $5.00 to this issue.


@bjufre
Copy link

bjufre commented Mar 30, 2020

Any updates????

@Minigugus
Copy link

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

@DarkLite1 DarkLite1 mentioned this issue May 11, 2020
3 tasks
@davidbludlow
Copy link

davidbludlow commented May 19, 2020

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
Copy link

issuehunt-oss bot commented Jun 15, 2020

An anonymous user has funded $10.00 to this issue.


@issuehunt-oss
Copy link

issuehunt-oss bot commented Sep 23, 2020

@morkro has funded $5.00 to this issue.


@fchu
Copy link

fchu commented Oct 1, 2020

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
Copy link
Member

Hi everyone,

If you interested this issue,

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

@nattyluke
Copy link

nattyluke commented Jan 6, 2021

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
Copy link

Minigugus commented Jan 6, 2021

@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
Copy link

maggie44 commented Mar 17, 2021

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.

@Zohar727
Copy link

I have the same problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💵 Funded on Issuehunt This issue has been funded on Issuehunt integ:typescript
Projects
None yet