Skip to content

Instantly share code, notes, and snippets.

@roman-balzer
Created February 25, 2024 02:11
Show Gist options
  • Select an option

  • Save roman-balzer/b345a084dcd0c0fbd7b3bc6855d77e86 to your computer and use it in GitHub Desktop.

Select an option

Save roman-balzer/b345a084dcd0c0fbd7b3bc6855d77e86 to your computer and use it in GitHub Desktop.

Revisions

  1. roman-balzer created this gist Feb 25, 2024.
    139 changes: 139 additions & 0 deletions VSCode Cheatsheet - Shared.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,139 @@
    ---
    parent: "[[Unspecified]]"
    ---
    > [!attention]
    > This cheatsheet is supposed to be used with a dedicated css file (`summary.cheatsheet.css`). Also keep in mind that Shortcuts marked with 🔹are not the default shortcuts, but those I changed them to for my personal use. The mark behind 🔹shows the default keybindings. Please look up default shortcuts if needed.
    > The cheatsheet is optimize for use with Minimal theme.
    > If interested, I also have cheatsheets for Obsidian, Discord, Vimium, Spotify and Windows
    > **Legend**:
    > 🔹Non-default keybinding changed by me
    > 🔸Keybind of a plugin
    > 🔻Changed keybind conflicts with a default keybind
    > **Contact**:
    > If you have more questions on this, ping me in the Obsidian Discord server or DM me on Discord (Username: *_azael*)
    > [!multi-column]
    >> [!blank-container|mw50]
    >> ![[Pasted image 20240222014021.png]]
    >
    >> <div style="margin-left: 0.5rem; margin-top: -0.4rem; font-weight: bold; color: rgb(31,156,240); font-size: 2.5rem;">VSCode</div>
    > [!multi-column]
    >>> [!kbd|vscode chroma] General
    >>>> | | |
    >>>> | -------------------------------------------------:| ------------------ |
    >>>> | <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>.</kbd> | Auto fix |
    >>>> | <kbd>Ctrl</kbd> + <kbd>.</kbd> | Quick fix |
    >>>> | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> | Refactor |
    >>>> | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> | Commands |
    >>>> | <kbd>Ctrl</kbd> + <kbd>Space</kbd> | Trigger suggest |
    >>>> | <kbd>Ctrl</kbd> + <kbd>K</kbd> > <kbd>I</kbd> | Show hover |
    >>
    >>> [!kbd|vscode chroma] Terminal
    >>>> | | |
    >>>> | ----------------------------------------------------------------------: | -------------------------------------- |
    >>>> | <kbd class="mint">Ctrl</kbd> + <kbd>`</kbd> | *Show* terminal |
    >>>> | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>`</kbd> | *New* terminal |
    >>>> | <kbd>Ctrl</kbd> + <kbd>Page 🠝🠟</kbd> | *Navigate* terminal *group* |
    >>>> | <kbd>Alt</kbd> + <kbd>🠝🠟🠜🠞</kbd> | *Navigate* terminal *in group* |
    >>>> | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>\\</kbd> | *Focus* terminal tab view |
    >>>> | <kbd>Ctrl</kbd> + <kbd>G</kbd> | Goto *recent directory* |
    >>>> | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> <kbd>🠝</kbd><kbd>🠟</kbd> | Select to *command* |
    >>>> | <i class="block-start"></i> | **Scroll** |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>🠝</kbd><kbd>🠟</kbd> | <b class="tab">↳</b> to command |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Page 🠝🠟</kbd> | <b class="tab">↳</b> line |
    >>>> | <kbd class="block">Shift</kbd> + <kbd>Page 🠝🠟</kbd> | <b class="tab">↳</b> page |
    >>>> | <kbd class="block-end">Ctrl</kbd> + <kbd>Home</kbd><kbd>End</kbd> | <b class="tab">↳</b> to top/bottom |
    >>
    >>> [!kbd|vscode chroma] Navigate File/Code
    >>>> | | |
    >>>> | -----------------------------------------------------------------: | -------------------------- |
    >>>> | <kbd>Alt</kbd> + <kbd>🠜</kbd><kbd>🠞</kbd> | *Navigate* history |
    >>>> | <kbd>Ctrl</kbd> + <kbd>P</kbd> | *Open* file |
    >>>> | <kbd>Ctrl</kbd> + <kbd>🠝</kbd><kbd>🠟</kbd> | *Scroll* file |
    >>>> | <i class="block-start"></i> | **Find in file** |
    >>>> | <kbd class="block tint purple">Shift</kbd> + <kbd>F7</kbd> | <b class="tab">↳</b> next/<span class="tint purple">prev</span> symbol |
    >>>> | <kbd class="block tint purple">Shift</kbd> + <kbd>F3</kbd> | <b class="tab">↳</b> next/<span class="tint purple">prev</span> search result |
    >>>> | <kbd>Ctrl</kbd> + <kbd class="block-end tint purple">Shift</kbd> + <kbd>F3</kbd> | <b class="tab">↳</b> next/<span class="tint purple">prev</span> selection |
    >>>> | <i class="block-start"></i> | **Breadcrumbs** |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>.</kbd> | <b class="tab">↳</b> focus |
    >>>> | <kbd class="block-end">Ctrl</kbd> + <kbd>🠜</kbd><kbd>🠞</kbd> | <b class="tab">↳</b> navigate |
    >>>> | <i class="block-start"></i> | **Fold / Unfold** |
    >>>> | <kbd class="block">Alt</kbd> + <kbd>Home</kbd><kbd>End</kbd> | <b class="tab">↳</b> block🔹<mark class="red">CS+[]</mark> |
    >>>> | <kbd class="block">Alt</kbd> + <kbd>Page 🠝🠟</kbd> | <b class="tab">↳</b> all🔹<mark class="red">C+K>J</mark> |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>K</kbd> > <kbd>`nr`</kbd> | <b class="tab">↳</b> to level |
    >>>> | <kbd class="block-end">Ctrl</kbd> + <kbd>K</kbd> > <kbd>-</kbd> | <b class="tab">↳</b> except selection |
    >>>> | <i class="block-start"></i> | **Go to** |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>T</kbd> | <b class="tab">↳</b> Symbol in workspace |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd class="placeholder">⠀</kbd> + <kbd>U</kbd> > <kbd>1</kbd> | <b class="tab">↳</b> definition🔹 |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd class="placeholder">⠀</kbd> + <kbd>U</kbd> > <kbd>2</kbd> |<b class="tab">↳</b> type definition🔹 |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd class="placeholder">⠀</kbd> + <kbd>U</kbd> > <kbd>3</kbd> | <b class="tab">↳</b> references🔹 |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd class="placeholder">⠀</kbd> + <kbd>U</kbd> > <kbd>4</kbd> | <b class="tab">↳</b> implementations🔹 |
    >>>> | <span style="margin-right: 0.5rem; font-weight: bold;">└───></span><kbd class="block tint purple">Shift</kbd><kbd class="tint pink">Alt</kbd> | <span class="tint purple">peek</span>/<span class="tint pink">find all</span>🔹 |
    >>>> | <kbd class="block-end tint purple">Shift</kbd> + <kbd>F4</kbd> | next/<span class="tint purple">prev</span> reference/implementation |
    >>
    >>> [!kbd|vscode chroma] Selection
    >>>> | | |
    >>>> | -----------------------------------------------------------------: | -------------------------- |
    >>>> | <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>🠜</kbd><kbd>🠞</kbd> | *Expand*/*Shrink* selection |
    >>>> | <kbd>Ctrl</kbd> + <kbd class="tint purple">Alt</kbd> + <kbd>D</kbd> | *Add* next/<span class="tint purple">all</span>🔹 occ. to selection |
    >>>> | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>🠝</kbd><kbd>🠟</kbd> | *Add* cursor🔹🔻 <mark class="red">CA+🠝🠟</mark> |
    >>>> | <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Delete</kbd> | *Undo* cursor🔹 <mark class="red">C+U</mark> |
    >
    >>> [!kbd|vscode chroma] View
    >>>> | | |
    >>>> | -------------------------------------------------:| ------------------ |
    >>>> | <kbd>Ctrl</kbd> + <kbd>Page 🠝🠟</kbd> | Navigate tabs |
    >>>> | <kbd>Ctrl</kbd> + <kbd>K</kbd> > <kbd>Z</kbd> | Zen mode🔹<mark class="red">(C+K)>Z</mark> |
    >>>> | <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>0</kbd> | Toggle horizontal/vertical |
    >>>> | <i class="block-start"></i> | **Side Areas** |
    >>>> | <kbd class="block">Shift</kbd> + <kbd>F1</kbd> | <b class="tab">↳</b> Focus left sidebar🔹<mark class="red">C+B</mark> |
    >>>> | <kbd class="block-end">Ctrl</kbd> + <kbd>F1</kbd> | <b class="tab">↳</b> Toggle left sidebar🔹<mark class="red">CA+B</mark> |
    >>>> | <kbd class="block">Shift</kbd> + <kbd>F2</kbd> | <b class="tab">↳</b> Focus right sidebar🔹 |
    >>>> | <kbd class="block-end">Ctrl</kbd> + <kbd>F2</kbd> | <b class="tab">↳</b> Toggle right sidebar🔹 |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>J</kbd> | <b class="tab">↳</b> Focus panel🔹<mark class="red">C+J</mark> |
    >>>> | <kbd class="block-end">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd> | <b class="tab">↳</b> Toggle panel🔹<mark class="red">CS+J</mark> |
    >>>> | <i class="block-start"></i><kbd>Ctrl</kbd> + <kbd>W</kbd> | **Edit Groups** |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>`nr`</kbd>| <b class="tab">↳</b> focus🔹 |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>🠝🠟🠜🠞</kbd> | <b class="tab">↳</b> navigate🔹 |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Enter</kbd> | <b class="tab">↳</b> *open in* new Edit Group🔹<mark class="red">C+Enter</mark> |
    >>>> | <kbd class="block-end">Ctrl</kbd> + <kbd>K</kbd> > <kbd>M</kbd> | <b class="tab">↳</b> maximize |
    >>>> | <i class="block-start"></i><kbd>Ctrl</kbd> + <kbd>W</kbd> | **Close Editor** |
    >>>> | <i class="block"></i> <kbd class="tint purple">Shift</kbd> | <b class="tab">↳</b> <span class="tint purple">others</span> in group🔹🔻 |
    >>>> | <i class="block"></i> <kbd class="tint purple">Shift</kbd> + <kbd class="tint purple">Alt</kbd> | <b class="tab">↳</b> in <span class="tint purple">other groups</span>🔹 |
    >>>> | <i class="block-end"></i><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd> | *Reopen* closed editor |
    >>>> | <i class="block-start"></i><kbd>Ctrl</kbd> + <kbd>W</kbd> | **Open** |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> | <b class="tab">↳</b> Explorer |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> | <b class="tab">↳</b> Extensions |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd> | <b class="tab">↳</b> Search |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd> | <b class="tab">↳</b> Git |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>,</kbd> | <b class="tab">↳</b> Settings |
    >>>> | <kbd class="block-end">Ctrl</kbd> + <kbd>K</kbd> > <kbd>S</kbd> | <b class="tab">↳</b> Keyboard shortcuts |
    >>
    >>> [!kbd|vscode chroma] Manipulate code
    >>>> | | |
    >>>> | -------------------------------------------------:| ------------------ |
    >>>> | <kbd>Ctrl</kbd> + <kbd>/</kbd> | Toggle comment |
    >>>> | <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd> | Format doc |
    >>>> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>L</kbd> | TCL🔸 |
    >>>> | <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>O</kbd> | Organize imports |
    >>>> | <i class="block-start"></i> | **Lines** |
    >>>> | <kbd class="block">Alt</kbd> + <kbd>🠝</kbd><kbd>🠟</kbd> | <b class="tab">↳</b> move |
    >>>> | <kbd class="block">Shift</kbd> + <kbd>Alt</kbd> + <kbd>🠝</kbd><kbd>🠟</kbd> | <b class="tab">↳</b> duplicate |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> | <b class="tab">↳</b> delete |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>U</kbd> > <kbd>J</kbd> | <b class="tab">↳</b> join🔹 |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>L</kbd> | <b class="tab">↳</b> select |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>G</kbd> | <b class="tab">↳</b> goto |
    >>>> | <kbd class="block">Alt</kbd> + <kbd>,</kbd><kbd>.</kbd> | <b class="tab">↳</b> indent / outdent🔹<mark class="red">C+[]</mark> |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>Enter</kbd> | <b class="tab">↳</b> insert up |
    >>>> | <kbd class="block-end">Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Enter</kbd> | <b class="tab">↳</b> insert down |
    >>>> | <i class="block-start"></i> | **Enclosing brackets** |
    >>>> | <kbd class="block">Alt</kbd> + <kbd>🠝</kbd><kbd>🠟</kbd> | <b class="tab">↳</b> jump between🔹<mark class="mint">CS+\\</mark> |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>U</kbd> > <kbd>S</kbd> | <b class="tab">↳</b> select content🔹 |
    >>>> | <kbd class="block-end">Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Backspace</kbd> | <b class="tab">↳</b> remove🔹 |
    >>>> | <i class="block-start"></i> | **Transform Case** |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>U</kbd> > <kbd>6</kbd> | <b class="tab">↳</b> to CamelCase🔹 |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>U</kbd> > <kbd>7</kbd> | <b class="tab">↳</b> to lowercase🔹 |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>U</kbd> > <kbd>8</kbd> | <b class="tab">↳</b> to UPPERCASE🔹 |
    >>>> | <kbd class="block">Ctrl</kbd> + <kbd>U</kbd> > <kbd>9</kbd> | <b class="tab">↳</b> to kebab-case🔹 |
    >>>> | <kbd class="block-end">Ctrl</kbd> + <kbd>U</kbd> > <kbd>0</kbd> | <b class="tab">↳</b> to snake_case🔹 |
    131 changes: 131 additions & 0 deletions summary.cheatsheet.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,131 @@
    /* --- Multi-Column Callout --- from MCL --- */
    .callout[data-callout="multi-column"] {
    --callout-min-width: 200px;
    --callout-gap: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--callout-gap);
    background: unset;
    border: unset;
    margin: unset !important;
    padding: unset !important;
    clear: both;

    & > .callout-title { display: none; }
    & > .callout-content { display: contents; width: 100%; }
    & > .callout-content > *:is(div,ul,blockquote) { flex: 1 1 var(--callout-min-width); }
    }

    /* Non-Minimal-Themes: Gap between callouts */
    /* .callout.callout.callout:not(:last-child) { margin-bottom: 10px; } */

    /* --- Blank Callout --- from MCL --- */
    div[data-callout*="blank"].callout {
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: unset;
    box-shadow: unset;
    & > .callout-title { display: none; }
    & > .callout-content { display: contents; }
    }

    /* fixed width for icon column */
    [data-callout-metadata*="mw50"] { max-width: 50px; }


    .callout.callout.callout {
    padding: 12px;
    & .callout-title { margin-inline-start: 0px; }
    & p { margin: 0; }
    & blockquote { padding: 0; margin: 0; }
    }

    /* Reduce Callout padding */
    .callouts-outlined .cm-embed-block.cm-callout { padding-top: 10px; }

    /* No left borders on blockquotes */
    .markdown-rendered blockquote { border-left: 0; }

    /* --------------- ALIGN TABLE in callout --------------- */
    .callout > .callout-content:has( > blockquote > table) { margin: -6px -12px -12px -12px; }
    .callout > .callout-content {
    & > blockquote > table { width: 100%; }
    & tr :is(td,th):first-child { padding-left: 5px !important; }
    & tr :is(td,th):last-child { padding-right: 5px !important; }
    & :is(td,th) { border-color: rgba(var(--callout-color), 0.2) !important; }
    }

    /* --------------- HIDE EMPTY LINE BETWEEN CALLOUTS ---------------*/
    .is-live-preview .cm-callout:not(.cm-active) + .cm-line:not(.cm-active):has(br) + .cm-callout:not(.cm-active) {
    margin-top: -20px !important;
    }

    /* --------------- GROUPING of TABLE ROWS --------------- */
    tr:has(td > .block) td {
    padding-block: 2px !important;
    border-block: 0 !important;
    }
    tr:has(td > .block-start) td {
    padding-block: 5px 2px !important;
    border-block-end: 0 !important;
    }
    tr:has(td > .block-end) td {
    padding-block: 2px 5px !important;
    border-block-start: 0 !important;
    }

    /* --------------- KEYBOARD KEY styling --------------- */
    kbd {
    --_kbd-bg: var(--kbd-bg, hsl(222.86deg 3.06% 55.1%));
    --_kbd-text: var(--kbd-text, hsl(220deg 4.23% 13.92%));
    --_kbd-border: var(--kbd-border, hsl(228deg 3.94% 24.9%));
    margin: 0px 0.1em;
    padding: 0 5px;
    border-radius: 3px;
    min-width: 25px;
    display: inline-block;
    text-align: center;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 0.8rem;
    border-width: 1px 3px 4px 2px;
    border-style: solid;
    background-color: var(--_kbd-bg);
    color: var(--_kbd-text);
    border-color: var(--_kbd-border);
    &.tint {
    --tint-percentage: 85%;
    background-color: color-mix(in hsl, var(--_kbd-bg), var(--tint-bg) var(--tint-percentage));
    color: color-mix(in hsl, var(--_kbd-text), var(--tint-text) var(--tint-percentage));
    border-color: color-mix(in hsl, var(--_kbd-border), var(--tint-base) var(--tint-percentage));
    }
    &.placeholder {
    opacity: 0.3;
    min-width: 40px;
    }
    }

    /* --------------- TINT example --------------- */
    /* Usage for example <kbd class="tint purple">Enter</kbd>*/
    .tint:is(i,b,em,strong,span) { color: var(--tint-base); }
    :is(.purple, .Purple) {
    --tint-base: hsl(271, 43%, 51%);
    --tint-bg: hsl(271, 48%, 21%);
    --tint-text: hsl(267, 52%, 75%);
    }

    /* ----------------- Callout Chroma overrides ----------------------------------- */
    /* overrides the color of callout/bold/italics with --callout-color
    * Usage: > [!callout|vscode chroma]
    */
    .callout[data-callout-metadata~=chroma] {
    --override-accent: rgb(var(--callout-color));
    --bold-color: var(--override-accent);
    --italic-color: var(--override-accent);
    }
    [data-callout-metadata~=obsidian] { --callout-color: 149,105,235; }
    [data-callout-metadata~=spotify] { --callout-color: 30, 215,96; }
    [data-callout-metadata~=discord] { --callout-color: 88, 101,242; }
    [data-callout-metadata~=vimium] { --callout-color: 72, 137,244; }
    [data-callout-metadata~=windows] { --callout-color: 0, 188,212; }
    [data-callout-metadata~=vscode] { --callout-color: 31, 156,240; }