GithubHelp home page GithubHelp logo

microsoft / vscode-livepreview Goto Github PK

View Code? Open in Web Editor NEW
366.0 17.0 49.0 67.14 MB

Hosts a local server in your workspace for you to preview your webpages.

Home Page: http://aka.ms/live-preview

License: MIT License

JavaScript 11.86% CSS 1.52% TypeScript 86.08% HTML 0.54%

vscode-livepreview's Introduction

Live Preview - VS Code Extension 📡

⚠️ WARNING: This extension is still under development! ⚠️

An extension that hosts a local server for you to preview your web projects on!

This extension is most useful for projects where a server is not already created (e.g. not for apps using React, Angular, etc.). To work with these, feel free to run the Simple Browser: Show command that is already built-in with VS Code.

Table of Contents

Features

HTML File Previewing

Preview your HTML files quickly by clicking the preview button in the top right corner of your editor or using the context menu.

open-preview-btn open-context-menu

Embedded Preview

A preview is available in-editor for the files hosted by the server.

browser-demo

The simple embedded browser features the following:

  • Page history tracking
  • URL bar for address-based navigation
  • Expandable menu, allowing users to:
    • Preview the current page in browser
    • Perform a page search
      • Tip: You can also use CTRL+F to open the find box and Enter to go to the next result
    • Open the editor's webview DevTools

find-demo

webview-devtools-demo

Live Refreshing

See the changes as you make them. By default, changes appear as you make them in the editor. You can also change this in the extension settings (via livePreview.autoRefreshPreview) to refresh the preview on save or not at all.

live-refresh

Individual pages can opt out of live refreshing by adding the <body> attribute data-server-no-reload.

Persistent Server Task with Server Logging

If you're looking for a persistent server to run, you can run a Live Preview task, which also logs the server traffic. This can also be launched using the Live Preview: Start Server Logging command. You can click on the traffic to open the file location of the file returned by the server.

task-demo task-demo-2

External Browser Previewing

Although all of the images above use the embedded browser, you can also experience the same features in an external browser.

external-window-demo

You can edit the preview target in the extension settings.

External Browser Debugging

The external browser preview also supports debugging via the built-in js-debug extension and attaching to the Edge Devtools Extension. This allows support for features such as setting breakpoints and inspecting elements.

Run Live Preview: Show Debug Preview in the command palette to get these debugging features.

external-debug-demo

Console Output Channel (For Embedded Preview)

For a simple view of the embedded preview's console messages, go to the Output tab and select Embedded Live Preview Console in the dropdown.

console-demo

Workspace-less Previewing

No workspace? No problem! For a quick preview of your file, the server can also access files outside of your workspace to preview.

no-workspace-preview

Notes about workspace-less extension use:

  • Files without a workspace will be served on its own server instance and will use its absolute path as the file path.
  • Linked files for these pages may not be correct if they are relative to a specific root (e.g. a project root).
  • Tasks do not work outside of a workspace, so a server will just launch in the background upon external preview when outside of a workspace. You can use the Live Preview: Stop Server command to kill the server in this case.

Multi-root Support

Live Preview works cleanly with your multi-root workspaces! It will simply open an additional server for each root that you open a preview on.

multi-root-demo

You can view the ports that are open for Live Preview by hovering the status bar indicator (usually located in the bottom-right corner of the window).

multi-server-ports

Running the extension

You can install the extension in the marketplace here. To contribute, see the contributing page.

FAQ

Q. What does the "Previewing a file that is not a child of the server root. To see fully correct relative file links, please open a workspace at the project root or consider changing your server root settings for Live Preview." message mean?

A. Either:

  • You have no workspace open and opened a preview.
  • You opened a preview for a file that is not a part of your workspace(s).
  • You have the livePreview.serverRoot setting set to a sub-folder in your workspace and your file is not a child of that subfolder.

Why does this happen?

The server is hosted from the root of the workspace that the user opens (or a subfolder of the workspace based on livePreview.serverRoot). Files outside of this can be previewed, but some file paths (such as a link to the root) may not go to the right place. If you are working on a web project, it is advised that you open a workspace at the root of the project.

Q. I'm trying to use Live Preview in Codespaces and the embedded preview isn't working.

A. Currently, you will need to manually navigate to the links host the forwarded port content before it works

In the area of the editor where the integrated terminal usually is, navigate to Ports and open the local addresses (usually at ports 3000 and 3001) in the browser. You can do this by using CTRL+Click on the URLs in the Ports menu.

Allow the browser to perform the necessary redirects, then close the windows. Re-open the preview window and it should work now.

Q. Why does my external browser preview look different than the preview in the embedded browser preview?

A. Aspects such as styling might look different based on the browser cache of your external browser or any other client-side state. Try clearing your cache and restarting your browser.

Inspirations

Special thanks to the following extensions for inspiring Live Preview! 💡

Issue Tracking

Please file issues against the VS Code Live Preview repository.

Changelog

See the project's changelog here.

vscode-livepreview's People

Contributors

abliger avatar andreamah avatar clinth avatar coliff avatar davixiao avatar dependabot[bot] avatar jeremysf avatar lramos15 avatar lszomoru avatar microsoft-github-policy-service[bot] avatar mjbvz avatar sbatten avatar toyobayashi avatar tylerleonhardt avatar tyriar avatar usernamehw avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

davixiao andreamah parthsarthi313 ashishsoyetra30 jayant99acharya gdeepak884 abhisheksharma5333 shitesh2607 kritika14092001 beniaminrychter contractshark socialisewrld jeremysf devcoditor pplonski spown chen-ye sirivus justinohms arullamudhanelc mharshita cplynch dhaneshjoshi test-mass-forker-org-1 clinth coliff glennmandagi rakhithjk minhluquang developers81828182 lilsunny243 shubham-sudo filippoquaranta vipulchauhan24 toyobayashi almada2021 yjprakash cleverybee vritant24 codeeditorland aliyan2008 ken0x0a lixvbnet kkpan11 alaca21 yanbo92 nickfrancinny johncartel

vscode-livepreview's Issues

[Question] can you use the vs code terminal to show console entries?

Hello, is there a way to use some terminal from Visual Studio Code to see the console entries from the brower?

Example:

<body>
    <h1>Test</h1>
    <script>console.log('Hello World')</script>
</body>

Can you see the "hello world" entry in vs code rather than opening the server in the browser?

Add setting to start server from index

Would love a setting to designate the index to start the server on instead of right-clicking on a file. In my case my index file is in a source folder (dist) and not named (codicons.html). I could then use this with #43 to automatically starts a server for my codicons preview page.

The old Live Server extension had a liveServer.settings.root which works just like this.

Implement filesystem watch

Current listeners only listen for saves occurring in-editor, but it would be nice if it listened for general filesystem changes.

Render the favicon

I added <link rel="icon" href="favicon.png"> yet it didn't render in the Live Preview.

Cleanup script injection

Ideally, the script injection would not be as large and would be placed in a more ideal place.

[Feature request] Support search

We'd like to use live preview to render html page with package documentation (see the screenshot). It would be very nice if the preview page supported searching in it.

image

Mention inspirations in the readme

Many extensions provided Live Preview's functionality in VS Code for the past years. Would be great to mention them as prior art/inspiration in the readme.

Changelog?

The work on this has been great, have you considered running a changelog for users to keep track of?

Prior art is the js debug one https://github.com/microsoft/vscode-js-debug/blob/main/CHANGELOG.md

