One step faster for Vite in VS Code ⚡️
Home Page: https://marketplace.visualstudio.com/items?itemName=antfu.vite
One step faster for Vite
npm i yarn pnpm i) when opening a fresh project
This project is part of my Sponsor Program.
MIT
Hi.
I have the extension and it opens a browser on my vitesse fork perfectly but im kind of stumped as to how i can make it open automatically in another project.
Anyone?
sorry if this is kind of a dumb question...
My repository root is at location /work
The app using Vite is at /work/app
I tried setting the base path for opening the app (Base path for open the app) to /work/app but that didn't work as it still thinks that it should start in /work instead of /work/app
I tried changing the setting "Vite: Dev Command" to cd /work/app && npm run dev. It now does something but now it shows the following error:
[vite] Internal server error: Failed to resolve entry for package "/work/app". The package may have incorrect main/module/exports specified in its package.json.
However, running npm run dev in directory /work/app works just fine.
Note that the VS Code workspace is the root of the local clone. That directory is /work.
I've run out of ideas what else to try. Any and all suggestions would be very much appreciated!
As per https://code.visualstudio.com/api/working-with-extensions/publishing-extension#marketplace-integration a CHANGELOG.md file would be automatically used as the changelog on the extensions page.
It's very useful - I never update an extension until I know what is being changed, and with your extensions I alway shave to manually go to github and read the commits. It would be much easier with a changelog file.
An option would be to use https://github.com/lob/generate-changelog (or something like it) to make it easier?
After start vite from VSCode it stops after 3 or 5 seconds (without any key pressed)
AddOn version : Vite v0.2.5
If I start from terminal, inside or outside VSCode (npx vite --port=8080) it works just fine, just fail if I start from addon
Any ideia ???
Currently this extension doesn't seem to recognize individual test.each test cases. For example:
describe("something", () => {
test.each([
{ text: "bar", expected: "zoo" },
{ text: "moo", expected: "arf" },
])(
"should properly parse '$expected' from '$text'",
({ text, expected }) => {
expect(foo(text)).toEqual(expected)
}
);
});For this test you will get an option to run/debug the describe block (works) and also the overall test function. If you click run/debug on the overall test function all the individual test cases are skipped. I think this is because the test runner is filtering on the template string: `-t some.module.spec should properly parse '$expected' from '$text'``
Sometimes the test statuses in the sidebar also hang, I believe when they contain a test.each or it.each.
Add support for test.each / it.each, bot in the sidebar and in the run/debug breadcrumbs.
No response
No response
Any plans to publish your great addons to the the Open VSX Registery?
Why:
Microsoft don't allow other editors to use the Visual Studio Marketplace and its addons therefore forks like VSCodium, code-server, and even the default VS Code version provided by major distributions package managers is actually a fork of VS Code, since the binary releases of it aren't released under a free license.
Open-VSX was born to host plugins written in the VSX format that can be used by any IDE that uses that format, notably Theia IDE which powers GitPod and possibly others, plus the ones I mentioned above.
This means more people will be able to use your plugins on different platforms. ^^
Edit: yes we can download the VSX but it can get tiresome since there would be too many plugins to update and have to check for updates by visiting each plugin's page regularly
When you open a project using vitepress, it starts automatically, but it starts at some point and then stops.
I didn't give a stop command such as Ctrl+C, but it doesn't progress while asking if I want to stop the command.
But using npm run dev in terminal is not a problem.
It just happens at startup, and even if you start by clicking the bite press icon at the bottom, the same happens after about 10 seconds.
System:
OS: Windows 10 10.0.22621
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
Memory: 20.43 GB / 31.73 GB
Binaries:
Node: 16.19.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.1413.0), Chromium (111.0.1661.44)
Internet Explorer: 11.0.22621.1npm
I am using the workspace vscode, but the status bar does not show vite options
Currently, we have these two options
The default package manager is NPM and to change it PNPM I have to change both these options.
It would be great if the package manager can be selected based on the .lock file. But if that is too complex just add another option to change the package manager
It would be great if the package manager can be selected based on the .lock file
No response
Coming from Vetur + Quasar to Volar + Vite VSCode plugin + Vitesse and I absolutely love how much more stable (and less fussy) this setup is.
With Vetur, we were able to configure settings for where certain config files and directories were (relative to the project), specifically for monorepos.
I'm currently using a pretty standard monorepo + "workspace" setup --> so the Vite plugin in VSCode cannot correctly find my vite.config.ts file or correctly "read" that this is a Vite project (to get the benefit of automatically starting the server, using the embedded browser view, and debug tools...etc).
I've not been able to find source code or documentation for configuring this plugin to work if I have the following monorepo setup.
├── README.md
├── TODO.md
├── amplify
│ ├── #current-cloud-backend
│ │ ├── amplify-meta.json
│ │ ├── auth
│ │ ├── backend-config.json
│ │ └── tags.json
│ ├── backend
│ │ ├── amplify-meta.json
│ │ ├── auth
│ │ ├── backend-config.json
│ │ └── tags.json
│ ├── cli.json
│ └── team-provider-info.json
├── amplify.yml
├── cz.yaml
├── node_modules
├── package.json
├── packages
│ └── client
│ ├── LICENSE
│ ├── README.md
│ ├── android
│ ├── capacitor.config.json
│ ├── components.d.ts
│ ├── dist
│ ├── generateCapacitorConfig.js
│ ├── index.html
│ ├── ios
│ ├── locales
│ ├── node_modules
│ ├── package.json
│ ├── pnpm-lock.yaml
│ ├── public
│ ├── src
│ ├── tsconfig.json
│ ├── vite.config.ts
│ └── windi.config.ts
└── pnpm-workspace.yaml
It will be so nice :)
Is there a specific reason for vscode-vite to use a terminal instead of a task? It seems more reasonable to me to use a task, pretty much like other extensions do (ie, prettier, docker, windicss intellisense, etc).
It's a bit confusing to me to see a new terminal process invoked by the extension, specially if I'm able to manually control it.
I could help with a MR if you were willing to change it.
Thanks!
When use Vite 5.0 vue-ts template and vscode-site 0.2.5, it will try to close(Ctrl+C) after a while.
https://stackblitz.com/edit/vitejs-vite-stmbrn?file=index.html&terminal=dev
System:
OS: Windows 10 10.0.19045
CPU: (12) x64 Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz
Memory: 5.34 GB / 15.75 GB
Binaries:
Node: 18.4.0 - C:\Program Files\nodejs\node.EXE
npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (119.0.2151.72)
Internet Explorer: 11.0.19041.1566npm
vite 图标消失，记得以前在runner旁就有个绿了吧唧得按钮，最近安装vite使用居然没有了，重新安装vscode和插件都没有，状态栏也没有。
但vite是可以用的，需要快捷键，很不方便。
如果能够解决十分感谢！！
google translate above.
12312
System:
OS: Windows 10 10.0.22621
CPU: (4) x64 Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz
Memory: 1.60 GB / 7.88 GB
Binaries:
Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.6.12 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Spartan (44.22621.2134.0), Chromium (116.0.1938.62)
Internet Explorer: 11.0.22621.1npm
With vite server already running, issuing 'Restart vite server' command causes ^CTerminate batch job (Y/N)? to appear in terminal window, even if it's not shown. Running the command a second time restarts the server.
Stop vite server also brings up the prompt.
For now, vscode-vite starts the server while I am opening VSCode, but the script npx vite --port 3000 can't be customized...
I toggled each of my 88 extensions to identify this one as the culprit for the strange issue of Go linting errors showing up in my typescript code:
exported identifier <T> should have comment or be unexported
For example:
Install extension. Write typescript where you export an uncomment const function
Node: 18.12.1 - /usr/local/bin/nodenpm
When I opened my project, the extension auto-start the website, but I've got the Failed to start the server error BUT but my website opened and executed well.
https://github.com/thomasbnt/vuejs3-sass-lucide-starter-kit
System:
OS: Linux 5.10 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
Memory: 22.72 GB / 25.02 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npmyarn
The extension cant find the installation chrome. On windows never had the same problem.
1.Start Vite 2.Open in embedded window
System:
OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
Yarn: 3.3.1 - ~/.nvm/versions/node/v18.14.1/bin/yarn
npm: 9.5.0 - ~/.nvm/versions/node/v18.14.1/bin/npm
Browsers:
Chrome: 111.0.5563.64
Firefox: 111.0npm
Currently if there are HTTPS errors the extension fails to detect that the server has started. If would be useful to have a setting equivalent to that in Browse-lite which would ignore HTTPS errors when pinging the server
how can i change the port?
it's opening at port 4000. i need to change it for 3004
Describe the bug
When I open Vite project in VS code it opens an embedded browser. That browser doesn't work well for me. I'd like to disable that, but the documented options don't seem to work.
My first attempt was based on the instructions found at https://vitejs.dev/config/#server-https . It says that I can specify a boolean for server.open in the config file. I set that value to false in my vite.config.ts. VS Code validated that I had the right syntax. You can see the entire config file in the Reproduction section, below.
Further googling brought me to this page. vitejs/vite#2552. That suggests that there might be a workaround using command line arguments. I'm willing to try, but I don't know where the command line is! I have installed the Vite plugin for VS code and I have created a config file. That combination is all it takes to bring up that embedded browser each time I restart VS code or reopen this project.
I appreciate any help you can offer.
Reproduction
https://github.com/TradeIdeasPhilip/bounce-3d/blob/master/vite.config.ts
System Info
npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers
System:
OS: macOS 12.3.1
CPU: (8) arm64 Apple M1
Memory: 239.16 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 18.0.0 - ~/.nvm/versions/node/v18.0.0/bin/node
npm: 8.6.0 - ~/.nvm/versions/node/v18.0.0/bin/npm
Browsers:
Chrome: 101.0.4951.64
Safari: 15.4
npmPackages:
vite: ^2.9.9 => 2.9.9
Originally reported here vitejs/vite#8332 but they sent me to you,
I tried many ways but failed to fix it
ENV info：
Version: 1.64.0-insider (user setup)
Commit: 886fd126446cd4b8b03f2b32f09c173dec541e6d
Date: 2021-12-14T16:25:19.507Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Windows_NT x64 10.0.22000
Is there a way to issue F5 / Ctrl+F5 commands to the embedded vscode browser, to reload the page without restarting the vite server?
How do you create a project (folder) with this plugin and use the run button to launch the webserver (like in the gif on the main readme.md)? I have searched for quite a long time now and have not found a quickstart for this VScode plugin.
Thank you
After clicking the vite button at bottom status bar, I clicked on open with embedded browser and it showed error as shown in image below:
The notification says https:// but the terminal says http. https://localhost:4000/ does not work.
OS: Windows 11 Pro build 22621.105
I have customized my dev command to be vercel dev to ensure my Serverless Functions for Vercel are usable within this extension. When the command runs, you can see this error:
130 % vercel dev --port=4000
Vercel CLI 30.0.0
WARN! `--port` is deprecated, please use `--listen` instead
> Running Dev Command “vite --port $PORT”
VITE v4.3.9 ready in 145 ms
➜ Local: http://localhost:4000/
➜ Network: use --host to expose
➜ press h to show help
> Ready! Available at http://localhost:4000
WARN! `--port` is deprecated, please use `--listen` instead
Allow users to specify custom flag names or a flag override field would be the ideal solution.
Have a field that allows users to input their own flags and ignore the default port field? Not sure.
It looks like --port is hardcoded at the moment:
Line 38 in 57f6c6b
I cannot see how to break on breakpoints in the components code ? Is it possible with this extension ? Is there some configuration to add to vscode ?
The preview works perfectly, but when I open DevTools I get the error Debugging connection was closed. Reason: WebSocket Disconnected. Reconnect when ready by reopening DevTools. As far as I've seen the other features work fine, and there don't seem to be any relevant console errors.
N/A
System:
OS: Windows 10 10.0.22621
CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
Memory: 9.41 GB / 15.90 GB
Binaries:
Node: 20.2.0 - C:\Program Files\nodejs\node.EXE
npm: 9.6.6 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.1702.0)
Internet Explorer: 11.0.22621.1
VSCode Details:
Version: 1.79.0 (user setup)
Commit: b380da4ef1ee00e224a15c1d4d9793e27c2b6302
Date: 2023-06-07T14:26:35.552Z
Electron: 22.5.5
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.22621npm
Currently there is a plethora of bugs with the embedded browser. It...
<select> dropdown (#24),
vscode:// URIs (antfu/vscode-browse-lite#19),VSCode has a built-in "Simple browser" extension since a while ago: microsoft/vscode#109276
As it is a proper built-in extension and uses the rendering engine already embedded inside electron it does not suffer from the problems of the current screensharing architecture. This will likely resolve every issue listed above!
Fix vscode-browse-lite, though I do not consider this worth the effort given the limitations of it architecture.
The only drawback will be that devtools will be a bit less nice. One has to use the electron devtools (Help > Toggle Developer Tools) which are not in a nice tab like the current ones. However, I definitely consider this drawback justified given the amount of advantages this switch would bring.
Furthermore, one can still open it in an external browser if some parts of the devtools are limiting inside VSCode.
嵌入浏览器中，无法输入中文
As I work across multiple screens I would love the ability to move the embedded browser to a separate vscode window. Unless I'm missing something there doesn't appear to be a way to do that at present.
Big thank you for your work on this extension, together with Vite this greatly eases our workflow 👍
In the embedded browser, select elements don't display the options dropdown when clicked, also the element auto selects the first option as default.
bind any select element to a group of options and open in embedded browser.
System:
OS: Windows 10 10.0.19043
CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
Memory: 3.42 GB / 15.23 GB
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 104.0.5112.102
Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.70)yarn
We need to customize this plugin for all users of our repo so I was trying to configure settings in the "folder" tab - aka writing to vscode/settings.json. But this plugin doesn't show up in that tab, I can only configure it for workspace or user.
N/A
System:
OS: Windows 10 10.0.22000
CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
Memory: 14.71 GB / 31.73 GB
Binaries:
Node: 18.9.1 - C:\Program Files\nodejs\node.EXE
Yarn: 3.4.1 - C:\Program Files\nodejs\yarn.CMD
npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (114.0.1823.58)
Internet Explorer: 11.0.22000.120yarn
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.