The Webview Panel extension provides a more immersive web development experience by allowing you to display a preview of the current web page directly within Visual Studio Code.
How it works
Open your project in VSCode.
Start your local server with the port configured in the extension settings.
Click on the Webview Panel button in the bottom-right corner of the application.
A panel will open in the second column on the right, displaying a preview of the web page.
Features
Automatic refresh of the preview with each modification of a text file in the project.
Ability to set the port of the local server in the extension settings.
Requirements
Open VSCode project.
Local server with, for example, Node.js and nodemon or live-server.
Extension Setings
In the extension settings, you can specify the port to use for the local server.
webviewPanel.setPortListen: Set the port to listen for the local server in the extension settings (number, 3000 by default).
Example Configuration with Node.js and nodemon
Ensure that Node.js is installed.
Install nodemon globally using the command: npm install -g nodemon.
Start your server with nodemon: nodemon server.js (replace server.js with your entry file).
Example Configuration with Node.js and live-server
Ensure that Node.js is installed.
Install live-server globally using the command: npm install -g live-server. Or install the Live Server VSCode extension.
Start your server with live-server: live-server. Or by clicking on the Go live button with the Live Server VSCode extension.
Release Notes
1.0.0
Initial release of the Webview Panel VSCode extension.
Contact
For any questions or suggestions, feel free to contact me:
