VS Code Cheat Sheet
Open up your VS Code preferences by going to the main Code menu bar item (next to File, Edit, ...), then Preferences -> Settings. (Or, press CMD+,)
- 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!)
- Color theme: Gatito Theme, Solarized Dark, and High Contrast
- Icon themes: Material Icon Theme
The shorcuts below are for Mac OS, but they are almost always the same on windows, replacing:
- Option with ALT
- CMD with CTRL
Files & Browsing
- Open and close the file browser: CMD+B (This can be helpful to give you a little extra space)
- Save all files: CMD+S
- Quick switch to file: CMD+P
Autocomplete: VS Code and extensions will both offer autocomplete suggestions as you type. You can use the arrow keys to move through the suggestions, then press Tab or Enter to auto complete.
I've found that autocomplete with Enter can be a little too much - sometimes I just want the text that I have typed, not the suggestion! To make this a little easier, I changed the setting Accept Suggestions on Enter to off.
Move a line (or group of lines) up and down: CMD+up / down
Place a cursor in multiple places: Option+click
Select multiple instances of the same text: Highlight the first instance, then Option+D
Toggle a line (or selection of lines) to and from a comment: CMD+/
Find text: CMD+F
Find text and replace: CMD+Option+F (mac), CTRL+H (windows)
Find text in any file in your project CMD+Shift+F
Find text and replace in any file in your project CMD+Shift+H
My most used shortcut,
🔥Undo 🔥: CMD+Z
Any command you can use from the application menus (and many others) can also be found within the Command Palette: CMD+Shift+P. 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.
🔌 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 reload 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 it's difficult to see where your closing tags are. With this extension, you can click on an opening tag and it will highlight its matching closing tag.
- Open in Browser - You may already have this installed. Try opening your current html file with the keyboard shortcut, Option+Shift+B
- VS Live Share - Share your workspace with others and allow them to collaboratively edit in real-time!