search
Search
ENG
person_outline
By Wouter Van Schandevijl

VSCode: Editor Settings and Shortcuts

VSCode Editor

Pragmatic Tip 22: The editor should be an extension of your hand; make sure your editor is configurable, extensible, and programmable.

Category:

dev-setup

Tags:

cheat-sheetpragmatic-tipstutorial

Share this article on:

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 (2×2)
  • 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,
}

Also in this series

Extras

Other interesting reads

Package Versions