Browse files

update readme

  • Loading branch information...
good-idea committed Jan 11, 2019
1 parent 31d9543 commit 97a2e8c294333ef9d2fafdf2800c450c2fd76962
Showing with 70 additions and 7 deletions.
  1. +58 −0
  2. 0 multi-cursor.html
  3. +12 −7 shortcuts.html
@@ -0,0 +1,58 @@
# VS Code Cheat Sheet

## ⚙️ Settings

Open up your VS Code preferences by going to the main **Code** menu bar item (next to File, Edit, ...), then Preferences -> Settings. (Or, press <kbd>CMD</kbd>+<kbd>,</kdb>)

- Auto Save
- Format on Save
- Font: I like Fira Code. It does some nice things like turning `->` into a nice-looking arrow. Download the font [here]( and install on your machine. ([Installation tips]( - be sure to enable ligatures!)

### My Themes

- Color theme: **Gatito Theme**, **Solarized Dark**, and **High Contrast**
- Icon themes: **Material Icon Theme**

## ⌘ Shortcuts

_The shorcuts below are for Mac OS, but they are almost always the same on windows, replacing:_

- <kbd>Option</kbd> with <kbd>ALT</kbd>
- <kbd>CMD</kbd> with <kbd>CTRL</kbd>

#### Files & Browsing

- Open and close the file browser: <kbd>CMD</kbd>+<kbd>B</kbd> (This can be helpful to give you a little extra space)
- Save all files: <kbd>CMD</kbd>+<kbd>S</kbd>
- Quick switch to file: <kbd>CMD</kbd>+<kbd>P</kbd>

#### Editing

- Move a line (or group of lines) up and down: <kbd>CMD</kbd>+<kbd>up / down</kdb>
- Place a cursor in multiple places: <kbd>Option</kbd>+<kbd>click</kdb>
- Select multiple instances of the same text: Highlight the first instance, then <kbd>Option</kbd>+<kbd>D</kbd>
- Toggle a line (or selection of lines) to and from a comment: <kbd>CMD</kbd>+<kbd>/</kbd>
- Find text: <kbd>CMD</kbd>+<kbd>F</kbd>
- Find text and replace: <kbd>CMD</kbd>+<kbd>Option</kbd>+<kbd>F</kbd> (mac), <kbd>CTRL</kbd>+<kbd>H</kbd> (windows)
- Find text _in any file in your project_ <kbd>CMD</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd>
- Find text and replace _in any file in your project_ <kbd>CMD</kbd>+<kbd>Shift</kbd>+<kbd>H</kbd>
- _My most used shortcut_, 🔥Undo🔥: <kbd>CMD</kbd>+<kbd>Z</kbd>

- Any command you can use from the application menus (and many others) can also be found within the **Command Palette**: <kbd>CMD</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>. Like the Quick File browser, just start typing the name of the command and you'll see it show up in the menu. This will also display the shortcut, so next time you don't even need to type the commmand.

Full cheatsheets:

- [Windows](
- [Mac OS](

## 🔌 Helpful Plugins

\*Open the Extensions tab in the sidebar (the blocky square icon, or open the command pallete and start typing 'Install extensions'). Start typing the name of the extension and it will show up. After installing, make sure you click the <kbd>reload</kbd> button to initialize the plugin!

- **W3C Validation** - Shows warnings and errors in your HTML
- Alternative: **HTMLHint**
- **CSSTree validator** - Shows warnings and errors in your CSS.
- (Warnings will be displayed in a different color - you can disable these in the extension's settings)
- **VSCode Highlight Matching Tag** - Sometimes
- **Open in Browser** - You may already have this installed. Try opening your current html file with the keyboard shortcut, <kbd>Option</kbd>+<kbd>Shift</kbd>+<kbd>B</kbd>
- **VS Live Share** - Share your workspace with others and allow them to collaboratively edit in real-time!
No changes.
@@ -34,23 +34,25 @@
- Press <Option + Up> or <Option + Down> to move the current line up and down
🎯 Move this <img> tag to be inside the container

<div class="image-container">

<img src="" alt="">
<img src="" alt="">

<!-- Or, select multiple lines and use the same command to move all of the lines at once -->
Or, select multiple lines and use the same command to move all of the lines at once
🎯 Move the two image-containers and their contents to be inside the section

<section class="gallery">
<div class="image-container">
<img src="" alt="">

<div class="image-container">
<img src="" alt="">
@@ -65,9 +67,9 @@
- Hold down <Cmd> and click on multiple places. Start typing and press <Escape> to exit
- (Might be <Alt> or <Option> depending on your OS & VSCode settings)
🎯 Add a <p class="image-caption"></p> after each image

<section class="gallery">
<div class="image-container">
<img src="" alt="">
@@ -80,7 +82,10 @@

<!-- Select text and press <Cmd + D> to select multiple instances of the same text -->
Select text and press <Cmd + D> to select multiple instances of the same text
🎯 rename `img-container` to `image-container`

<section class="gallery">
<div class="img-container">

0 comments on commit 97a2e8c

Please sign in to comment.