DEV Community

Discussion on: Improve Your Workflow With These Tips For VS Code

Collapse
 
virgilwashere profile image
Virgil • Edited

🚦 must have extensions

πŸ¦Έβ€β™‚οΈ superpowered snippets

Add keybindings to your code snippets

...by inserting snippets in your keybindings.

Edit keybindings.json

Run Preferences: Open Keyboard Shortcuts (JSON) command.

Add keyboard shortcuts to snippets.

  • The binding Command to use: Insert Snippet
  • Add an Arg parameter name with the Name of the snippet.
  • Set When to "editorTextFocus"

To use snippets only specific languages:

  • Append this to When : && editorLangId == 'shellscript'
  • Add an Arg parameter langid with the language Id

Official docs: code.visualstudio.com/docs/editor/...

shellscript only snippet

shellscript only snippet

    {
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus && editorLangId == 'shellscript'",
        "args": {
            "langId": "shellscript",
            "name": "\"unofficial\" bash strict mode"
        }
    },
Enter fullscreen mode Exit fullscreen mode

key chord combinations

Find a key chord combination that you can use to group snippets into logical sets.

For my dev environment, I use ctrl+alt+i chord to ctrl+alt+ <key>, with the number pad keys for snippets that make up shell script boilerplate.

ctrl+alt+numpad0 for shebang
ctrl+alt+numpad1 for script header (#insert a document summary)
ctrl+alt+numpad2 for shellscript ("unofficial" bash strict mode)
ctrl+alt+d for date stamp
ctrl+alt+f for filename

example keybindings.json

keybindings.json examples

keybindings.json

    {
        "key": "ctrl+alt+i ctrl+alt+NumPad0",
        "mac": "cmd+alt+i cmd+alt+NumPad0",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "name": "shebang",
        }
    },
    {
        "key": "ctrl+alt+i ctrl+alt+NumPad2",
        "mac": "cmd+alt+i cmd+alt+NumPad2",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus && editorLangId == 'shellscript'",
        "args": {
            "langId": "shellscript",
            "name": "\"unofficial\" bash strict mode"
        }
    },
    {
        "key": "ctrl+alt+i ctrl+alt+f",
        "mac": "cmd+alt+i cmd+alt+f",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "name": "filename",
        },
    },
Enter fullscreen mode Exit fullscreen mode

And also bind ctrl+i to Insert Snippet. (no args)

    {
        "key": "ctrl+i",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
    },
Enter fullscreen mode Exit fullscreen mode

ℹ️ Reason for edit:

  • πŸ’‘ add keybinding examples and vscode doc link
  • πŸ“ wrong bracket extension. I was on my phone when I wrote this originally, and couldn't confirm the correct extension.
Collapse
 
jsgoose profile image
Jonathan Sexton

Awesome list Virgil! I have 3 out of the 4 must have extensions so I consider that a win :D

Great tip on the keybindings as well, I remember setting mine up and it was a pain but worth it in the long run for sure.

Collapse
 
virgilwashere profile image
Virgil

@jsgoose , I've just added some example keybindings and changed the bracket colorizer to the one I intended.

Thanks for the original that inspired me to contribute !