Super Snippet's 💥

Super Snippets 💡: Your all-in-one collection of versatile code snippets for accelerated development in Visual Studio Code. Boost your coding productivity with a comprehensive set of snippets for JavaScript, React, React Hooks, comments, Git commands, and terminal shortcuts. Supercharge your workflow and streamline your programming tasks.

Feel free to install the extension from VS Code or from here.

My Extension Live Demo 🚀 Please Click 👉 ▶👈

Table Of Contents 🙋‍♂️ content

Click on any topic to go there

Common & Usefull Snippet's For Javascript Variable's
Common & Usefull Snippet's For Javascript Condition's
Common & Usefull Snippet's For Javascript Validation's
Common & Usefull Snippet's For Javascript Console's
Common & Usefull Snippet's For Javascript DestructureIng
Common & Usefull Snippet's For Javascript Statement's
Common & Usefull Snippet's For Javascript Basic Loop's
Common & Usefull Snippet's For Javascript Some Array Method's
Common & Usefull Snippet's For Javascript Funtion's
Common & Usefull Snippet's For Javascript Dom's
Common & Usefull Snippet's For Javascript Api Request's
Common & Usefull Snippet's For Javascript Api Request's Handle's
Common & Usefull Snippet's For Javascript Import & Export
Common & Usefull Snippet's For ReactJs
Common & Usefull Snippet's For React Hook's
Common & Usefull Snippet's For Many Language's Comment's
Common & Usefull Snippet's For Html Modern MarkUp's
Common & Usefull Snippet's For Github & Terminal Lover's
Supported languages (file extensions)

Common & Usefull Snippet's For Javascript Variable's

[let] Let Variable Assignment

Prefix: let
Body:
```
let ${1:variableName} = ${2:value};
```
Description: Create a 'let' variable assignment.

Example:

let myVar = 42;

[var] Var Variable Assignment

Prefix: var
Body:
```
var ${1:variableName} = ${2:value};
```
Description: Create a 'var' variable assignment.

Example:

var myVar = 42;

[const] Const Variable Assignment

Prefix: const
Body:
```
const ${1:variableName} = ${2:value};
```
Description: Create a 'const' variable assignment.

Example:

const myVar = 42;

[object] Object Literal Assignment

Prefix: object

Body:

${1:const} ${2:objectName} = {
   ${3:key}: ${4:value}
$5
}

Description: Create an object literal assignment.

Example:

const myObject = {
   name: 'John',
   age: 30
}

[array] Array Literal Assignment

Prefix: array

Body:

let ${1:arrayName} = [${2:value1}, ${3:value2}];

Description: Create an array literal assignment.

Example:

let myArray = [1, 2, 3];

[equal] Equal Condition

Prefix: equal
Body:
```
${1:value1} === ${2:value2}
```
Description: Create an equal condition.

Example:

if (x === y) {
  // Do something
}

[notequal] Not Equal Condition

Prefix: notequal
Body:
```
${1:value1} !== ${2:value2}
```
Description: Create a not equal condition.

Example:

if (x !== y) {
  // Do something
}

[greaterThan] Greater Than Condition

Prefix: greaterThan
Body:
```
${1:value1} > ${2:value2}
```
Description: Create a greater than condition.

Example:

if (x > y) {
  // Do something
}

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript Condition's

[lessThen] Less Than Condition

Prefix: lessThen
Body:
```
${1:value1} < ${2:value2}
```
Description: Create a less than condition.

Example:

if (x < y) {
  // Do something
}

[greaterThenOrEqual] Greater or Equal Condition

Prefix: greaterThenOrEqual
Body:
```
${1:value1} >= ${2:value2}
```
Description: Create a greater or equal condition.

Example:

if (x >= y) {
  // Do something
}

[lessThenOrEqual] Less or Equal Condition

Prefix: lessThenOrEqual
Body:
```
${1:value1} <= ${2:value2}
```
Description: Create a less or equal condition.

Example:

if (x <= y) {
  // Do something
}

[greaterThenOrNotEqual] Greater or Not Equal Condition

Prefix: greaterThenOrNotEqual

Body:

${1:value1} >= ${2:value2} || ${1:value1} !== ${2:value2}

Description: Create a greater or not equal condition.

Example:

if (x >= y || x !== y) {
  // Do something
}

