Rapidly initialize vanilla web projects with customizable HTML, CSS, and JS templates. Features single-click setup, right-click Explorer support, and Live Server integration.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Rapidly initialize vanilla web projects with customizable HTML, CSS, and JS boilerplate. Whether you're starting a new project or a quick demo, this extension streamlines your workflow by generating the essential structure in seconds.
Features
One-Click Initialization: Generate a complete index.html, style.css, and script.js directly from the status bar.
Explorer Integration: Right-click any folder in the Explorer and select "Create Raw Project" to initialize in that specific location.
Customizable Templates: Fully customize the generated code snippets through VS Code settings.
Live Preview Integration: Automatically trigger Live Server to preview your creation immediately.
TypeScript Powered: Robust and performant core built on modern VS Code APIs.
How to Use
Via Status Bar
Open a workspace folder.
Click the $(file-code) Raw Project icon in the right side of the status bar.
Boilerplate files will be created and index.html will open automatically.
Via Explorer Context Menu
Right-click any folder in the Side Bar.
Select "Create Raw Project".
The project will be initialized inside the selected folder.
Via Command Palette
Press F1 or Ctrl+Shift+P to open the Command Palette.
Type "Rapid".
Select "RapidStart: Create Vanilla Project".
Technical Details
Generated Boilerplate
The extension generates a clean, modern structure:
index.html: Modern HTML5 boilerplate with pre-linked CSS and JS.
css/style.css: Basic CSS reset and container utilities.
js/script.js: Clean entry point with a verification log.
Extension Settings
Modify templates by navigating to File > Preferences > Settings and searching for htmlGenerator:
htmlGenerator.customHtmlTemplate: Override the default HTML boilerplate.
htmlGenerator.customCssTemplate: Override the default CSS styles.
htmlGenerator.customJsTemplate: Override the default JavaScript logic.
Dependencies
This extension works best with the Live Server extension for real-time previewing.
Installation
Open Visual Studio Code.
Go to the Extensions view (Ctrl+Shift+X).
Search for RapidStart Web Generator.
Click Install.
Contributing
Contributions are welcome! If you have suggestions or find bugs, please feel free to:
