As a FrontEnd Engineer, one of my primary responsibilities is to develop and maintain Web apps in more human-readable formats, which necessitates the use of various tools and indentation approaches. I'm hoping that Web Formatters will help bridge that gap.
Web Snippets to speed up you're routine work and to improve your productivity.
Thanks
This extension is combination of clean-css for CSS files and js-beautify for HTML files, Thanks for wonderful contributions.
- This extension will work for either
selected content or an entire page.
- Do press
shift+alt+f shortcut and make sure the current file type is either CSS or HTML.
Here i'm attaching couple of screenshots, which helps you understand how the format will work.
Web Snippets Usage
Shortcuts in [.html] file:
:html - HTML Boilerplate code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<main></main>
</body>
</html>
:l - Create Main layout.
<main>
<header></header>
<aside></aside>
<article></article>
<footer></footer>
</main>
:pl - Create Page layout
<section class="page-content">
<div class="page-header"></div>
<div class="page-body"></div>
<div class="page-footer"></div>
</section>
:bp - Primary button in with BS4 class names
<button type="button" class="btn btn-primary" id="btnSubmit">Submit</button>
:bs - Secondary button in with BS4 class names
<button type="button" class="btn btn-secondary" id="btnCancel">Cancel</button>
:im - Create image tag
<img src="https://github.com/gopi1216/web-snippets/raw/HEAD/image source" alt="alt text">
:a - Create Anchor tag with js href
<a href="javascript:;">link</a>
:it - Create Form 'text' field
<label for="firstName">First Name</label>
<input type="text" id="firstName" placeholder="Enter your Name">
:ie - Create Form 'email' field
<label for="email">Email</label>
<input type="email" id="email" placeholder="email">
:ip - Create Form 'password' field
<label for="password">Password</label>
<input type="password" id="password" placeholder="password">
:i - Create Icon in HTML document
<i class="icon"></i>
Shortcuts in [.css] file:
:bn - Remove border
border: none;
:px - To apply padding LEFT and RIGHT sides of an element
padding: 0 1rem;
:mx - To apply margin LEFT and RIGHT sides of an element
margin: 0 1rem;
:py - To apply padding TOP and BOTTOM sides of an element
padding: 1rem 0;
:my - To apply margin TOP and BOTTOM sides of an element
margin: 1rem 0;
:ma - To center the element(margin auto)
margin: 0 auto;
:bx - Apply border for LEFT and RIGHT
border-left: 1px solid [#000](https://github.com/gopi1216/web-snippets/issues/000);
border-right: 1px solid [#000](https://github.com/gopi1216/web-snippets/issues/000);
:by - Apply border for TOP and BOTTOM
border-top: 1px solid inherit;
border-bottom: 1px solid inherit;
:fn - Float none
float: none;
:on - Outline none
outline: none;
:bs - Apply box shadow
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
:bsn - To unset/remove box shadow
box-shadow: none;
:ms - Create mask-size property
mask-size: contain;
-webkit-mask-size: contain;
:mi - Create mask-image property
mask-image: url();
-webkit-mask-image: url();
:mp - Create mask-position property
mask-position: center;
-webkit-mask-position: center;
:mr - Create mask-repeat property
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
:m - Create Mask shorthand property
mask: url() no-repeat center;
-webkit-mask: url() no-repeat center/contain;
:bg - Create Background shorthand property
background: url() no-repeat center/contain;
:f - Create font short hand property
font: 1rem/1.5 "regular";
:sb - Create Custom scroll bar
::-webkit-scrollbar{width: .25rem}
::-webkit-scrollbar-track{background: [#0000](https://github.com/gopi1216/web-snippets/issues/0000)}
::-webkit-scrollbar-thumb{background: [#666](https://github.com/gopi1216/web-snippets/issues/666)}
Shortcuts in [.js] file:
:f - Create named function
function name(params) {}
:af - Create anonymous function
function(params) {}
:qs - Query selector
document.querySelector();
:cl - Console log
console.log();
:ce - Create an Element.
document.createElement('element');
:de - Debugger;
debugger;
:ae - Add Event Listener
document.addEventListener('click', () => {});
:ac - Add Class
document.classList.add('class');
:rc - Remove Class
document.classList.remove('class');
:ga - Get Attribute
document.getAttribute('attr');
:sa - Set Attribute
document.setAttribute('attr', value);
:ra - Remove Attribute
document.removeAttribute('attr');
:ih - Inner HTML Element
document.innerHTML = 'elem';
:tc - Text Content
document.textContent = 'content';
:qsa - Query Selector All
document.querySelectorAll('selector');
:fe - For Each
array.forEach((item) => { body });
:fo - For of Loop
for (let i of array) { body };
:m - Map method
array.map((i) => { body });
:fl - Filter method
array.filter((i) => { body });
:fc - Call method
method.call(context, arguments);
:fa - Apply method
method.apply(context, arguments);
:jp - JSON parse
JSON.parse(obj);
:js - JSON Stringify
JSON.stringify(obj)
:si - Set Interval
setInterval(() =>{ body }, 1000);
:st - Set Timeout
setTimeout(() =>{ body }, 1000);
:us - Use Strict
'use strict';
