VSCode: Editor Settings and Shortcuts
posted in dev-setup on • by Wouter Van Schandevijl
Pragmatic Tip 22: The editor should be an extension of your hand; make sure your editor is configurable, extensible, and programmable.
Basic Editing
Alt
+
Up/Down
: Move Line Up/Down
Shift
+
Alt
+
Up/Down
: Copy Line Down/Up
Control
+
Shift
+
K
: Delete Line
Control
+
L
: Select whole line (expandLineSelection)
Shift
+
Alt
+
Left/Right
: Shrink/Expand Selection
Control
+
/
: Toggle Line Comment
Custom shortcuts:
Control Shift J: Join Lines- Change End Of Line Sequence
- Change File Encoding
- Convert Indentation to Spaces/Tabs
- Detect Indentation from Content
- Copy With Syntax Highlighting (Also see extension octref/polacode)
- Sort Lines Ascending/Descending
- Transform to Lowercase / Title Case / Uppercase
- View: Toggle Control Characters
- View: Toggle Render Whitespace
Settings
// settings.json
// There is (extensive) intellisense for each setting key and its valid values!
// Some Control Shift P actions:
// Preferences: Open Settings (JSON)
// Preferences: Open Default Settings (JSON)
{
"files.encoding": "utf8",
"files.autoGuessEncoding": false,
"files.eol": "auto",
// Fira Code: Monospaced font with programming ligatures
// https://github.com/tonsky/FiraCode
"editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.cursorStyle": "line",
"editor.cursorBlinking": "blink",
"editor.cursorWidth": 4,
"editor.letterSpacing": 0,
// Whitespace
"editor.tabSize": 4,
"editor.autoIndent": true,
"editor.detectIndentation": true,
"editor.insertSpaces": true, // Ignored when detectIndentation is true
"files.insertFinalNewline": true,
"files.trimFinalNewlines": false,
"files.trimTrailingWhitespace": true,
"[markdown]": {
"files.trimTrailingWhitespace": false,
},
"editor.renderWhitespace": "all",
// Look
"breadcrumbs.enabled": false,
"editor.minimap.enabled": false,
"editor.wordWrap": "off",
"editor.wordWrapColumn": 140, // when wordWrap is wordWrapColumn or bounded
"editor.rulers": [120, 180],
// Feel
"editor.autoClosingBrackets": "always",
"editor.autoClosingQuotes": "always",
"editor.autoSurround": "languageDefined",
"files.defaultLanguage": "",
"files.associations": {
"*.ini.php": "ini",
},
}
File Management
Control
+
K
,
S
: File: Save All
Control
+
K
,
Control
+
W
: View: Close All Editors
Control
+
K
,
F
: File: Close Workspace
Control
+
K
,
Control
+
O
: File: Open Folder...
Control
+
K
,
M
: Change language mode
Alt
+
Z
: View: Toggle Word Wrap
Custom shortcut:
Control K, Control M: View: Toggle Minimap
Navigation
Control
+
P
: Quick Open
Control
+
R
: File: Open Recent...
Control
+
K
,
Control
+
P
: View: Show All Editors
Control
+
T
: Go to Symbol in Workspace...
Control
+
G
: Go to Line...
Control
+
Shift
+
O
: Go to Symbol in File...
Alt
+
Left/Right
: Go back / forward
Control
+
K
,
Control
+
Q
: Go to Last Edit Location
Control
+
Shift
+
µ
: Go to matching Bracket
Folding
Control
+
Shift
+
)
: Fold region
Control
+
Shift
+
^
: Unfold region
Control
+
K
,
Control
+
à
: Fold All
Control
+
K
,
Control
+
J
: Unfold All
Control
+
K
,
Control
+
!
: Fold all regions
Control
+
K
,
Control
+
ç
: Unfold all regions
Intellisense
Control
+
Space
: Trigger Suggest
F12
: Go to Definition (Or: Control + Click)
Alt
+
F12
: Peek Definition
Control
+
K
,
F12
: Open Definition on the Side (Or: Control + Alt + Click)
Control
+
F12
: Go to Implementation
Control
+
Shift
+
F12
: Peek Implementation
Shift
+
F12
: Peek References
Shift
+
Alt
+
F12
: References: Find All References
{
"editor.tabCompletion": "on",
"editor.suggestSelection": "first",
"editor.acceptSuggestionOnEnter": "off",
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": false
},
"editor.parameterHints.cycle": true,
}
Snippets
Control
+
Alt
+
J
: Insert Snippet
Control+Shift+P: “Preferences: Configure User Snippets”
- New Global Snippets file…: Contains comments explaining how to create one
- Create snippets for a specific language or project
- Configure Existing Snippets
{
// Snippet Variables:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
"console.log": {
"scope": "typescript,javascript,typescriptreact,javascriptreact",
"prefix": "cl",
"body": ["console.log('$0');"],
"description": "console.log()"
}
}
Multi Cursor
Control
+
Alt
+
Up/Down
: Add Cursor Above/Below
Shift
+
Alt
+
I
: Add Cursors to Line Ends
Control
+
D
: Add Selection To Next Find Match
Control
+
U
: Soft Undo (Undo last cursor operation)
Control
+
K
,
Control
+
D
: Move Last Selection To Next Find Match
Control
+
Shift
+
L
: Select All Occurrences of Find Match
Mouse Multi Cursor
Alt
+
Click
: Insert Cursor
Shift
+
Alt
+
Drag
: Column (box) selection
// settings.json
{
"editor.multiCursorModifier": "alt",
}
Refactor
F2
: Rename File (Explorer) / Rename Symbol (Editor)
Control
+
;
: Quick Fix... (Extract selection to method/constant)
Control
+
Shift
+
R
: Refactor...
Control
+
K
,
Control
+
I
: Show Hover
Control
+
²
: Toggle Quote (Extension BriteSnow.vscode-toggle-quotes)
Problems
Control
+
Shift
+
M
: View: Toggle Problems Panel (Errors, Warnings, ...)
F8
: Cycle through errors (Shift to reverse cycle)
Editor Groups
Control
+
Enter
: In Side Bar Explorer: Open to the Side (Or: Alt + Click)
Control
+
K
,
Arrow
: View: Move Editor Group
Control
+
K
,
Control
+
Left/Right
: View: Focus Left/Right Editor Group
Control
+
Alt
+
Left/Right
: View: Move Editor into Prev/Next Group
Control
+
PageUp/Down
: View: Move Editor (Tab) Left/Right
Control
+
Tab
: View: Open Next Recently Used Editor
Shift
+
Alt
+
à
: View: Toggle Vertical/Horizontal Editor Layout
Control
+
1 / 2 / 3
: View: Focus 1st / 2nd / 3rd Editor Group
Closing them
Control
+
K
,
Control
+
W
: View: Close All Editors
Control
+
K
,
Control
+
Shift
+
W
: View: Close All Editor Groups
Custom shortcuts:
- View: Grid Editor Layout (2x2)
- View: Split Editor
- View: Two/Three Rows/Columns Editor Layout
// settings.json
{
"workbench.editor.showTabs": true,
"workbench.editor.highlightModifiedTabs": true,
"workbench.editor.labelFormat": "default",
"workbench.editor.tabCloseButton": "off",
"workbench.editor.tabSizing": "shrink",
}
Formatting
Shift
+
Alt
+
F
: Format Document
Control
+
K
,
Control
+
F
: Format Selection
Shift
+
Alt
+
O
: Organize Imports
// settings.json
{
"editor.defaultFormatter": null,
"editor.formatOnPaste": true,
"editor.formatOnSaveTimeout": 750,
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {},
"editor.codeActionsOnSaveTimeout": 750,
}
Markdown
I guess this is here because I’ve done mostly markdown - writing this :)
Control
+
K
,
V
: Markdown: Open Preview to the Side
Control
+
Shift
+
V
: Markdown: Open Preview
yzhang-gh/vscode-markdown
:
Add intuitive keyboard shortcuts, TOC, table formatter, autocompletion and more!
davidanson/vscode-markdownlint
:
Markdown linting and style checking
streetsidesoftware/vscode-spell-checker
:
Source code spell checker
{
"markdown.preview.scrollPreviewWithEditor": true,
"markdown.preview.scrollEditorWithPreview": true,
// davidanson.vscode-markdownlint
"markdownlint.config": {
"default": true,
// https://github.com/DavidAnson/vscode-markdownlint#rules
"single-title": false,
},
// yzhang.vscode-markdown
"markdown.extension.italic.indicator": "*", // or -
"markdown.extension.list.indentationSize": "inherit",
"markdown.extension.preview.autoShowPreviewToSide": false,
"markdown.extension.toc.githubCompatibility": true,
}
Other interesting reads
Category:
dev-setup
Tags:
cheat-sheet
tutorial
pragmatic-tips