[lessThenOrNotEqual] Less or Not Equal Condition

Prefix: lessThenOrNotEqual

Body:

${1:value1} <= ${2:value2} || ${1:value1} !== ${2:value2}

Description: Create a less or not equal condition.

Example:

if (x <= y || x !== y) {
  // Do something
}

[orCondition] Or Condition

Prefix: orCondition
Body:
```
${1:condition1} || ${2:condition2}
```
Description: Create an OR condition.

Example:

if (condition1 || condition2) {
  // Do something
}

[andCondition] And Condition

Prefix: andCondition
Body:
```
${1:condition1} && ${2:condition2}
```
Description: Create an AND condition.

Example:

if (condition1 && condition2) {
  // Do something
}

[conditionalOperator] Conditional Operator

Prefix: conditionalOperator

Body:

${1:let} ${2:name} = ${3:condition} ? ${4:value1} : ${5:value2}

Description: Create a conditional operator.

Example:

let result = condition ? value1 : value2;

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript Validation's

[zeroLengthValidation] Zero Length Validation

Prefix: zeroLengthValidation
Body:
```
${1:value}.length === 0
```
Description: Check if the string has zero length.

Example:

if (str.length === 0) {
  // String is empty
}

[positiveLengthValidation] Positive Length Validation

Prefix: positiveLengthValidation
Body:
```
${1:value}.length > 0
```
Description: Check if the string has a positive length.

Example:

if (str.length > 0) {
  // String is not empty
}

[emptyStringValidation] Empty String Validation

Prefix: emptyStringValidation
Body:
```
${1:value} === ""
```
Description: Check if the string is empty.

Example:

if (str === "") {
  // String is empty
}

[notEmptyStringValidation] Not Empty String Validation

Prefix: notEmptyStringValidation
Body:
```
${1:value} !== ""
```
Description: Check if the string is not empty.

Example:

if (str !== "") {
  // String is not empty
}

[null] Null Validation

Prefix: null
Body:
```
${1:value} === null
```
Description: Check if the value is null.

Example:

if (value === null) {
  // Value is null
}

[notnull] Not Null Validation

Prefix: notnull
Body:
```
${1:value} !== null
```
Description: Check if the value is not null.

Example:

if (value !== null) {
  // Value is not null
}

[undefined] Undefined Validation

Prefix: undefined
Body:
```
typeof ${1:value} === "undefined"
```
Description: Check if the value is undefined.

Example:

if (typeof value === "undefined") {
  // Value is undefined
}

[notundefined] Not Undefined Validation

Prefix: notundefined
Body:
```
typeof ${1:value} !== "undefined"
```
Description: Check if the value is not undefined.

Example:

if (typeof value !== "undefined") {
  // Value is not undefined
}

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript Console's

[log] Log to Console

Prefix: log
Body:
```
console.log(${1:value})
```
Description: Log a value to the console.

Example:

console.log("Hello, world!");

[warn] Warn in Console

Prefix: warn
Body:
```
console.warn(${1:value})
```
Description: Log a warning to the console.

Example:

console.warn("This is a warning message.");

[error] Error in Console

Prefix: error
Body:
```
console.error(${1:value})
```
Description: Log an error to the console.

Example:

console.error("An error occurred.");

[loges] Log String to Console

Prefix: loges
Body:
```
console.log(`$1`);
$2
```
Description: Log a string to the console.

Example:

console.log(`Hello, ${name}`);

[logobject] console log object value declaration

Prefix: logobject
Body:
```
console.log({${1:value}});
```
Description: Log an object value declaration to the console.

Example:

console.log({ data });

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript DestructureIng

[destructureobj] Destructure Object

Prefix: destructureobj

Body:

let { ${1:property} } = ${2:sourceObject}

Description: Destructure an object property.

Example:

let { name, age } = person;

[destructurearr] Destructure Array

Prefix: destructurearr

Body:

let [${1:element1}, ${2:element2}] = ${3:sourceArray}

Description: Destructure array elements.

Example:

let [first, second] = numbers;

[od] Object Destructuring

Prefix: od

Body:

const { ${1:property} } = ${2:sourceObject}

Description: Destructure an object property.

Example:

const { title, author } = book;

[ad] Array Destructuring

Prefix: ad

Body:

const [${1:element1}, ${2:element2}] = ${3:sourceArray}

Description: Destructure array elements.

Example:

const [first, second] = items;

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript Statement's

[if] Shortcut for If Statement

Prefix: if

Body:

if (${1:condition}) {
    ${2:codeBlock}
} ${3:else {
    ${4:elseBlock}
}}

Description: Insert a shortcut for an 'if' statement.

Example:

if (x > 10) {
    // Code to run if the condition is true
} else {
    // Code to run if the condition is false
}

[elseif] Shortcut for Else-If Statement

Prefix: elseif

Body:

else if (${1:condition}) {
    ${2:codeBlock}
} ${3:else {
    ${4:elseBlock}
}}

Description: Insert a shortcut for an 'else if' statement.

Example:

else if (y < 5) {
    // Code to run if this condition is true
} else {
    // Code to run if all conditions are false
}

[else] Shortcut for Else Statement

Prefix: else
Body:
```
else {
    ${2:codeBlock}
}
```
Description: Insert a shortcut for an 'else' statement.

Example:

else {
    // Code to run if the preceding conditions are false
}

[ternary] Ternary Operator Shortcut

Prefix: ternary

Body:

${1:condition} ? ${2:ifTrue} : ${3:ifFalse}

Description: Insert a shortcut for a ternary operator.

Example:

x > 10 ? 'Greater' : 'Smaller';

[switchcase] Switch...Case Statement

Prefix: switchcase

Body:

