js.xml

<?xml version='1.0' encoding='utf-8'?>
<snippets language="js">
  <snippet>
    <tag>arrow</tag>
    <text><![CDATA[ ${1} = (${2}) => {
    ${3}
  }]]></text>
    <description>arrow function</description>
  </snippet>
  <snippet>
    <text><![CDATA[{
	${0}
}]]></text>
    <tag>b</tag>
    <description>block</description>
  </snippet>
  <snippet>
    <tag>cc</tag>
    <text><![CDATA[class ${1:name} extends Component {
  constructor(props) {
    super(props);
    this.state = { ${2} };
  }
  render() {
    return ( 
    <>
          ${3}
    </>
     );
  }
}

export default ${1};]]></text>
    <description>Component - class</description>
  </snippet>
  <snippet>
    <tag>fc</tag>
    <text><![CDATA[function ${1:name}() {
    return (
          <>
               ${2}
          </>
    );
}

export default ${1};]]></text>
    <description>Component - function</description>
  </snippet>
  <snippet>
    <tag>fce</tag>
    <text><![CDATA[export default function ${1:name}() {
    return (
          <>
               ${2}
          </>
    );
}]]></text>
    <description>Component - function exported</description>
  </snippet>
  <snippet>
    <tag>fcs</tag>
    <text><![CDATA[const ${1:name} = props => {
  return (
     <>
          ${2}
     </>
  );
};

export default ${1};
]]></text>
    <description>Component - function stateless</description>
  </snippet>
  <snippet>
    <tag>fff</tag>
    <text><![CDATA[import * as React from "react";
import { useState, useEffect } from "react";


export default function ${1:name}() {
    return (
          <>
               ${2}
          </>
    );
}]]></text>
    <description>Component - with imports</description>
  </snippet>
  <snippet>
    <text><![CDATA[${1:condition} ? ${2:if_true} : ${3:if_false}]]></text>
    <tag>?</tag>
    <description>conditional</description>
  </snippet>
  <snippet>
    <text><![CDATA[console.log(${1:first_argument})]]></text>
    <tag>log</tag>
    <description>console.log</description>
  </snippet>
  <snippet>
    <text><![CDATA[const ${1:name} = ${2:value}]]></text>
    <description>const</description>
    <tag>const</tag>
  </snippet>
  <snippet>
    <tag>do</tag>
    <text><![CDATA[do {
   ${1:statement}
}]]></text>
    <description>do</description>
  </snippet>
  <snippet>
    <text><![CDATA[do {
   ${1:statement}
}
while ( ${2:condition} );
]]></text>
    <tag>dowhile</tag>
    <description>do..while</description>
  </snippet>
  <snippet>
    <tag>else</tag>
    <text><![CDATA[else {
	${1:statement}
}]]></text>
    <description>else</description>
  </snippet>
  <snippet>
    <tag>export</tag>
    <text><![CDATA[export default ${1};]]></text>
    <description>export</description>
  </snippet>
  <snippet>
    <text><![CDATA[for ( let i=${1:0}; i<${2:arr.length}; ${3:i++} ) {
	${4:statements}
}
]]></text>
    <tag>for</tag>
    <description>for</description>
  </snippet>
  <snippet>
    <tag>forEach</tag>
    <text><![CDATA[forEach(${1:item} => {
     ${2}
});]]></text>
    <description>forEach</description>
  </snippet>
  <snippet>
    <tag>forE</tag>
    <text><![CDATA[${1:items}.forEach(${2:item} => {
     ${3}
});]]></text>
    <description>forEach</description>
  </snippet>
  <snippet>
    <text><![CDATA[for ( ${1:prop} in ${2:obj} ) {
	${3:statements}
}]]></text>
    <tag>forin</tag>
    <description>for..in</description>
  </snippet>
  <snippet>
    <text><![CDATA[/**
	@name ${1}
	@function
	@description
*/
function ${1:name} (${2:param}) {
	${3:statements}
}]]></text>
    <tag>function</tag>
    <description>function</description>
  </snippet>
  <snippet>
    <tag>fn</tag>
    <text><![CDATA[function ${1:name} (${2:param}) {
	${3:statements}
}]]></text>
    <description>function minimal</description>
  </snippet>
  <snippet>
    <text><![CDATA[if (${1:condition}) {
	${2:statements}
}]]></text>
    <tag>if</tag>
    <description>if</description>
  </snippet>
  <snippet>
    <text><![CDATA[if ( ${1:condition} ) {
	${2:statement_1}
} else {
	${3:statement_2}
}]]></text>
    <tag>ifelse</tag>
    <description>if..else</description>
  </snippet>
  <snippet>
    <tag>im</tag>
    <text><![CDATA[import '${1:module}';]]></text>
    <description>import</description>
  </snippet>
  <snippet>
    <tag>imf</tag>
    <text><![CDATA[import ${1:module} from ${2:from};]]></text>
    <description>import from</description>
  </snippet>
  <snippet>
    <tag>imr</tag>
    <text><![CDATA[import * as React from "react";]]></text>
    <description>Import React</description>
  </snippet>
  <snippet>
    <tag>imrd</tag>
    <text><![CDATA[import ReactDOM from "react-dom";]]></text>
    <description>Import ReactDom</description>
  </snippet>
  <snippet>
    <tag>imue</tag>
    <text><![CDATA[import { useEffect } from "react";]]></text>
    <description>Import useEffect</description>
  </snippet>
  <snippet>
    <tag>imus</tag>
    <text><![CDATA[import { useState } from "react";]]></text>
    <description>Import useState,</description>
  </snippet>
  <snippet>
    <tag>imues</tag>
    <text><![CDATA[import { useState, useEffect } from "react";]]></text>
    <description>Import useState, useEffect</description>
  </snippet>
  <snippet>
    <tag>imuse</tag>
    <text><![CDATA[import { useState, useEffect } from "react";]]></text>
    <description>Import useState, useEffect</description>
  </snippet>
  <snippet>
    <text><![CDATA[let ${1:name} = ${2:value};]]></text>
    <description>let</description>
    <tag>let</tag>
  </snippet>
  <snippet>
    <text><![CDATA[/**
	@name ${1:parent}.${2:method_name}
	@function
	@description ${3:description}
*/
${2}: function () {
	${5:statements}
}${4:,} // End ${2}]]></text>
    <tag>method</tag>
    <description>method</description>
  </snippet>
  <snippet>
    <tag>mt</tag>
    <text><![CDATA[${1}() {
	${2:statements}
}]]></text>
    <description>method minimal</description>
  </snippet>
  <snippet>
    <text><![CDATA[/**
	@name ${1:module_name}
	@namespace
	@description ${2:description}
*/
var ${1} = function () {
  
  // Private
  
  // Public
  
  return {
    ${0}
  };

}(); // End ${1}]]></text>
    <tag>module</tag>
    <description>module</description>
  </snippet>
  <snippet>
    <tag>nfcx</tag>
    <text><![CDATA[
export function generateStaticParams({ params }) {
  // return static params
  // see https://nextjs.org/docs/app/api-reference/functions/generate-static-params for more
  return {
     ${1:id} : params.${1},
  }
}
 
// Three versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
// params : { ${1}: params.${1} } object.

export default function Page({ params }) {
  const ${1} = params.${1};
  return ${1};
}]]></text>
    <description>N - Comonent dynamic params to static</description>
  </snippet>
  <snippet>
    <tag>nfc</tag>
    <text><![CDATA[export default function ${1:Name}({ params }) {
  return(
     <>
          ${2}
     </>
  );
}]]></text>
    <description>N - Component</description>
  </snippet>
  <snippet>
    <tag>nerror</tag>
    <text><![CDATA['use client' // Error components must be Client Components
 
import { useEffect } from 'react'
 
export default function Error({ error, reset }) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}]]></text>
    <description>N - Error Handling</description>
  </snippet>
  <snippet>
    <tag>ngmd</tag>
    <text><![CDATA[
export function generateMetadata({ params }) {
  // return dynamic metadata
  // see https://nextjs.org/docs/app/api-reference/functions/generate-metadata for more
  return {
     title : params.${1},
     //...
  }
}]]></text>
    <description>N - Generate dynamic metadata</description>
  </snippet>
  <snippet>
    <tag>nhead</tag>
    <text><![CDATA[<Head> ${1} </Head>]]></text>
    <description>N - Head</description>
  </snippet>
  <snippet>
    <tag>nimgsp</tag>
    <text><![CDATA[import { GetStaticProps } from "next";
]]></text>
    <description>N - Import Get Static Props</description>
  </snippet>
  <snippet>
    <tag>nimh</tag>
    <text><![CDATA[import Head from "next/head";
]]></text>
    <description>N - Import Head</description>
  </snippet>
  <snippet>
    <tag>nimigsp</tag>
    <text><![CDATA[import { InferGetStaticPropsType } from "next";]]></text>
    <description>N - Import Infer Get Static Props</description>
  </snippet>
  <snippet>
    <tag>niml</tag>
    <text><![CDATA[import Link from "next/link";
]]></text>
    <description>N - Import Link</description>
  </snippet>
  <snippet>
    <description>N - Loading</description>
    <tag>nload</tag>
    <text><![CDATA[
export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />
}]]></text>
  </snippet>
  <snippet>
    <tag>nuse</tag>
    <text><![CDATA["use client"]]></text>
    <description>N - Use Client</description>
  </snippet>
  <snippet>
    <text><![CDATA[param {${1:type}} ${2:name} ${3:description}	]]></text>
    <tag>param</tag>
    <description>@param</description>
  </snippet>
  <snippet>
    <text><![CDATA[returns {${1:return_type}} ${2:description}]]></text>
    <tag>returns</tag>
    <description>@returns</description>
  </snippet>
  <snippet>
    <tag>setInterval</tag>
    <text><![CDATA[setInterval(() => {
     ${2}
}, ${1:intervalTime});]]></text>
    <description>setInterval</description>
  </snippet>
  <snippet>
    <tag>setTimeout</tag>
    <text><![CDATA[setTimeout(() => {
     ${2}
}, ${1:delayTime});]]></text>
    <description>setTimeout</description>
  </snippet>
  <snippet>
    <text><![CDATA[switch ( ${1:expression} ) {
	case ${2:label_1}:
		${3:statement_1}
		break;
	case ${4:label_2}:
		${5:statement_2}
		break;
	case ${6:label_3}:
		${7:statement_3}
		break;
	default:
		${8:statement_def}
		break;
}
]]></text>
    <tag>switch</tag>
    <description>switch</description>
  </snippet>
  <snippet>
    <text><![CDATA[try {
   ${1:statement_1}
}
catch ( ${2:error} ) {
   ${3:statement_2}
}]]></text>
    <tag>tc</tag>
    <description>try..catch</description>
  </snippet>
  <snippet>
    <text><![CDATA[try {
   ${1:statement_1}
}
catch ( ${2:error} ) {
   ${3:statement_2}
}
finally {
	${4:statement_3}
}]]></text>
    <tag>tcf</tag>
    <description>try..catch..finally</description>
  </snippet>
  <snippet>
    <tag>usec</tag>
    <text><![CDATA[const ${1} = useContext(${2});]]></text>
    <description>useContext</description>
  </snippet>
  <snippet>
    <tag>usee</tag>
    <text><![CDATA[useEffect(() => {
  ${2}
}, [${1}]);]]></text>
    <description>useEffect</description>
  </snippet>
  <snippet>
    <tag>uses</tag>
    <text><![CDATA[const [${1}, set${2}] = useState(${3});
]]></text>
    <description>useState</description>
  </snippet>
  <snippet>
    <text><![CDATA[var ${1:vname} = ${2:value};]]></text>
    <tag>var</tag>
    <description>var</description>
  </snippet>
  <snippet>
    <text><![CDATA[while ( ${1:condition} ) {
	${2:statement}
}]]></text>
    <tag>while</tag>
    <description>while</description>
  </snippet>
</snippets>