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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay