Skip to content

Latest commit

 

History

History
102 lines (70 loc) · 4.34 KB

vscode.md

File metadata and controls

102 lines (70 loc) · 4.34 KB

VS Code - Setup and Local Development

Projected Time

About 1 hour

  • 7 minutes for video
  • 20 minutes for video walkthrough of slides
  • 15 minutes for Independent Practice
  • 10 minutes for Check for Understanding

Prerequisites

  • "Command Line Interface" lesson

Motivation

Most software is written using text editors. Visual Studio Code (VS Code) is a very popular open-source text editor developed and maintained by Microsoft. Having a good understanding of how to use VS Code will enable you to code and use other text editors with ease.

Objectives

Participants will be able to:

  • Download and install VS Code
  • Create a Terminal shortcut to open files in VS Code
  • Change the UI theme of their VS Code application
  • Use several keyboard shortcuts for more efficient coding while using VS Code
  • Open and execute commands on the VS Code Integrated Terminal
  • Open a file quickly using VS Code
  • Run a global or local search
  • Add a VS Code Extension

Specific Things To Teach

Supplemental Materials

Lesson

Video: How to install VS Code and get started

Slides: Local Development with VS Code

Common Mistakes / Misconceptions

  • "I'll just use MS Word or Google Docs to write my code." The only industry-acceptable programs for writing code are text editors that were created specifically for this purpose. MS Word and Google Docs are for creating personal and business documents, not for writing code.

  • "VS Code has a lot of bells and whistles, how will I ever pick them all up?" VS Code gives you, the developer, a lot of control over your space. Some keyboard shortcuts will become second nature, while some things like setting your themes will only happen once in while -- with practice (and reference materials) everything will become second nature.

Demonstration

Instructor demonstrates in the slide walkthrough how to change the color theme and use various keyboard shortcuts.

Independent Practice

Techtonica staff will assign pairs.

  1. Follow the instructions in the slides for downloading and installing VS Code if it is not already downloaded to your machine.

  2. Using VS Code's Getting Started manual or other online resources, discover how to:

  • Find and replace multiple occurrences of one word in the same file
  • Click on multiple characters in one file at the same time
  • Comment and uncomment text
  • Indent and dedent lines of text
  • Move one line up or down
  • Open a side by side of a file
  • Add a javascript extension to VS Code

Challenge

Add a personalized keyboard shortcut using VS Code's Key Bindings manual.

-or-

Make a commit through VS Code's version control tool Version Control through VS Code

Briefly summarize your findings so you can share with the class.

Check for Understanding

Apprentices make a cheat sheet (could be on paper or in a note on their Desktop) that reminds them how to use shortcuts to:

  • Open VS Code
  • Open a specific folder in VS Code
  • Open a specific file in VS Code
  • Find and replace multiple occurrences of one word in the same file
  • Click on multiple characters in one file at the same time
  • Comment and uncomment text
  • Indent and dedent lines of text
  • Move one line up or down
  • Open a file side by side
  • Open integrated terminal