switch (${1:expression}) {
    case ${2:case1}:
        ${3:// Your code for case 1}
        break;
    case ${4:case2}:
        ${5:// Your code for case 2}
        break;
    default:
        ${6:// Your default code}
        break;
}

Description: Create a switch...case statement.

Example:

switch (day) {
    case 'Monday':
        // Code for Monday
        break;
    case 'Tuesday':
        // Code for Tuesday
        break;
    default:
        // Default code
        break;
}

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript Basic Loop's

[foreach] ForEach Loop Shortcut

Prefix: foreach

Body:

${1:array}.forEach((${2:item}) => {
    ${3: // Your code here}
    $4
});

Description: Create a forEach loop.

Example:

myArray.forEach((item) => {
    // Your code here
});

[forof] For...Of Loop Shortcut

Prefix: forof

Body:

for (const ${1:item} of ${2:iterable}) {
    ${3: // Your code here}
    $4
}

Description: Create a for...of loop.

Example:

for (const element of myIterable) {
    // Your code here
}

[forin] For...In Loop Shortcut

Prefix: forin

Body:

for (const ${1:key} in ${2:object}) {
    if (${2:object}.hasOwnProperty(${1:key})) {
        const ${3:value} = ${2:object}[${1:key}];
        ${4: // Your code here}
        $5
    }
}

Description: Create a for...in loop.

Example:

for (const key in myObject) {
    if (myObject.hasOwnProperty(key)) {
        const value = myObject[key];
        // Your code here
    }
}

[forloop] For Loop

Prefix: forloop

Body:

for (let ${1:i} = ${2:0}; ${1:i} < ${3:length}; ${1:i}++) {
    ${4:// Your code here}
}

Description: Create a for loop.

Example:

for (let i = 0; i < myArray.length; i++) {
    // Your code here
}

[whileloop] While Loop

Prefix: whileloop

Body:

while (${1:condition}) {
    ${2:// Your code here}
}

Description: Create a while loop.

Example:

while (condition) {
    // Your code here
}

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript Some Array Method's

Here's the documentation for your JavaScript array method-related snippets:

[map] Array Map

Prefix: map
Body: ${1:array}.map((${2:item}) => ${3:transformedItem})
Description: Apply map to transform an array.

Example:

const transformedArray = myArray.map((item) => transformedItem);

[filter] Array Filter

Prefix: filter
Body: ${1:array}.filter((${2:item}) => ${3:condition})
Description: Apply filter to extract elements from an array.

Example:

const filteredArray = myArray.filter((item) => condition);

[reduce] Array Reduce

Prefix: reduce
Body: ${1:array}.reduce((${2:accumulator}, ${3:item}) => ${4:accumulation}, ${5:initialValue})
Description: Apply reduce to combine elements into a single value.

Example:

const result = myArray.reduce((accumulator, item) => accumulation, initialValue);

[cmap] Const Array Map

Prefix: cmap
Body: ${1:const} ${2:result} = ${3:array}.map((${4:item}) => ${5:transformedItem});
Description: Apply map to transform an array with constant assignment.

Example:

const transformedArray = myArray.map((item) => transformedItem);

[cfilter] Const Array Filter

Prefix: cfilter
Body: ${1:const} ${2:result} = ${3:array}.filter((${4:item}) => ${5:condition});
Description: Apply filter to extract elements from an array with constant assignment.

Example:

const filteredArray = myArray.filter((item) => condition);

[creduce] Const Array Reduce

Prefix: creduce
Body: ${1:const} ${2:result} = ${3:array}.reduce((${4:accumulator}, ${5:item}) => ${6:accumulation}, ${7:initialValue});
Description: Apply reduce to combine elements into a single value with constant assignment.

Example:

const result = myArray.reduce((accumulator, item) => accumulation, initialValue);

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript Funtion's

[anonymousFunction] Anonymous Function

Prefix: anonymousFunction
Body: (${1:params}) => {\n\t${2}\n}
Description: Creates an anonymous function in ES6 syntax.

Example:

const myFunction = (params) => {
    // Your code here
}

[arrow] Arrow Function

Prefix: arrow
Body: const ${1:functionName} = (${2:param}) => {\n\t${0}\n}
Description: Create an arrow function.

Example:

const myFunction = (param) => {
    // Your code here
}

[func] Named Function

Prefix: func
Body: function ${1:functionName}(${2:param}) {\n\t${0}\n}
Description: Create a named function.

Example:

function myFunction(param) {
    // Your code here
}

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript Dom's

[addeventlistener] Add Event Listener

Prefix: addeventlistener
Body: document.addEventListener("${1:event}", (${2:param}) => {\n\t${0}\n})
Description: Add an event listener to the document.

Example:

document.addEventListener("click", (event) => {
    // Your code here
})

[removeevent] Remove Event Listener

Prefix: removeevent
Body: document.removeEventListener("${1:event}", (${2:param}) => {\n\t${0}\n})
Description: Remove an event listener from the document.

Example:

document.removeEventListener("click", (event) => {
    // Your code here
})

[createElement] Create Element

Prefix: createElement
Body: document.createElement("${1:value}")
Description: Create a new HTML element.

Example:

document.createElement("div")

[appendChild] Append Child

Prefix: appendChild
Body: ${1:parentElement}.appendChild("${2:childElement}")
Description: Append a child element to a parent element.

Example:

parentElement.appendChild(childElement)

[removeChild] Remove Child

Prefix: removeChild
Body: ${1:parentElement}.removeChild("${2:childElement}")
Description: Remove a child element from a parent element.

Example:

parentElement.removeChild(childElement)

[getElementById] Get Element by ID

Prefix: getElementById
Body: document.getElementById("${1:id}")
Description: Get an element by its ID.

Example:

document.getElementById("myElement")

[getElementsByClassName] Get Elements by Class Name

Prefix: getElementsByClassName
Body: document.getElementsByClassName("${1:className}")
Description: Get elements by their class name.

Example:

document.getElementsByClassName("myClass")

[getElementsByTagName] Get Elements by Tag Name

Prefix: getElementsByTagName
Body: document.getElementsByTagName("${1:tagName}")
Description: Get elements by their tag name.

Example:

document.getElementsByTagName("div")

[querySelector] Query Selector

Prefix: querySelector
Body: document.querySelector("${1:selector}")
Description: Query and select an element using a CSS selector.

Example:

document.querySelector(".myClass")

[querySelectorAll] Query Selector All

Prefix: querySelectorAll
Body: document.querySelectorAll("${1:selector}")
Description: Query and select all elements matching a CSS selector.

Example:

document.querySelectorAll(".myClass")

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript Api Request's

[fetch] Api Fetch Shortcut

Prefix: fetch
Description: Api Fetch Shortcut
Example:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log({data});
  })
  .catch(error => console.log(`404 page not found ${error}`));

[fetchAsync] API Fetch (Async/Await) Shortcut

Prefix: fetchAsync
Description: API Fetch with Async/Await
Example:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('HTTP error! Status: ' + response.status);
    }
    const data = await response.json();
    console.log({data});
  } catch (error) {
    console.error(`API request failed: ${error}`);
  }
}

fetchData();

[jsonFetch] Fetch JSON Part Shortcut with comments

Prefix: jsonFetch
Description: Fetch JSON Part Shortcut with comments
Example:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(requestData),
})
  .then(response => response.json())
  .then(data => {
    console.log({data});
  })
  .catch(error => {
    console.error(`Request failed: ${error.message}`);
  });

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript Api Request's Handle's

[setInterval] Set Interval Shortcut

Prefix: setInterval
Description: Create a setInterval function
Example:

setInterval(() => {
  // Your code here
}, delay);

[setTimeout] Set Timeout Shortcut

Prefix: setTimeout
Description: Create a setTimeout function
Example:

setTimeout(() => {
  // Your code here
}, delay);

[promise] Promise

Prefix: promise
Description: Creates and returns a new Promise in the standard ES6 syntax
Example:

return new Promise((resolve, reject) => {
  // Your code here
});

[thenCatch] .then and .catch Methods

Prefix: thenCatch
Description: Add the .then and .catch methods to handle promises
Example:

.then((result) => {
  // Your code for handling a successful promise
}).catch((err) => {
  console.error('Error:', err);
  // Your code for handling a promise error
}

Go to top:arrow_up:

Common & Usefull Snippet's For Javascript Import & Export

[import] Import Module

Prefix: import
Description: Imports entire module statement in ES6 syntax
Example:

import moduleName from 'module';

[importDestructing] Import Module with Destructuring

Prefix: importDestructing
Description: Imports only a portion of the module in ES6 syntax
Example:

import { importedVariable } from 'module';

[exportDefault] Export Default

Prefix: exportDefault
Description: Export a default value in ES6 syntax
Example:

export default exportValue;

[require] Require a Package

Prefix: require
Description: Require a package
Example:

require('package');

[variableRequire] Dynamic Variable Require

Prefix: variableRequire
Description: Require a package with a dynamic variable name
Example:

const variableName = require('package');

[moduleExports] Module Exports

Prefix: moduleExports
Description: Module exports from CommonJS, node syntax in ES6 format
Example:

module.exports = {
    // Your exported variables
};

[exportNamedVariable] Export Named Variable

Prefix: exportNamedVariable
Description: Export named variable in ES6 syntax
Example:

export const exportVariable = localVariable;

[exportNamedFunction] Export Named Function

Prefix: exportNamedFunction
Description: Export named function in ES6 syntax
Example:

export const functionName = (params) => {
    // Your function code here
};

Go to top:arrow_up:

Common & Usefull Snippet's For ReactJs

[importReact] Import React

Prefix: importReact
Description: Import React in your React components
Example:

import React from 'react';

[rfce] React Functional Export Component

Prefix: rfce
Description: Creates a React Functional Component with ES7 module system
Example:

import React from 'react';

function MyComponent() {
  return (
    <div>
      This is my MyComponent component
    </div>
  )
}

export default MyComponent;

[rfcp] React Functional Component with PropTypes

Prefix: rfcp
Description: Creates a React Functional Component with ES7 module system with PropTypes
Example:

import React from 'react';
import PropTypes from 'prop-types';

function MyComponent(props) {
  return (
    <div>
      This is my MyComponent component
    </div>
  )
}

MyComponent.propTypes = {
  // Define your PropTypes here
};

export default MyComponent;

[rafce] React Arrow Function Export Component

Prefix: rafce
Description: Creates a React Arrow Function Component with ES7 module system
Example:

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      This is my MyComponent component
    </div>
  )
}

