Sniptix: Code Snippets for Web Development

Boost your web development efficiency with Sniptix by theriturajps. Access ready-to-use code snippets for faster, smoother coding in VSCode. Designed to streamline your workflow and save time, Sniptix provides a collection of useful code snippets for HTML, CSS, JavaScript, and TypeScript.

Features

Ready-to-use code snippets for HTML, CSS, JavaScript, and TypeScript.
Effortless workflow integration with VSCode.
Saves time and increases productivity by reducing the need for repetitive typing.
Supports multiple languages, including:
- HTML
- CSS
- JavaScript
- TypeScript
- JavaScript-React
- TypeScript-React

Installation

Open VSCode.
Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.
Search for Sniptix by theriturajps.
Click Install.

Alternatively, you can install it directly from the VSCode Marketplace.

Usage

Once installed, Sniptix will provide the following snippets:

HTML Snippets

Easily insert common HTML tags and boilerplate structures.

HTML5 Boilerplate (html5): Create a basic HTML5 template structure.
Anchor Tag (a): Add a hyperlink.
Image Tag (img): Add an image with a source and alt text.
Div Element (div): Create a div container.
Script Tag (script): Include an external JavaScript file.
Link Tag (Stylesheet) (link): Link an external CSS stylesheet.
Meta Charset Tag (meta-charset): Set the character encoding.
Meta Viewport Tag (meta-viewport): Set up responsive meta tag for viewport.
Header Tag (header): Create a header section.
Footer Tag (footer): Create a footer section.
Form Tag (form): Define a form with action and method.
Input Tag (input): Add an input field with type and name.
Button Tag (button): Create a button with a label.
Table Structure (table): Build a table with headers and rows.
Unordered List (ul): Create an unordered list.
Ordered List (ol): Create an ordered list.
List Item (li): Add a list item inside a list.
Section Tag (section): Create a section element.
Article Tag (article): Add an article element.
Nav Tag (nav): Define navigation content.
H1 Tag (h1): Create a main heading.
H2 Tag (h2): Create a secondary heading.
H3 Tag (h3): Create a tertiary heading.
Header4 Tag (h4): Create a fourth-level heading.
Header5 Tag (h5): Create a fifth-level heading.
Header6 Tag (h6): Create a sixth-level heading.
Main Tag (main): Define main content of the document.
Address Tag (address): Display contact information.
Time Tag (time): Mark up a time value.
Paragraph Tag (p): Add a paragraph.
Bold Tag (b): Make text bold.
Italic Tag (i): Make text italic.
Span Tag (span): Apply inline styling or wrap text.
Break Line (br): Insert a line break.
Horizontal Rule (hr): Insert a horizontal line.
Textarea Tag (textarea): Create a multi-line text input.
Select Tag (select): Create a dropdown list.
Option Tag (option): Add an option in a dropdown.
Iframe Tag (iframe): Embed another HTML page inside your page.
Canvas Tag (canvas): Draw graphics via scripting.
Audio Tag (audio): Embed audio files.
Video Tag (video): Embed video files.
Embed Tag (embed): Embed external content like Flash.
Source Tag (source): Provide media sources for audio/video.
Track Tag (track): Add text tracks (subtitles or captions).
Style Tag (style): Add inline CSS styles.
Mark Tag (mark): Highlight text.
Ruby Tag (ruby): Use ruby annotations (used for East Asian typography).
Progress Tag (progress): Display progress of a task.
Meter Tag (meter): Represent a scalar measurement within a known range.

CSS Snippets

Quickly insert CSS rules and styles.

CSS Variables (css-vars): Using CSS custom properties (variables).
CSS Flexbox Container (flexbox): Basic Flexbox container setup.
CSS Grid Container (grid): Basic Grid container setup.
CSS Media Query (media-query): Basic media query for responsiveness.
CSS Transition (transition): Simple transition for smooth animations.
CSS Box Shadow (box-shadow): Simple box shadow effect.
CSS Gradient Background (gradient-bg): Creating a gradient background.
CSS Centering (Flex) (center-flex): Centering content using flexbox.
CSS Centering (Grid) (center-grid): Centering content using grid.
CSS Hover Effect (hover-effect): Adding a hover effect for scaling.
CSS Animation (animate): Creating a slide-in animation.
CSS Text Shadow (text-shadow): Simple text shadow effect.
CSS Border Radius (border-radius): Add rounded corners to elements.
CSS Box Sizing (box-sizing): Set box-sizing to border-box for better layout control.
CSS Opacity (opacity): Set the opacity of an element.
CSS Box Model (box-model): Basic CSS box model reset.
CSS Flexbox Centering (flex-center): Centering content using Flexbox.
CSS Grid Centering (grid-center): Centering content using Grid.
CSS Keyframe Animation (keyframes): Creating a slide-in animation.
CSS Z-Index (z-index): Setting z-index for layering.
CSS Font Face (font-face): Defining a custom font-face.
CSS Font Size and Line Height (font-size-line-height): Setting font size and line height.
CSS Text Alignment (text-align): Aligning text.
CSS Text Decoration (text-decoration): Adding text decoration (underline, strike-through, etc.).
CSS Display Block (display-block): Changing element display property to block.
CSS Display Inline (display-inline): Changing element display property to inline.
CSS Display Inline Block (display-inline-block): Changing element display property to inline-block.
CSS Vertical Alignment (vertical-align): Aligning elements vertically.
CSS Overflow (overflow): Control the overflow behavior of an element.
CSS List Style (list-style): Remove list bullets or style.
CSS Transform (transform): Applying a transformation to an element.
CSS Transition on Hover (transition-hover): Adding hover transition.
CSS Box Model Reset (box-reset): Reset box model for all elements.
CSS Font Weight (font-weight): Setting font weight.
CSS Cursor Style (cursor-style): Changing cursor style on hover.

JavaScript Snippets

Get useful JavaScript code snippets for functions, variables, loops, etc.

console.dir (cd): console.dir($1);
console.error (ce): console.error($1);
console.info (ci): console.info($1);
console.log (cl): console.log($1);
console.warn (cw): console.warn($1);
console.table (ct): console.table($1);
debugger (de): debugger;$1
addEventListener (ae): ${1:document}.addEventListener('${2:load}', function (e) { ... });
appendChild (ac): ${1:document}.appendChild(${2:elem});
removeChild (rc): ${1:document}.removeChild(${2:elem});
createElement (cel): ${1:document}.createElement(${2:elem});
createDocumentFragment (cdf): ${1:document}.createDocumentFragment();$2
classList.add (ca): ${1:document}.classList.add('${2:class}');
classList.toggle (ct): ${1:document}.classList.toggle('${2:class}');
classList.remove (cr): ${1:document}.classList.remove('${2:class}');
getElementById (gi): ${1:document}.getElementById('${2:id}');
getElementsByClassName (gc): ${1:document}.getElementsByClassName('${2:class}');
getElementsByTagName (gt): ${1:document}.getElementsByTagName('${2:tag}');
getAttribute (ga): ${1:document}.getAttribute('${2:attr}');
setAttribute (sa): ${1:document}.setAttribute('${2:attr}', ${3:value});
removeAttribute (ra): ${1:document}.removeAttribute('${2:attr}');
innerHTML (ih): ${1:document}.innerHTML = '${2:elem}';
textContent (tc): ${1:document}.textContent = '${2:content}';
querySelector (qs): ${1:document}.querySelector('${2:selector}');
querySelectorAll (qsa): ${1:document}.querySelectorAll('${2:selector}');
forEach (fe): ${1:array}.forEach(function(item) { ... });
function (fn): function ${1:methodName} (${2:arguments}) { ... }
Arrow Function (af): const ${1:name} = (${2:params}) => { ... };
anonymous function (afn): function(${1:arguments}) { ... }
prototype (pr): ${1:object}.prototype.${2:method} = function(${3:arguments}) { ... }
IIFE (Immediately Invoked Function Expression) (iife): (function(${1:window}, ${2:document}) { ... })(${1:window}, ${2:document});
function call (call): ${1:method}.call(${2:context}, ${3:arguments});
function apply (apply): ${1:method}.apply(${2:context}, [${3:arguments}]);
function as a property of an object (ofn): ${1:functionName}: function(${2:arguments}) { ... }
JSON.parse (jp): JSON.parse(${1:obj});
JSON.stringify (js): JSON.stringify(${1:obj});
setInterval (si): setInterval(function() { ... }, ${1:1000});
setTimeout (st): setTimeout(function() { ... }, ${1:1000});
use strict (us): 'use strict';
alert (al): alert('${1:msg}');
confirm (co): confirm('${1:msg}');
prompt (pm): prompt('${1:msg}');

Contributing

We welcome contributions to make Sniptix better! Here are some ways you can help:

Bug Reports: If you find a bug, please open an issue here.
Feature Requests: If you'd like to see a new feature, feel free to open an issue or a pull request.
Improvement Suggestions: If you have an idea to improve existing snippets or add new ones, open an issue or PR.