在VSC中如何通过浏览器进行LivePreview

huangapple go评论107阅读模式
英文:

How do i LivePreview in VSC through the browser

问题

我知道有一个扩展,但这个扩展在VSC中打开它,当我尝试在网页上打开它时,它不是实时预览的。我该怎么办?
谢谢

我尝试安装扩展,但它没有实时预览。

英文:

I know that there is an extension to this, but this extension open it in VSC, and when i try to open this on the web it isnt LivePreviwed. What should i do?
Thanks

I tried to install the extension but it isnt live previewing

答案1

得分: 1

你实际上可以在Live Preview扩展设置中编辑preview目标。

  1. 启动服务器。
  2. 按下<kbd>CTRL</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>。
  3. 然后输入Live Preview: Show Preview (External Browser),并选择它。

> 在VSC中如何通过浏览器进行LivePreview

或者您可以尝试类似Live Server扩展。

> 启动一个本地开发服务器,具有静态和动态页面的实时重新加载功能。
>
> 在VSC中如何通过浏览器进行LivePreview

英文:

You can actually edit the preview target in the Live Preview extension settings.

  1. Start the server.
  2. Press <kbd>CTRL</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>.
  3. Then write Live Preview: Show Preview (External Browser), and choose it.

> 在VSC中如何通过浏览器进行LivePreview

Or you can try a different extension like the Live Server extension.

> Launch a local development server with a live reload feature for static & dynamic pages.
>
> 在VSC中如何通过浏览器进行LivePreview

答案2

得分: 1

好的,以下是翻译好的内容:

嗯,我喜欢通过节点实时预览包来完成,而不是使用扩展程序。
你可以通过以下方式实现:

 1. 首先安装[Node][1]。
 2. 在终端中运行`node -v`来检查是否已安装node。
 3. 然后通过`npm install live-server -g`来安装该包。
 4. 最后,在终端中运行`live-server`命令来启动实时服务器。

在第三步中,`npm`是由npm维护的包管理器,而`-g`表示全局安装。


  [1]: https://nodejs.org/en
英文:

Well, I like to have it through the node live-preview package instead of an extension.
You may achieve it in the following way::

  1. 1st install Node.
  2. Check you've installed node by running node -v in the terminal.
  3. Then install the package by npm install live-server -g
  4. Then run the live-server by running live-server command in your terminal.

On the 3rd point npm is a package manager maintained by npm and -g is for global installation.

huangapple
  • 本文由 发表于 2023年7月23日 18:45:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76747817.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定