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