--- title: Using VS Code marp: true paginate: true math: mathjax theme: buutti --- # Using VS Code ## Project folder as a workspace * We'll unlock some important features of VS Code by opening our project folder as a ***workspace*** * You can even have workspace-specific settings * If you are working on multiple projects at once, keep things clear and open dedicated VS code windows for the respective projects! * When you open VS Code from the start menu, it has no workspaces open * To open a folder as a workspace, click *Open Folder* and navigate to the root folder of your project * Another way is to not open VS Code from the start menu at all * Instead, right-click the project folder in the Windows file explorer and choose *Open with Code* ## The VS code interface * VS code [user interface](https://code.visualstudio.com/docs/getstarted/userinterface) has three important views to consider: * The tabbed ***side bar*** (B) * The code ***editor groups*** (C) * The terminal ***panel*** (D) ![bg height:70% right:60%](https://code.visualstudio.com/assets/docs/getstarted/userinterface/hero.png) ## Side bar ![bg height:80% left:17%](imgs/vscode-tabs.png) * Use the buttons (or their respective keyboard shortcuts) in the activity bar to display (and hide!) different views in the side bar 1) Explorer (***CTRL+SHIFT+E***): Display project folder and ints contents 2) Search (***CTRL+SHIFT+F***): Search your project 3) Source control (***CTRL+SHIFT+G***): Use [Git](../project-management/1-git-basics) actions. See more here 4) Run and Debug: Debugging. Not in use in this course 5) Extensions (***CTRL+SHIFT+X***): Install & manage extensions * Some extensions add icons that appear under these five. ### Explorer ![bg height:80% left:30%](imgs/vscode-explorer.png) * In the explorer view, you can * see a list of open editors * and more importantly, access files inside your project folder ## Editor groups * The opened tabs have two modes: temporary and permanent * The filename of a temporary tab is shown with *cursive* * If you single-click a file on the explorer view, a file will open as a temp file * There are only one temp file at once: Click another, and it will replace the previous one * Double-click the file or the tab title to make a temporary tab permanent * You can show editors side-by side by grabbing from the tab title * If changes to a file are not saved, the close button will appear as ⚪ instead of $\times$ * Tabs with changes are shown in an effect colour --- ![](imgs/vscode-editor.png) ## Annoying bullshit * Some default settings make things harder than they should be * Disable Three-way Merge editor * *Preferences > Git: Merge Editor* * Disable autocomplete on certain characters * *Preferences > Editor: Accept Suggestion On Commit Character* ## Using VS code like a pro * The key to using VS code effectively is ***mastering the shortcuts***. * This way, you'll minimize your mouse usage and can focus on using your ***keyboard***. ## VS code shortcuts | Keybinding | Command | When | |---------------------------------|------------------------|------------------------| | ***CTRL+F*** | Find | Editor | | ***CTRL+SHIFT+F*** | Find in files | - | | ***CTRL+SHIFT+H*** | Replace in files | - | | ***ALT+⬆/⬇*** | Move code line up/down | Editor (not read-only) | | ***CTRL+'*** | Toggle line comment | Editor (not read-only) | --- | Keybinding | Command | When | |--------------------|---------------------------------------------|--------------------| | ***CTRL+B*** | View: toggle side bar | - | | ***CTRL+§*** | View: Open instance of the file to the side | - | | ***CTRL+W*** | View: Close editor tab | - | | ***CTRL+SHIFT+P*** | Open command palette | - | | ***CTRL+P*** | Go to file | - | | ***CTRL+Ö*** | View: toggle terminal | Terminal is active | ### Omnisharp shortcuts for C# * ***F2***: Rename variable and automatically update references * Naming things correctly on the first go is difficult! * ***CTRL+LMB*** * when clicking a method reference: *jump to definition* * when clicking the method definition: *jump to references* ### Editing keyboard shortcuts * In *Preferences > Keyboard Shortcuts*, you can add own shortcuts and change existing ones * For example, ***CTRL+TAB*** / ***CTRL+SHIFT+TAB***: * Default behaviour is *View: Open Next/Previous Recently Used Editor* * This opens the tabs in the order of recent use, and it can be confusing * I prefer *View: Open Next Editor* / *View: Open Previous Editor* (same as how it works in Chrome!) * Some shortcuts need an additional `When` parameter to know when the shortcuts are used * Examples in the next slide ### My extra shortcuts (not enabled by default) | Keybinding | Command | When | |--------------------|----------------------------------------|--------------------------------------| | ***CTRL+SHIFT+D*** | *Copy line down* | `editorTextFocus && !editorReadOnly` | | ***CTRL+SHIFT+⬇*** | *Move line down* | `editorTextFocus && !editorReadOnly` | | ***CTRL+SHIFT+⬆*** | *Move line up* | `editorTextFocus && !editorReadOnly` | | ***ALT+F3*** | *Select All Occurrences of Find Match* | `editorFocus` | --- | Keybinding | Command | When | |----------------------|-----------------------------------------------------|-----------------| | ***CTRL+TAB*** | *View: Open Next Editor* | | | ***CTRL+SHIFT+TAB*** | *View: Open Previous Editor* | | | ***CTRL+Ä*** | *View: Focus Active Editor Group* | `terminalFocus` | | ***CTRL+Ä*** | *Terminal: Focus Terminal* | | | ***CTRL+SHIFT+Ä*** | *View: Toggle Maximized Panel* (makes terminal big) | | ## Extra tip In the Search panel, press ⬆ & ⬇ to browse the search history.