Giter Site home page Giter Site logo

aussiedev81 / project-primer Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 295 KB

A super lightweight VSCode extension that helps speed up development time by performing common tasks FAST with simple commands

License: MIT License

JavaScript 77.78% CSS 10.62% HTML 11.61%
code-generation code-templates contributions-welcome open-source vscode-extension vscode-snippets

project-primer's Introduction

Project Primer

GitHub forks GitHub contributors GitHub last commit GitHub

A simple extension that helps speed up development time by simplifying repetitive tasks we do over and over again.

Features

Rapid file creation

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.js

The following shows the file contents created...

  1. 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>
  2. 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;
    }
  3. scripts.js
    //scripts.js

Code snippets

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

Known Issues

At this point there are no known issues, but future issues will be added here.

Release Notes

This extension is currently on its first release.
Suggestions and/or contributions are welcome.

1.0.0

Initial release

project-primer's People

Contributors

aussiedev81 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.