VS Code Can Do That - Workshop
VS Code Can Do That - Workshop
VS Code Can Do That - Workshop
VS Code Can Do That - Workshop
VS Code Can Do That Workshop
Essential Keyboard Shortcuts
Exercise 1 - Customizing The Editor
Customizing The Editor
Switch themes
Install a new icon theme
Switch fonts
Editor tweaks
Change default Settings view
Easily identify editor instances
Exercise 2 - Productivity Tricks
Productivity Tricks
Essential navigation shortcuts
Creating HTML with Emmet
Styling with Emmet
Update image sizes
Exercise 3 - Navigation And Refactoring
Navigation And Refactoring
Moving, Duplicating and Deleting
Folding sections
Multiple cursors
Rename refactor
Finding things
Extract refactor
Exercise 4 - Debugging
Debugging
Simple debugging
Simple launch config
Auto attach
Debugging browser apps
Compound debug configurations
Exercise 5 - Docker
Docker
Dockerizing an application
Running and inspecting images
Docker compose
Debugging Docker containers
Exercise 6 - Remote Development
Remote Development
Create a remote container
Create a new function in the container
Handling extensions
Exercise 7 - Working With Data
Working with data
Working with MongoDB
Working with SQLite
Working with MySQL
Exercise 8 - Git and Source Control
Git and source control
Cloning repos with VS Code
Common Git workflows
Branching and merge conflicts
Powered by GitBook

VS Code Can Do That Workshop

Turn your editor up to 11

Prerequisites

These are important. You need to have these items installed to complete this workshop:

Exercises

Clone the Github repo...

git clone https://github.com/burkeholland/workshop-vs-code-can-do-that

In the cloned repo there is a folder for each section of the workshop. To begin an exercise, open it in VS Code.

cd exercise-1-customizing-the-editor
code .

Note that the "code" command from your command prompt or terminal only works if VS Code is added to your path. You will be prompted to do this when VS Code is installed. If you need to do it later, you can open the Command Palette (Cmd/Ctrl + Shift + P) and select "Shell Command: Install 'code' command in path".

If you are on Windows, you may need to reboot after this.

Some of the exercises contain multiple workspaces. This allows you to load multiple projects at the same time into VS Code. If this is the case, VS Code will prompt you. Select "Yes" to open the workspace file.

There will be a "start" project and a "solution" project in the workspace. Work in the "start" project and refer to the "solution" project for the finished exercise should you get stuck.

All projects can be run and viewed in the browser by executing the npm start command. Open a terminal instance in VS Code with Cmd/Ctrl + `. Make sure that you are in the right project ("start" or "solution") and run npm start

This should start a server on port 3000 and open a browser tab. Any changes you make will automatically be reflected in the browser.

If the server starts on a different port, such as 3001 or 3002, this is because another process is currently running on port 3000. This is ok, but you may get confused during the exercises. It's a better idea to find the running process and kill it.

  • Mac/Linux:

    • lsof -i tcp:3000

    • Find the ID of the process

    • kill <process id>

  • Windows

    • netstat -ano | findstr :3000

    • Find the ID of the process

    • taskkill /PID typeyourPIDhere /F

Note that for Windows, you must be running the Command Prompt as an Administrator.

​

​

Next
Essential Keyboard Shortcuts
Last updated 2 years ago
Contents
Prerequisites
Exercises