Giters

vuejs / vetur

Vue tooling for VS Code.

Home Page:https://vuejs.github.io/vetur/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Pick up tsconfig from non-top-level folder

iam3yal opened this issue · comments

commented

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

commented

I have the same problem

commented

I also suffer the same problem。

commented

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

commented

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.

commented

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

commented

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.

commented

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

commented

I have same issue

commented

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.

commented

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.

commented

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.

commented

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.

commented

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

commented

I have the same problem.

commented

I have the same problem.

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

commented

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.

commented

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.

commented

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

commented

Modification of the workaround; avoids most duplication:

/tsconfig.json

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

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

commented

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.

commented

@RizziFrank The workaround falls apart in monorepos, unfortunately.

commented

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?

commented

I am also experiencing this problem in .vue files in a monorepo using Vetur 0.16.2. My current workaround is to open each package as a root in a VSCode workspace.

commented

If I move the tsconfig.json file anywhere else but in the root my TS script won't build.
The only issue is the experimental decorators.

commented

What is the status on fixing this?

commented

I enabled experimentalDecorator by default in #1289. I don't think picking tsconfig.json from non-top folder is easily doable.

commented

@octref Why not apply it to directories that have vue.config.js or some other vue file?

commented

@octref

I don't think picking tsconfig.json from non-top folder is easily doable

Hm.. and what you think about providing user an option where he can explicitly set project directory? Eslint plugin for vscode does similar thing with their eslint.workingDirectories option

commented

@MichaelMitchellM don't know if that would help but @sqal suggestion is really good imo.

commented

In VSCode's User Settings

"javascript.implicitProjectConfig.experimentalDecorators": true

and

/tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"allowJs": true
}
}

Works fine for me! Thank you @mythz!!

commented

@sqal That's a choice, but it might lead to other failures such as Vetur cannot resolve local modules (prettier, typescript, etc).

The problem is Vetur cannot handle multiple tsconfig.json yet (need more TS glue code). Ideally if you have /a/tsconfig.json and /b/tsconfig.json, they would apply to js/ts/vue files in /a and /b respectively.

But as of now, Vetur can only resolve one set of ts configurations.

commented

I enabled experimentalDecorator by default in #1289. I don't think picking tsconfig.json from non-top folder is easily doable.

If TypeScript and a bunch of other software does it, why can't Vetur? It seems like this package is the odd man out here, if everyone else is using a common algorithm for detecting the tsconfig.

commented

This is the most upvoted open issue and quite some work to implement correctly, while keeping perf issues under control and not breaking existing functionalities.

With that said, I'll work on it. I mostly spend 5 hours of evening / weekend time on Open Source. If you want to see more progress, you can try funding this issue on IssueHunt.

commented

@eyalsk has funded $5.00 to this issue.

commented

@issuehunt has funded $200.00 to this issue.

commented

@ryanjaeb has funded $5.00 to this issue.

commented

I had a glance at the Vetur source code, and I feel it is not that easy to switch to a specific tsconfig file according to the opened file...
However there could be a simple workaround in allowing the user to define a custom path to the file. It would not solve the problem of monorepos with multiple Vue packages, but would solve the problem of monorepos with one single Vue package.
What do you think?

commented

An anonymous user has funded $2.00 to this issue.

commented

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.

commented

@eyalsk has funded $20.00 to this issue.

commented

I've decided to decouple my project from Vetur by using vue-template-loader. No more glitches, no more custom parsers and formatters which are slower. SFCs are a bad idea in my opinion for a big project anyway

commented

An anonymous user has funded $2.00 to this issue.

commented

@eyalsk has funded $25.00 to this issue.

commented

@egoist has funded $5.00 to this issue.

commented

Any updates????

commented

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

commented

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)

commented

An anonymous user has funded $10.00 to this issue.

commented

@morkro has funded $5.00 to this issue.

commented

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.

commented

Hi everyone,

If you interested this issue,

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

commented

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/

commented

@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).

commented

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.