A simple extension that helps speed up development time by simplifying repetitive tasks we do over and over again.
Quickly create a web project skeleton with the following structure simply by selecting Primer: Create Web Skeleton in the command palette.
│ index.html
│
└───assets
├───css
│ styles.css
│
├───images
└───js
scripts.jsThe following shows the file contents created...
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="color-scheme" content="light"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./assets/css/styles.css"> <title>Home</title> </head> <body> <div class="container"> <!-- Happy coding! --> </div> <script src="./assets/js/scripts.js"></script> </body> </html>
- styles.css
/* Ubuntu font */ @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap'); /* Font awesome 6 */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css'); :root { --brand-color: #F62F63; --dark-color: #171435; --mid-color: #8F8AC0; --light-color: #FFFFFF; } body { box-sizing: border-box; font-family: 'Ubuntu'; color: var(--dark-color); margin: 0; }
- scripts.js
//scripts.js
There are also code snippets that can be used in existing files to help speed up code development time, including:
| Trigger | Action |
|---|---|
!html |
generates a basic HTML code snippet |
!html+ |
creates a basic HTML snippet with links to css and js files |
!css |
creates a css snippet with :root and body elements and basic settings |
!js-form |
generates a basic JavaScript submit event listener and captures the form element |
!js-event |
generates a more generic event listener which allows you to specify the listener type |
At this point there are no known issues, but future issues will be added here.
This extension is currently on its first release.
Suggestions and/or contributions are welcome.
Initial release