export default MyComponent;

[rafcp] React Arrow Function Component with PropTypes

Prefix: rafcp
Description: Creates a React Arrow Function Component with ES7 module system with PropTypes
Example:

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = props => {
  return (
    <div>
      This is my MyComponent component
    </div>
  )
}

MyComponent.propTypes = {
  // Define your PropTypes here
};

export default MyComponent;

[reactArrowHeading] React Arrow Function My Shortcut

Prefix: reactArrowHeading
Description: React Arrow Function My Shortcut
Example:

import React from 'react';

const MyComponent = () => {
  return (
    <>
      <h1>MyComponent component</h1>
    </>
  )
}

export default MyComponent;

Go to top:arrow_up:

Common & Usefull Snippet's For React Hook's

[usestate] useState Hook

Prefix: usestate
Description: Create a useState hook
Example:

const [state, setState] = useState(initialValue);

[useeffect] useEffect Hook

Prefix: useeffect
Description: Create a useEffect hook
Example:

useEffect(() => {
    // Your code here
  }, [dependency]);

[useref] useRef Hook

Prefix: useref
Description: Create a useRef hook
Example:

const ref = useRef(initialValue);

[usecontext] useContext Hook

Prefix: usecontext
Description: Create a useContext hook
Example:

const contextValue = useContext(Context);

