JS Snippet

JS Snippet

  • File –> Preferences –> Configure User Snippets
  • Snippet for clgr in javascript json is written
  •  “Print to ConsoleBigger”: {
        “body”: [“console.log(`%c ${$1}`,’color:red;font-size:20px’);”, “$2”],
        “prefix”: “clgr”,
        “description”: “console log”
      },
  • $1 is the first cursor position…followed by $2 and so on..
  • type clgr in your js file –
    console.log(`%c ${}`,’color:red;font-size:20px’);
  • you can use variable name in the place holder
 
				
					{
  // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }

  "Fat Arrow Function": {
    "body": "const $1 = ($2) => {\n console.log('$3');\n};\n$1();",
    "prefix": "fatArr",
    "description": "Creating Fat Arrow Function"
  },

  "Print to Console": {
    "body": ["console.log('$1');", "$2"],
    "prefix": "cl",
    "description": "console log"
  },
  "Print to Console1": {
    "body": ["console.log($1);", "$2"],
    "prefix": "clg",
    "description": "console log"
  },
  "Print to ConsoleBigger": {
    "body": ["console.log(`%c ${$1}`,'color:red;font-size:20px');", "$2"],
    "prefix": "clgr",
    "description": "console log"
  },
  "Fat Arrow Function1": {
    "body": "const $1 = ($2) => {\n console.log('$3');\n}",
    "prefix": "fatArr1",
    "description": "Creating Fat Arrow Function"
  }
}

				
			
				
					import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

const App = () => {
  let name = "anurag";
  console.log(`%c ${name}`, "color:red;font-size:20px");

  return (
    <>
      <h2> Hello welcome to reactjs!!! </h2>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Leave a Comment