HTML, CSS, and JavaScript File Generator
Overview
This VS Code extension allows developers to quickly create raw HTML, CSS, and JavaScript files with boilerplate code. Whether you're starting a new project , this tool will help speed up your workflow.
Features
- Generate HTML Files: Create HTML files with a complete boilerplate setup, including the
<!DOCTYPE html> declaration and linked CSS and JavaScript files.
- Generate CSS Files: Create a basic CSS file with a reset and simple style structure.
- Generate JavaScript Files: Add a basic JavaScript file to your project with an console.log
JavaScript Loaded.
- Customizable Templates: Modify the boilerplate templates to suit your needs.
Commands
You can generate files using the following commands available via the Command Palette (Ctrl+Shift+P or Cmd+Shift+P):
Create Raw Project: Generates a new HTML, CSS, JS files with default boilerplates.
HTML Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New HTML Document</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<h1>Hello, World!</h1>
<script src="./js/script.js"></script>
</body>
</html>
CSS Boilerplate
/* Basic CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul,
ol {
list-style: none;
}
img {
max-width: 100%;
}
.container {
max-width: 1340px;
margin: auto;
}
JavaScript Boilerplate
// JavaScript simple console
console.log("JavaScript Loaded");
How to Use
- Install the extension from the VS Code Marketplace.
- Open the Command Palette (
Ctrl+Shift+P or Cmd+Shift+P).
- Type in one of the commands:
- The respective files will be created in your project’s folder.
Installation
You can install this extension from the Visual Studio Code Marketplace by following these steps:
- Open Visual Studio Code.
- Go to the Extensions view by clicking on the Extensions icon in the Activity Bar.
- Search for HTML CSS JS Generator.
- Click Install to add it to your editor.
Alternatively, you can install it from the VS Code Marketplace.
Extension Settings
The extension comes with customizable settings that allow you to modify the default file templates:
- Open File > Preferences > Settings.
- Search for htmlCSSJSGenerator.
- Modify the templates to fit your project’s style.
Known Issues
- Some custom templates may require a restart of VS Code to take effect.
- Please report any bugs via the GitHub Issues page.
Contributing
Contributions are always welcome! To contribute:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and submit a pull request.
License
This project is licensed under the MIT License.
Changelog
For the full list of changes and updates, check out our Changelog.
