* Updated (04/09/2019)
Hi I have been a fan of sublime text for a while now. But also tried different IDE available in the community. Recently been trying ATOM, but it seems a little laggy at times. Anyways here are my top shortcuts I used for Visual Studio Code editor:
Most Used shortcuts (Default)
[ctrl + `] Opening terminal console
[ctrl + d] Select next occurence [ctrl + u] deselect back
[ctrl + f2] Select all occurence
[ctrl + k ctrl + c] Add line comment
[alt + shift + a ] Adds a multi-line comment
[ctrl + p] Open command palette and find files quick
[ctrl + shift + f ] Find text in files
[ctrl + shift + \ ] Go to matching bracket
[alt + shift + down or up] Duplicate line down or up
[alt + shift + left or right ] Shrink or grow selection on brackets
Extra
If you use the keybindings below and disabled the closing of windows shortcut ctrl+w and ctrl+shift+w , another extra shortcut I used are:
alt + [ – Jumps to matching bracket “{}”
alt + ] – Jumps to matching tag “<tag></tag>”
ctrl + w – Selection grow inside brackets
ctrl + shift + w – Selection grow inside tags.
Secondary Shortcuts
[ ctrl + , ] Open settings for configurations
[ctrl + “[” or “]” ] Moves your current line via tab
[ alt + arrow left or right ] Go back and forward
[ F12 or CTRL + F2 or ALT F12 ] Go to definition and implementation, peek definition
[ F8 ] Go to the next error
[ ctrl + alt + up or down ] Add a cursor for multiple editions
[ctrl + k + s ] Open keyboard shortcut
Tips:
* Disable ctrl + w and ctrl + shift + w – these closes the current window and application which is really annoying and we can really use the shortcut combination.
Life quality plugins
– Auto Rename Tag: Lets you rename your opening and closing tag simultaneously.
– Bracket Pair Colorizer: Makes it easy to see where those bracket ends in your code.
– Highlight Matching Tag: You can visually see the highlighted tag both open and closing tag.
– Beautify by hookyqr: Nothing like easily format your JS/HTML/CSS in one fell swoop of the keyboard.
Technology Helpers
– ReactJS Code Snippets: Easily create React code snippet for eg: rcc, gives you building boy of a react component. Redux snippet is also included.
– Cordova Tools: If you are developing with Apache Cordova , this one is a must have.
– WordPress Snippet: When working on snippets theres nothing like having a code hinter, snippets and auto-completion at hand.
Configuration Settings
– Use this in your settings.json file.
{ “files.autoSave”: “off”, “editor.tabSize”: 2, “editor.detectIndentation”: false, “breadcrumbs.enabled”: true, “explorer.confirmDragAndDrop”: false, “explorer.confirmDelete”: false, “emmet.triggerExpansionOnTab”: true, “emmet.includeLanguages”: { “php”: “html” }, “emmet.showSuggestionsAsSnippets”: true, “editor.snippetSuggestions”: “top”, “window.zoomLevel”: 0, “typescript.tsserver.log”: “verbose”, “javascript.updateImportsOnFileMove.enabled”: “always”}
– Use this in your keybinding.json file
[ { “key”: “ctrl+shift+u”, “command”: “editor.action.transformToUppercase”, “when”: “editorTextFocus” }, { “key”: “ctrl+shift+l”, “command”: “editor.action.transformToLowercase”, “when”: “editorTextFocus” }, { “key”: “ctrl+shift+alt+l”, “command”: “editor.action.selectHighlights”, “when”: “editorFocus” }, { “key”: “ctrl+shift+l”, “command”: “-editor.action.selectHighlights”, “when”: “editorFocus” }, { “key”: “shift+alt+right”, “command”: “-editor.action.smartSelect.grow”, “when”: “editorTextFocus” }, { “key”: “ctrl+w”, “command”: “editor.action.smartSelect.grow”, “when”: “editorTextFocus” }, { “key”: “ctrl+shift+w”, “command”: “editor.emmet.action.balanceOut” }, { “key”: “alt+]”, “command”: “editor.emmet.action.matchTag” }, { “key”: “alt+[“, “command”: “editor.action.jumpToBracket”, “when”: “editorTextFocus” }, { “key”: “ctrl+shift+\\”, “command”: “-editor.action.jumpToBracket”, “when”: “editorTextFocus” },]