it offers visibility to changes (such as these #93) and makes it easy for users to scroll through/search change history.

I can understand if you don’t want to do this until you hit 1.0.0 though

React apps don't open with live server

I wouldn't expect them to (as react creates its own server) but other people might expect them to?

Or perhaps it could just shortcut itself on react apps and open the preview browser pointing at the react server's URI?

Linking local favicon not working

using

 <link rel="shortcut icon" href="favicon.ico">

(with a local file favicon.ico)
In the head of the file will show the favicon on opening the html file from the filesystem, but not when hosted from Live Preview.

History API state changes are not reflected in the address bar

Testing microsoft/vscode#127164

The history API is used for navigation within SPA's.

  1. Have a button on a page and this in a script:

    document.querySelector('button').addEventListener('click', ()  => {
    const state = { 'page_id': 1, 'user_id': 5 }
    const title = 'Hello World'
    const url = 'hello-world.html'

    history.pushState(state, title, url)
})

  2. Click the button

  3. The address bar and title do not update 🐛

  4. Refresh the page. This refreshes on the new URL

Untitled Files not Auto-updating

When previewing an unsaved file, it is not updating on the preview.

  1. Open untitled file.
  2. Select html for language.
  3. Type some html
  4. Preview it.
  5. The preview should show the initial html, but the preview doesn't change on changing the code in the editor. 🐛

Pipe console logs to editor

Like the server logging, it would be nice to have console logs go to the editor to reduce the need to always open devtools.

engine vs @types

vscode-livepreview/package.json

Lines 21 to 23 in ac5588a

"engines": {
"vscode": "^1.56.0"
},

I think this means that this extension is compatible with vscode 1.56 and above. (Minumum required version of vscode is 1.56). But the types for vscode and node are different:

vscode-livepreview/package.json

Lines 249 to 250 in ac5588a

"@types/node": "^12.12.0",
"@types/vscode": "^1.32.0",

They should probably be:

"@types/node": "^14.17.5",
"@types/vscode": "^1.56.0",

Remember already opened preview in embedded browser

Similar to #92 but for the embedded browser:

Current behaviour is that any pre-existing editor group html preview tab is replaced by the new preview tab.

It would be useful to have more than one preview tab open at a time so I can see the results of running VSCode tasks that modify more than one file at a time.

Does it work with simple watch scripts?

Having a minimal project:

src/
    css/
        index.css
    scss/
        index.scss
    index.html
package.json
package.json 
{
	"name": "playground",
	"version": "1.0.0",
	"scripts": {
		"watch": "npm run sass-watch",
		"sass-watch": "sass --watch src/scss/index.scss:src/css/index.css"
	},
	"devDependencies": {
		"sass": "^1.35.2"
	}
}
index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
	<link rel="stylesheet" href="./css/index.css">
</head>
<body>

</body>
</html>
index.scss 
body {
	background-color: aqua;
}

It fails to refresh on files updated by sass --watch.

demo

Port reported is incorrect

  1. Start a process on port 3000
  2. This causes live server to go to 3001
  3. Live server shows a notification saying server started on 3001
  4. 🐛 Server is actually on 3002

Screen Shot 2021-06-30 at 1 39 18 PM

[ Question ] What about PHP files preview?

Hello, looking at the fact that the plugin works on javascript only, the answer seems to be obvious. But I ask if there is a chance that PHP will be supported (in the future) ?

Improve experience when using Codespaces

Currently, as mentioned in #58, the embedded preview will not immediately work in Codespaces upon first launching (or sometimes just upon forwarding a port). This is because the content at the local address is not actually available until the user goes through some redirects in their browser. Since one of these redirects is github.com and github can't be framed in an iframe, it shows an error.

There isn't a way to see whether this failure happened from the extension side, so it's difficult to implement some type of fix upon failure.

Without help from the GitHub side in regards to detecting whether these redirects have happened and no way to perform the redirects programmatically, we could probably do something like:

  • Upon port forwarding, show an info message containing a link to tell you how to get around the issue OR a button that runs the open external preview command immediately. There should be a "don't show again" on this and perhaps some info on how to fix the issue yourself. However, I'm not too sure if there's currently an API to show a warning message, as PortAttributes does not seem to support this.

In the most ideal case, we would have a way to programmatically trigger the redirects, although they are most likely there for a reason (security, cookies).

Preview always opens to the right

Testing microsoft/vscode#124865

If your editor is already split to side by side and you open a preview window, the extension will reuse a group on the right but not on the left. Instead if the focused editor is in the right group, it will create a 3rd.

Support Untitled HTML Files

This is a really nice extension!

It would be cool if untitled html files could previewed too.

Currently this happens:

image

Alternatively, an error should be shown that untitled files are not supported.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.