Go to top:arrow_up:

Common & Usefull Snippet's For Many Language's Comment's

[jsnotecomment] JavaScript Multi Comment Block

Prefix: jsnotecomment
Description: Generate a stylish multiline JavaScript comment
Example:

/********************************
 * Description or Comment
 ********************************/

[jscomment] JavaScript Comment Shortcut

Prefix: jscomment
Description: JavaScript Comment Shortcut User Snippets
Example:

/* comment */

[reactcomment] Comment Shortcut for React

Prefix: reactcomment
Description: Comment To React XML
Example:

{/* ====comment===== */}

[htmlComment] HTML Section Comment

Prefix: htmlComment
Description: Generate a stylish HTML section comment
Example:

<!-- ======= Section ============== -->
Content or Description
<!-- ======= End Section ============== -->

[cssSectionComment] CSS Section Comment

Prefix: cssSectionComment
Description: Generate a stylish CSS section comment
Example:

/* ======= Section ======= */
Content or Description
/* ======= End Section ======= */

Go to top:arrow_up:

Common & Usefull Snippet's For Html Modern MarkUp's

[htmlBootstarp] HTML Bootstrap Starter Template Shortcut

Prefix: htmlBootstarp
Description: HTML Bootstrap starter template shortcut
Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/7484/7484959.png" />
  <title>Pactise Frontend Project</title>
  <!-- ======= custom css file link up  ======= -->
  <link rel="stylesheet" href="css/style.css">
  <!-- ======= font awesome cdn file link up  -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"/>
  <!-- ======= Bootstrap style css file link up======= -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h3 class="text-center text-capitalize">Hello world!</h3>
</body>
<!-- custom javascript file link up ======= -->
<script src="js/script.js"></script>
<!-- Bootstrap js file link up======= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</html>

[htmlTailwindCss] HTML TailwindCSS Starter Template Shortcut

Prefix: htmlTailwindCss
Description: HTML TailwindCSS starter template shortcut
Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/7484/7484959.png" />
  <title>Pactise Frontend Project</title>
  <!-- ======= custom css file link up  ======= -->
  <link rel="stylesheet" href="css/style.css" />
  <!-- ======= font awesome cdn file link up  -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" />
  <!-- ======= TailwindCSS style css file link up ======= -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- ======= TailwindCSS Component library DaisyUi style css file link up ======= -->
  <link href="https://cdn.jsdelivr.net/npm/daisyui@2.50.2/dist/full.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-center capitalize text-indigo-400">Hello world!</h1>
</body>
<!-- custom javascript file link up  ======= -->
<script src="js/script.js"></script>
</html>

[!html5] My Own HTML Boilerplate Code

Prefix: !html5
Description: My Own HTML Boilerplate code
Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 align="center">Hello there how are you?</h1>
</body>
<script src="js/script.js"></script>
</html>

[*root] CSS Starter Code Shortcut

Prefix: *root
Description: CSS starter code shortcut
Example:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-transform: capitalize;
  transition: .3s all linear;
}

Go to top:arrow_up:

Common & Usefull Snippet's For Github & Terminal Lover's

[gitcommit] Git Commit Shortcut

Prefix: gitcommit
Description: Git commit shortcut

Example:

git add -A && git commit -m '${1:}' && git status

[gitconfig] Git User Config Shortcut

Prefix: gitconfig
Description: Git user config shortcut

Example:

git config user.name "Your Name" && git config user.email "youremail@gmail.com"

[gitpush] Git Push Shortcut

Prefix: gitpush
Description: Git push shortcut

Example:

git branch -M main && git remote add origin https://github.com/name/repository.git && git push -u origin main

