Create custom VSCode shortcuts and code snippets

Keyboard Shortcuts

on Linux, go to:

File -> Preferences -> KeyboardShortcuts -> Open Keyboard Shortcuts JSON (top-right icon)

On Mac:

Code -> Preferences -> KeyboardShortcuts -> Open Keyboard Shortcuts JSON (top-right icon)

Then add custom key bindings like this:

Ctrl+D to duplicate line / selection:

sh
{ "key": "ctrl+d", "command": "editor.action.duplicateSelection" }

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

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

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

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

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

On Mac:

Code -> Preferences -> Configure User Snippets -> search for TypescriptReact

Then paste this in the json file:

json
"New React Component": { "prefix": ["react-component", "rc"], "body": ["import React, {useState} from 'react';\n\nconst ${1} = () => {\n\treturn (\n\t\t<div>\n\n\t\t</div>\n\t)\n}\n\nexport default ${1}"], "description": "New React Component" }, "New React Component With Props": { "prefix": ["react-component-props", "rcp"], "body": ["import React, {useState} from 'react';\n\ninterface 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</div>\n\t)\n}\n\nexport default ${1}"], "description": "New React Component With Props" }

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)

ts
import React, {useState} from 'react'; const Comp1 = () => { return ( <div> </div> ) } export default Comp1 // and import React, {useState} from 'react'; interface IComp2Props { } const Comp2 = (props: IComp2Props) => { return ( <div> </div> ) } export default Comp2

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