Boost your web development efficiency with Sniptix by theriturajps. Access ready-to-use code snippets for faster, smoother coding in VSCode.
MIT License
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.
Alternatively, you can install it directly from the VSCode Marketplace.
Once installed, Sniptix will provide the following snippets:
Easily insert common HTML tags and boilerplate structures.
html5
): Create a basic HTML5 template structure.a
): Add a hyperlink.img
): Add an image with a source and alt text.div
): Create a div
container.script
): Include an external JavaScript file.link
): Link an external CSS stylesheet.meta-charset
): Set the character encoding.meta-viewport
): Set up responsive meta tag for viewport.header
): Create a header
section.footer
): Create a footer
section.form
): Define a form with action and method.input
): Add an input field with type and name.button
): Create a button with a label.table
): Build a table with headers and rows.ul
): Create an unordered list.ol
): Create an ordered list.li
): Add a list item inside a list.section
): Create a section element.article
): Add an article element.nav
): Define navigation content.h1
): Create a main heading.h2
): Create a secondary heading.h3
): Create a tertiary heading.h4
): Create a fourth-level heading.h5
): Create a fifth-level heading.h6
): Create a sixth-level heading.main
): Define main content of the document.address
): Display contact information.time
): Mark up a time value.p
): Add a paragraph.b
): Make text bold.i
): Make text italic.span
): Apply inline styling or wrap text.br
): Insert a line break.hr
): Insert a horizontal line.textarea
): Create a multi-line text input.select
): Create a dropdown list.option
): Add an option in a dropdown.iframe
): Embed another HTML page inside your page.canvas
): Draw graphics via scripting.audio
): Embed audio files.video
): Embed video files.embed
): Embed external content like Flash.source
): Provide media sources for audio/video.track
): Add text tracks (subtitles or captions).style
): Add inline CSS styles.mark
): Highlight text.ruby
): Use ruby annotations (used for East Asian typography).progress
): Display progress of a task.meter
): Represent a scalar measurement within a known range.Quickly insert CSS rules and styles.
css-vars
): Using CSS custom properties (variables).flexbox
): Basic Flexbox container setup.grid
): Basic Grid container setup.media-query
): Basic media query for responsiveness.transition
): Simple transition for smooth animations.box-shadow
): Simple box shadow effect.gradient-bg
): Creating a gradient background.center-flex
): Centering content using flexbox.center-grid
): Centering content using grid.hover-effect
): Adding a hover effect for scaling.animate
): Creating a slide-in animation.text-shadow
): Simple text shadow effect.border-radius
): Add rounded corners to elements.box-sizing
): Set box-sizing to border-box for better layout control.opacity
): Set the opacity of an element.box-model
): Basic CSS box model reset.flex-center
): Centering content using Flexbox.grid-center
): Centering content using Grid.keyframes
): Creating a slide-in animation.z-index
): Setting z-index for layering.font-face
): Defining a custom font-face.font-size-line-height
): Setting font size and line height.text-align
): Aligning text.text-decoration
): Adding text decoration (underline, strike-through, etc.).display-block
): Changing element display property to block.display-inline
): Changing element display property to inline.display-inline-block
): Changing element display property to inline-block.vertical-align
): Aligning elements vertically.overflow
): Control the overflow behavior of an element.list-style
): Remove list bullets or style.transform
): Applying a transformation to an element.transition-hover
): Adding hover transition.box-reset
): Reset box model for all elements.font-weight
): Setting font weight.cursor-style
): Changing cursor style on hover.Get useful JavaScript code snippets for functions, variables, loops, etc.
cd
): console.dir($1);
ce
): console.error($1);
ci
): console.info($1);
cl
): console.log($1);
cw
): console.warn($1);
ct
): console.table($1);
de
): debugger;$1
ae
): ${1:document}.addEventListener('${2:load}', function (e) { ... });
ac
): ${1:document}.appendChild(${2:elem});
rc
): ${1:document}.removeChild(${2:elem});
cel
): ${1:document}.createElement(${2:elem});
cdf
): ${1:document}.createDocumentFragment();$2
ca
): ${1:document}.classList.add('${2:class}');
ct
): ${1:document}.classList.toggle('${2:class}');
cr
): ${1:document}.classList.remove('${2:class}');
gi
): ${1:document}.getElementById('${2:id}');
gc
): ${1:document}.getElementsByClassName('${2:class}');
gt
): ${1:document}.getElementsByTagName('${2:tag}');
ga
): ${1:document}.getAttribute('${2:attr}');
sa
): ${1:document}.setAttribute('${2:attr}', ${3:value});
ra
): ${1:document}.removeAttribute('${2:attr}');
ih
): ${1:document}.innerHTML = '${2:elem}';
tc
): ${1:document}.textContent = '${2:content}';
qs
): ${1:document}.querySelector('${2:selector}');
qsa
): ${1:document}.querySelectorAll('${2:selector}');
fe
): ${1:array}.forEach(function(item) { ... });
fn
): function ${1:methodName} (${2:arguments}) { ... }
af
): const ${1:name} = (${2:params}) => { ... };
afn
): function(${1:arguments}) { ... }
pr
): ${1:object}.prototype.${2:method} = function(${3:arguments}) { ... }
iife
): (function(${1:window}, ${2:document}) { ... })(${1:window}, ${2:document});
call
): ${1:method}.call(${2:context}, ${3:arguments});
apply
): ${1:method}.apply(${2:context}, [${3:arguments}]);
ofn
): ${1:functionName}: function(${2:arguments}) { ... }
jp
): JSON.parse(${1:obj});
js
): JSON.stringify(${1:obj});
si
): setInterval(function() { ... }, ${1:1000});
st
): setTimeout(function() { ... }, ${1:1000});
us
): 'use strict';
al
): alert('${1:msg}');
co
): confirm('${1:msg}');
pm
): prompt('${1:msg}');
We welcome contributions to make Sniptix better! Here are some ways you can help:
MIT License
This project is licensed under the MIT License - see the LICENSE file for details.
For support, please open an issue on the GitHub repository.
Made with ❤️ by theriturajps.