[gitSet] Git Set Shortcut

Prefix: gitSet
Description: Git Set shortcut

Example:

git branch -M main && git remote set-url origin https://github.com/name/repository.git && git push -u origin main

[folderFileCreateFileRun] Folder And File Create Shortcut

Prefix: folderFileCreateFileRun
Description: Folder and file creation shortcut

Example:

mkdir folderName && cd folderName && touch fileName.jsx && code fileName.jsx && cd ..

[fileCreate] File Create Shortcut

Prefix: fileCreate
Description: File create shortcut

Example:

touch fileName.jsx && code fileName.jsx

[folderCreate] Folder Create Shortcut

Prefix: folderCreate
Description: Folder create shortcut
Example:
```
mkdir Components && cd Components
```

Go to top:arrow_up:

Supported languages (file extensions)

JavaScript (.js)
JavaScript React (.jsx)
Html (.html)
CSS (.css)
More Language's Added A Coming Soon :)

For questions or assistance, don't hesitate to contact us at jakaria455173@gmail.com 📧.

If you find these snippets helpful, consider leaving a star! ⭐

Super Snippets

Ikramuzzaman

Super Snippet's 💥

Table Of Contents 🙋‍♂️ content

Common & Usefull Snippet's For Javascript Variable's

[let] Let Variable Assignment

[var] Var Variable Assignment

[const] Const Variable Assignment

[object] Object Literal Assignment

[array] Array Literal Assignment

[equal] Equal Condition

[notequal] Not Equal Condition

[greaterThan] Greater Than Condition

Common & Usefull Snippet's For Javascript Condition's

[lessThen] Less Than Condition

[greaterThenOrEqual] Greater or Equal Condition

[lessThenOrEqual] Less or Equal Condition

[greaterThenOrNotEqual] Greater or Not Equal Condition

[lessThenOrNotEqual] Less or Not Equal Condition

[orCondition] Or Condition

[andCondition] And Condition

[conditionalOperator] Conditional Operator

Common & Usefull Snippet's For Javascript Validation's

[zeroLengthValidation] Zero Length Validation

[positiveLengthValidation] Positive Length Validation

[emptyStringValidation] Empty String Validation

[notEmptyStringValidation] Not Empty String Validation

[null] Null Validation

[notnull] Not Null Validation

[undefined] Undefined Validation

[notundefined] Not Undefined Validation

Common & Usefull Snippet's For Javascript Console's

[log] Log to Console

[warn] Warn in Console

[error] Error in Console

[loges] Log String to Console

[logobject] console log object value declaration

Common & Usefull Snippet's For Javascript DestructureIng

[destructureobj] Destructure Object

[destructurearr] Destructure Array

[od] Object Destructuring

[ad] Array Destructuring

Common & Usefull Snippet's For Javascript Statement's

[if] Shortcut for If Statement

[elseif] Shortcut for Else-If Statement

[else] Shortcut for Else Statement

[ternary] Ternary Operator Shortcut

[switchcase] Switch...Case Statement

Common & Usefull Snippet's For Javascript Basic Loop's

[foreach] ForEach Loop Shortcut

[forof] For...Of Loop Shortcut

[forin] For...In Loop Shortcut

[forloop] For Loop

[whileloop] While Loop

Common & Usefull Snippet's For Javascript Some Array Method's

[map] Array Map

[filter] Array Filter

[reduce] Array Reduce

[cmap] Const Array Map

[cfilter] Const Array Filter

[creduce] Const Array Reduce

Common & Usefull Snippet's For Javascript Funtion's

[anonymousFunction] Anonymous Function

[arrow] Arrow Function

[func] Named Function

Common & Usefull Snippet's For Javascript Dom's

[addeventlistener] Add Event Listener

[removeevent] Remove Event Listener

[createElement] Create Element

[appendChild] Append Child

[removeChild] Remove Child

[getElementById] Get Element by ID

[getElementsByClassName] Get Elements by Class Name

[getElementsByTagName] Get Elements by Tag Name

[querySelector] Query Selector

[querySelectorAll] Query Selector All

Common & Usefull Snippet's For Javascript Api Request's

[fetch] Api Fetch Shortcut

[fetchAsync] API Fetch (Async/Await) Shortcut

[jsonFetch] Fetch JSON Part Shortcut with comments