DEV Community

Alex Adam
Alex Adam

Posted on • Originally published at alexadam.dev

1 2

Create custom VSCode shortcuts and code 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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay