VSCode: Editor Settings and Shortcuts

VSCode: Editor Settings and Shortcuts

posted in dev-setup on  • 

VSCode Editor

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