LayoutsAndShortcuts.md

Layouts and Shortcuts

In this section, we will explore the layout of VS Code. We will focus on shortcuts for working with files, text manipulation, and optimizing your development layout.

1. The Interface

   1. What We'll Cover
      1. Explore VS Code layout
      2. Discuss Activity Bar, Side Bar, Status Bar, Panels, and MiniMap
   2. Resources
      1. VS Code User Interface Docs

2. Optimizing Your Development Layout

   1. What We'll Cover
      1. Shortcuts for opening/closing panels
      2. Zen Mode for optimal development
      3. the command palette
   2. Resources
      1. VS Code User Interface Docs
      2. VS Code Command Palette
   3. Pro Tips
      1. ctrlCmd + Shift + B - toggle side bar
      2. ctrlCmd + Shift + D - toggle debug panel
      3. ctrlCmd + Shift + E - toggle file explorer panel
      4. ctrlCmd + Shift + X - toggle extensions panel
      5. ctrlCmd + Shift + G - toggle git panel
      6. ctrlCmd + Shift + F - toggle search panel
      7. ctrlCmd + Shift + P - open Command Palette
      8. ctrlCmd + Shift + K – delete line
      9. ctrlCmd + Shift + \ - jump to matching bracket
      10. Command + Ctrl + Shift + Left/Right (Mac) | Shift + Alt + Left/Right (Windows) - expand/shrink selection
      11. ctrlCmd K Z – toggle Zen Mode

3. Split Editor and Grid Tab System

   1. What We'll Cover
      1. Opening multiple files side by side
      2. Displaying multiple files in Grid Tab system
   2. Resources
      1. VS Code User Interface Docs
      2. Editor Groups
      3. Grid Editor Layout
   3. Pro Tips
      1. Working on a monitor can provide extra editing space and improve efficiency!
      2. Drag files around to display side by side or in grid
      3. ctrlCmd + number - switch to Nth editor group
      4. ctrlCmd + \ - move file to split editor

4. Opening and Working with Files

   1. What we’ll cover
      1. Creating files in the Explorer and via Shortcuts
      2. Tabbing through open files
      3. Creating Multiple Workspaces
      4. Shortcut for quickly opening files
   2. Resources
      1. VS Code User Interface Docs
      2. Advanced New File Extension
   3. Pro Tips
      1. Ctrl + Tab (Mac) | Alt + Tab (Windows) – tab to next file
      2. Ctrl + Shift + Tab (Mac) | Alt + Shift + Tab (Windows) - tab to previous file
      3. ctrlCmd + P to quick open files
      4. ctrlCmd + N to create new file
      5. ctrlCmd + W to close file
      6. ctrlCmd + S to save file
      7. Creating a file and defining the directory path will create any missing directories automatically

5. Navigating and Manipulating Text

   1. What we’ll cover
      1. Shortcuts for navigating, copying, pasting, and moving text
      2. Multiline edits with multiple cursors
   2. Resources
      1. Key Repeat on Mac
      2. Key Repeat on Windows
      3. VS Code Docs Code Basics
      4. VS Code Docs Multiple Cursors
   3. Pro Tips
      1. Speed up key repeat and key delay to fly through code
      2. To perform a shortcut on an entire line, you do not need to select the line itself. Most shortcuts will be applied to the entire line by default.
      3. Option + Arrow Left/Right – Navigate word by word
      4. Cmd + Left/Right (Mac) | Home/End (Windows) – Go to beginning/end of line
      5. Cmd + Up/Down (Mac) | Ctrl + Home/End (Windows) – Go to beginning/end of file
      6. ctrlCmd + D – select current word
      7. ctrlCmd + Shift +Ctrl + Left/Right - expand/shrink selection
      8. Alt + Up/Down - move line
      9. Shift + Alt + Up/Down – Duplicate line
      10. ctrlCmd + Option + Shift + Arrow Up/Down - Multiple Cursors]

6. Search and Replace Like a Ninja

   1. What we’ll cover
      1. Search and replace within a file
      2. Search and replace within a workspace
      3. Replace one at a time or all at once
   2. Resources
      1. VS Code Docs (Search and Replace)
   3. Pro Tips
      1. Selecting a piece of text and then searching (and replacing) will auto populate the search field with the copied text
      2. ctrlCmd + F – Search in current file
      3. Alt + Cmd + F (Mac) | Ctrl + H (Windows) – Search and replace in current file
      4. ctrlCmd + Shift + F – Search in workspace
      5. ctrlCmd + Shift + H – Search and replace in workspace
      6. ctrlCmd + Alt + Enter – replace all
      7. ctrlCmd + Shift + L – select all occurrences of current selection
      8. ctrlCmd + F2 – select all occurrences of current selection

7. Intellisense

   1. What we’ll cover

      1. What intellisense is and how it can increase efficiency and speed of development
      2. Explore built in intellisense functionality in VS Code

   2. Resources

      1. VS Code Docs Intellisense

   3. Pro Tips

      1. Thanks to TypeScript typings, VS Code can provide intellisense for basic JavaScript objects like DOM elements with types parameters, valid parameter inputs options, etc.

8. Emmet

   1. What we’ll cover
      1. What Emmet is and how it can speed up HTML and CSS development
      2. Basic Emmet snippets
   2. Resources
      1. Emmet website
      2. Emmet Docs Cheatsheet
      3. Emmet HTML Cheatsheet
   3. Pro Tips
      1. ! – Emmet shortcut to generate HTML5 boilerplate