YuichiNukiyama / Vscode Preview Server
Licence: mit
Live preview VSCode extension
Stars: ✭ 41
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Vscode Preview Server
Vscode Materialdesignicons Intellisense
Provides intellisense, search and hover preview for Material Design Icons
Stars: ✭ 21 (-48.78%)
Mutual labels: vscode-extension, preview
Vscode Mdx Preview
MDX Preview for Visual Studio Code
Stars: ✭ 103 (+151.22%)
Mutual labels: vscode-extension, preview
Flutter preview
Flutter | Because a widget-driven development requires a widget-driven preview.
Stars: ✭ 197 (+380.49%)
Mutual labels: vscode-extension, preview
Without Guns For Vs Code
Visual Studio Code extension that teaches you mindful programming
Stars: ✭ 14 (-65.85%)
Mutual labels: vscode-extension
Vscode Crystal Ameba
Ameba extension for Visual Studio Code
Stars: ✭ 20 (-51.22%)
Mutual labels: vscode-extension
Dart Code
Dart and Flutter support for VS Code
Stars: ✭ 965 (+2253.66%)
Mutual labels: vscode-extension
Vscode File Templates Ext
Visual Studio code extenstion that allows to quickly create new files based on defined templates.
Stars: ✭ 39 (-4.88%)
Mutual labels: vscode-extension
Vsc Netease Music
UNOFFICIAL Netease Music extension for Visual Studio Code
Stars: ✭ 983 (+2297.56%)
Mutual labels: vscode-extension
Vsc Python Indent
Correctly indent python code on the fly, in Visual Studio Code.
Stars: ✭ 31 (-24.39%)
Mutual labels: vscode-extension
Hashlink Debugger
Visual Studio Code Debugger for Haxe/HashLink applications
Stars: ✭ 35 (-14.63%)
Mutual labels: vscode-extension
Markdowntableprettify Vscodeext
Visual Studio Code extension to prettify markdown tables.
Stars: ✭ 27 (-34.15%)
Mutual labels: vscode-extension
Vscode Annotator
Visual Studio Code Extension. Display git blame info and provide easy access to commit diffs
Stars: ✭ 34 (-17.07%)
Mutual labels: vscode-extension
Vscode Voicecommands
VSCode Voice Commands Extension
Stars: ✭ 14 (-65.85%)
Mutual labels: vscode-extension
Vscode Intelephense
PHP intellisense for Visual Studio Code
Stars: ✭ 872 (+2026.83%)
Mutual labels: vscode-extension
Vscode Apimanagement
VS Code extension for Azure API Management.
Stars: ✭ 32 (-21.95%)
Mutual labels: vscode-extension
Vs Code For Node Js Development Pack
🏃 A VS Code Extension Pack to get up and running with Node.js Development
Stars: ✭ 41 (+0%)
Mutual labels: vscode-extension
vscode-preview-server
Features
This extension provide preview of HTML which execute on web server. When you save files, this extension automatically reload browser or side panel (live preview feature). You can call these features from the context menu or editor menu. The main features are as follows.
-
Preview on side panel (ctrl+shift+v)
: Open preview of HTML on side panel. With this feature, you can easely check the operation of HTML, CSS and JavaScript. -
Launch on browser (ctrl+shift+l)
: Open Web Page on default browser. You can check all operation with web page. -
Stop the web server (ctrl+shift+s)
: Stop the web server. This feature can be used only from command palette. -
Resume the web server (ctrl+shift+r)
: Resume the web server. This feature can be used only from command palette. -
show UI Page (ctrl+shift+u)
: Show UI Page. You can change options at UI page.
Extension Settings
Description
This extension contributes the following settings:
-
previewServer.browsers
: Browsers to launch. Even if you do not set this option, default browser launch if the ignoreDefaultBrowser is false. Default setting is null. -
previewServer.ignoreDefaultBrowser
: Controls whether launch default browser or not. Default setting is false. -
previewServer.isWatchConfiguration
: Controls whether resume the Web Server or not, when change settings. Default setting is true. -
previewServer.port
: Port number of the Web Server. If you set null, vscode-preview-server generate random number, and set port as random number. Default setting is 8080. -
previewServer.proxy
: Set proxy. This is usefull when execute web app on another web server. Default setting is "". -
previewServer.sync
: Controls whether synchronized or not. Default setting is true. -
previewServer.ui
: Port number of UI Page. Default setting is 3001. -
startupProject
: Name of startup project. This setting is meaningful only when in the workspace. This value is the name of the folder. When using this workspace and omitting this value, the first folder becomes the startup project Default setting is null. Customize this option if you would like to preview html from different workspaces.
Simple example
{
"previewServer.browsers": ["firefox", "chrome"],
"previewServer.ignoreDefaultBroswer": true,
"previewServer.port": 9999,
"previewServer.ui": {
"port": 3001,
"weinrePort": 8081
}
}
Settings with workspace
{
"previewServer.startupProject": "Product"
}
{
"folders": [
{
"name": "Product",
"path": "foo"
},
{
"name": "Test",
"path": "bar"
}
],
"settings": {
"previewServer.startupProject": "Product"
}
}
How to build locally
- Ensure that you have
gulp-cli
installed globally usingnpm i -g gulp-cli
. - Run
npm install
to bring in the dependencies. - Run
gulp build
to produce i18n files. - Press
F5
key to launch extension.
Known Issues
Preview on side panel
somethimes don't work with CDN, Link etc.
Acknowledgements
This extension use browsersync. I would like to thank browsersync team for useful work.
Lisence
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].