Comments (15)
Interesting. I have versions 0.31.1 for both. I even disabled all other extensions and restarted Visual Studio Code. I'm on Windows, but that shouldn't matter.
Curious - does it work if you disable TypeScript Vue Plugin?
Hmm... When I tried it, I found something different from what I expected. Even if I disabled the TypeScript Vue Plugin, importing *.vue files in App.vue
worked.
However, importing vue files in main.ts
doesn't work.
The following can be inferred from these.
- If you want to import a vue file inside a vue file, you don't need the TypeScript Vue Plugin (Volar). It's taken care of by Vue Language Features (Volar).
- If you want to import a vue file inside a ts file, you need the TypeScript Vue Plugin (Volar).
I'm not sure why importing from vue files isn't working only in the pholly environment. But in any case, this is likely to be in the Volar side, not the create-vue side.
So I think it would be better to send this issue to Volar's issues.
My Environment
- OS: Windows 10
- Visual Studio Code x64 v1.63.2
- running in portable mode (to eliminate the effects of user settings and other extensions)
- Extensions:
- TypeScript Vue Plugin (Volar) v0.31.1
- Vue Language Features (Volar) v0.31.1
from create-vue.
Volar alone is not enough for the latest templates.
Please install TypeScript Vue Plugin (Volar) or enable Volar's takeover mode.
For more details, see #26
from create-vue.
I tried TypeScript Vue Plugin along with Volar and I still get the error. I'll look into that issue you referenced and try Take Over Mode. Do root paths using @
work for you with just Volar and TypeScript Vue Plugin? Again, the app builds and runs just fine. It's just I get that red line error in Visual Studio Code.
from create-vue.
I followed the instructions in the README of my scaffolded project to enable Take Over Mode. After restarting the window, I saw the alert saying Take Over Mode is enabled. I still get the error on @
root syntax imports. I tried disabling TypeScript Vue Plugin (Volar) and still get the error.
Thanks for any assistance.
from create-vue.
Have you disabled Vetur? Do you have a screenshot of the error?
from create-vue.
from create-vue.
Seems like the typescript in VS Code doesn't like file extensions ending with .vue
.
I followed the advice in this stackoverflow thread and it's now working for me.
I've created a demo repo that can hopefully reproduce the error. Also getting a bunch of eslint prettier errors off the bat which doesn't make for very good DX but that's a separate issue.
https://github.com/richardvanbergen/test-repo-vue-project
Reproduction steps
- Download repository and
cd test-repo-vue-project && yarn
- Open in VS code
- Open src/router/index.ts
- See the errors in the screenshot
Workaround / fix
- Open
src/shims-vue.d.ts
- Uncomment line 1
Other information
VS Code typescript version: 4.5.4
Installed extensions (some may be disabled): https://gist.github.com/richardvanbergen/b4b350b349a9ad3404db6462fb58a778
from create-vue.
@sodatea @pholly
I tried the reproduction procedure, but I couldn't reproduce the same phenomenon in my environment.
This may or may not occur depending on the environment, so I think it will be a problem on the TypeScript Vue plugin (Volar) side.
from create-vue.
@tetradice Interesting. I have versions 0.31.1 for both. I even disabled all other extensions and restarted Visual Studio Code. I'm on Windows, but that shouldn't matter.
Curious - does it work if you disable TypeScript Vue Plugin?
from create-vue.
Still can't reproduce… Are you creating the project in a monorepo?
from create-vue.
@richardvanbergen You didn't have TypeScript Vue Plugin (Volar) installed.
from create-vue.
@richardvanbergen You didn't have TypeScript Vue Plugin (Volar) installed.
Haha yes thanks I have just figured that out. Is there any reason it's split into two?
from create-vue.
Is there any reason it's split into two?
Before 0.27.22 it was integrated into Volar (with an option to turn it on/off).
But due to VSCode restrictions, the status of the language server plugin can't be persisted. Users must manually re-enable the plugin every time Volar updates.
By splitting it into a separate plugin, you can simply enable/disable the plugin to turn on/off this feature.
from create-vue.
@tetradice that's a good find. I can confirm that with the Typescript Vue Plugin (Volar) @
root paths work in .ts files.
Not sure why root path imports aren't recognized for me inside .vue files even when I have Vue Language Features (Volar). I uninstalled and reinstalled just to be sure.
I'll take up an issue with Volar's repo. Thanks for your help!
from create-vue.
Closing as the issue has been resolved in Volar's repo.
from create-vue.
Related Issues (20)
- type-check reports errors twice HOT 2
- [plugin:vite:import-analysis] Failed to resolve import "assets/logo.svg" from "src/App.vue". Does the file exist? HOT 3
- Use Pinia in an app created with Pinia HOT 2
- How is this different from `npm create vite@latest -- --template vue`? HOT 2
- Module generates eslint config with the old commonJS syntax HOT 8
- Remove “Vue.vscode-typescript-vue-plugin” HOT 1
- Vite Plugin I Vue DevTools HOT 4
- How to set up TS configuration to use ES2021 features ? HOT 4
- regression: flags are not interpreted correctly in v3.10 when creating project HOT 2
- cannot find module using @ absolute path syntax Visual Studio Code HOT 5
- Add ESLint run-on-save VSCode settings HOT 3
- create vue project error . TypeError: (0 , import_node_util.parseArgs) is not a function HOT 5
- vue template script buggy HOT 2
- TS2307: Cannot find module '@/components/echarts' or its corresponding type declarations. HOT 8
- Add Issue templates HOT 1
- Add PR template HOT 1
- Cannot find base config file "@vue/tsconfig/tsconfig.dom.json" [tsconfig.json] HOT 14
- The e2e tests in the subfolders under e2e/ are being executed by vitest
- ESLint v9 support HOT 1
- Windows 10 bun type error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-vue.