DEV Community

Alex Adam
Alex Adam

Posted on • Originally published at alexadam.dev

Create custom VSCode shortcuts and code snippets

#vscode #react #typescript #snippets

Keyboard Shortcuts

on Linux, go to:

File -> Preferences -> KeyboardShortcuts -> Open Keyboard Shortcuts JSON (top-right icon)
Enter fullscreen mode Exit fullscreen mode

On Mac:

Code -> Preferences -> KeyboardShortcuts -> Open Keyboard Shortcuts JSON (top-right icon)
Enter fullscreen mode Exit fullscreen mode

Then add custom key bindings like this:

Ctrl+D to duplicate line / selection:

{
  "key": "ctrl+d",
  "command": "editor.action.duplicateSelection"
}
Enter fullscreen mode Exit fullscreen mode

Ctrl+Shift+L to insert a console.log with the selected text:

{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}
Enter fullscreen mode Exit fullscreen mode

Or Ctrl+Shift+L to insert a console.log with the clipboard's content:

{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${CLIPBOARD}', ${CLIPBOARD})"
  }
}
Enter fullscreen mode Exit fullscreen mode

More useful variables: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables

Code Snippets

To add some React Component code snippets, on Linux, go to:

File -> Preferences -> Configure User Snippets -> search for TypescriptReact
Enter fullscreen mode Exit fullscreen mode

On Mac:

Code -> Preferences -> Configure User Snippets -> search for TypescriptReact
Enter fullscreen mode Exit fullscreen mode

Then paste this in the json file:

 "New React Component": {
  "prefix": ["react-component", "rc"],
  "body": ["const ${1} = () => {\n\treturn (\n\t\t<div>\n\n\t\t\n\t)\n}\n\nexport default ${1}"],
  "description": "New React Component"
 },
 "New React Component With Props": {
  "prefix": ["react-component-props", "rcp"],
  "body": ["interface I${1}Props {\n\t\n}\n\nconst ${1} = (props: I${1/(.*)/${1:/capitalize}/}Props) => {\n\treturn (\n\t\t<div>\n\n\t\t\n\t)\n}\n\nexport default ${1}"],
  "description": "New React Component With Props"
 }
Enter fullscreen mode Exit fullscreen mode

To use the snippets, open a tsx file and type react or rcp -> you'll see the snippets' names in the auto-complete pop-up.

Code output example (you can edit the component's name)

const Comp1 = () => {
  return (
    <div>

    </div>
  )
}

export default Comp1

// and

interface IComp2Props {

}

const Comp2 = (props: IComp2Props) => {
  return (
    <div>

    </div>
  )
}

export default Comp2
Enter fullscreen mode Exit fullscreen mode

More: https://code.visualstudio.com/docs/editor/userdefinedsnippets

Top comments (0)

Read next

simonjohansson profile image

Node.js Frameworks Roundup 2024 — Elysia / Hono / Nest / Encore — Which should you pick?

Simon Johansson -

travislramos profile image

The Resurgence of Server-Side Rendering in the JavaScript Era

Travis Ramos -

mnkow profile image

From Monolith to Monorepo: A Next.js Migration Story

Michal Kowalkowski -

arghodev profile image

🌀What’s New in TypeScript: Essential Updates, Advantages, and Tips for 2024

Argho Dev -