VS Code snippet: console.log(), React FC

When coding React, I use React plus Typescript pattern a lot. Also, you

import { FC } from "react"

interface OptionsProps {

}

export const Options: FC<OptionsProps> = () => {
  return (
    <>

    </>
  )
}

So, I made a snippet in VS-Code to reduce the time and headache of writing it every time.

• Open VS Code

• Click on the Manage(Gear icon). It is by default at the bottom left corner. Click on User Snippets

  • Or press Ctrl + Shift + P, type user snippet, and select Snippets: Configure User Snippets

• Select New Global Snippets file... (you can create a snippet for ONLY one particular project too, but I like to make global snippets so I don't have to write it again). You can also add it to the already created snippet file too. By default, if there is already a saved snippet file, it will show at the top of the list.

• Type the name of the snippet file. It can be anything. Like, react-snippets, vue-snippets, nike-is-on-the-fire-today, etc.

• You will have to add the snippets I added inside this outer object { }

console.log() snippet

the shortcut I added is cl. And here is the snippet:

    "Print to console": {
        "prefix": "cl",
        "scope": "javascript,typescript,javascriptreact,typescriptreact,vue",
        "body": ["console.log($1)"],
        "description": "console.log"
    },

React FC snippet

the shortcut is rfc. And here is the snippet:

"reactComponent": {
        "prefix": "rfc",
        "scope": "javascript,typescript,javascriptreact,typescriptreact",
        "body": [
          "import { FC } from \"react\"",
          "",
          "interface ${TM_FILENAME_BASE}Props {",
          "\t${1}",
          "}",
          "",
          "export const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = (${2}) => {",
          "\treturn (",
          "\t\t<>",
          "\t\t\t$0",
          "\t\t</>",
          "\t)",
          "}",
          "",
        ],
        "description": "React component"
    },