Posted 25 Apr 2022 | by anythingultimate
How to create VS code custom snippet

 

Create VS code custom snippet

Open command pallet using:

Ctrl+Shift+p


on the command pallet, we first search snippet, then select Preference: Configure User snippet. If we want this snippet to work only on a file with an extension of .jsx, then search react and select Javascriptreact.json and paste the code there. If we want that this snippet should work on a file with a .js the extension also then search javascript and select Javascript.json and paste the code there also.

For example, let us we want to generate a react arrow function component using rc. Paste the below code to use the snippet as rc

{
  "React Component": {
    "prefix": "rc",
    "body": [
      "const ${1:ComponentName} = () => {",
      "    return (",
      "        <>",
      "            $2",
      "        </>",
      "    )",
      "}",
      "",
      "export default ${1:ComponentName}",
      ""
    ],
    "description": "React Component"
  }
}

You can use a snippet generator to generate snippet codes

{
    "React Component": {
        "prefix": "rc",
        "body": [
            "import * as React from 'react'",
            "",
            "const ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}} = () => {",
            "    return (",
            "        <>",
            "            $2",
            "        </>",
            "    )",
            "}",
            "",
            "export default ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/g}}",
            ""
        ],
        "description": "React Component"
    }
}




Liked This Page. Spare a while to share it.

About The Admin Of This Blog:

Author Of This Article

I am a passionate and experienced Full Stack Web Developer having 4+ years of experience in Web Development using Laravel, React, WordPress, Angular, Vue, Bootstrap, Tailwind CSS, Saas, ES6, etc. I like to explore and learn about new technologies whenever I get any chance.

Stay Connected With Me On GooglePlus, Facebook And Twitter

Calculator

C
±
x ²
%
7
8
9
*
(
4
5
6
/
)
1
2
3
-
+
0
.
=
x ²
x^
sin
cos
tan
x !
π
C
log
ln
e
rad
7
8
9
*
(
4
5
6
/
)
1
2
3
-
+
0
.
%
±
=

Calender

Sa
Su
Mo
Tu
We
Th
Fr

Total Blog Views