About 1 hour
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. Many developers prefer using VS Code for development because of its flexiblity and user interface. It provides lots of tools to make tasks easier.
Participants will be able to:
How to install VS Code and get started (7 min video)
Read through lesson slides Local Development with VS Code
Reference: stackoverflow.com
Auto Indent - VS Code package to format your JavaScript / TypeScript / CSS using Prettier. Or Select the text you want to automatically indent. Click Format Selection in Edit, Advanced, or press CTRL+K, CTRL+F.
Indent multiple lines - Just highlight the lines you want, then press tab to indent the entire code block, or shift+tab to un-indent the entire code block.
Autosave - The easiest way to turn on Auto Save is with the menu File > Auto Save toggle that turns on and off save after a delay.
Key-Value - An item of data that is identified by an arbitrary name. The key is the name, and the value is the content. For example, the key might be CITY, and the value might be CHICAGO. Key-value pairs are frequently used in lookup tables, hash tables and configuration files.
Key-Value example:
{
“firstname”: “Chris”,
“lastname”: “Evans”,
“city”: “New York”
}
“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.
Instructor demonstrates in the slide walkthrough how to change the color theme and use various keyboard shortcuts.
Techtonica staff will assign pairs.
Follow the instructions in the slides for downloading and installing VS Code if it is not already downloaded to your machine.
Using VS Code’s Getting Started manual or other online resources, discover how to:
As you learn how to do these tasks, make a cheat sheet (on paper or in a note on your desktop) to remind you what the shortcuts are.
Briefly summarize your findings so you can share with the class.
Form small groups and discuss:
dog in a file to the word cat. What might be a useful keyboard shortcut?The age-old tabs vs spaces argument is a very heated and hilarious one. Some developers argue that tabs are better for code indentation while others argue that spaces are better. Both arguments are valid with the following points:
By default, VS Code attempts to guess your indentation options depending on the file you open. Indentation guessing can be turned off via: "editor.detectIndentation": false.
Instructions to set up VS Code to use “spaces for tabs, 2 spaces per tabs” as your default for new files:
For Windows Users
"editor.tabSize": 2. This setting is overriden based on file content when "editor.detectIndentation": true."editor.insertSpaces": true. This setting is overriden based on file content when "editor.detectIndentation": true.For Mac Users
"editor.tabSize": 2. This setting is overriden based on file content when "editor.detectIndentation": true."editor.insertSpaces": true. This setting is overriden based on file content when "editor.detectIndentation": true.Visual Studio Code now includes an auto-indentation feature — which, as the name suggests, will automatically indent your code on the editor.The auto-indentation feature will automatically indent your code whenever you move a line around or a set of lines around. It will also automatically indent your code when you copy-paste something which will be really useful especially for those who use StackOverflow quite a lot. Auto-indentation on Visual Studio Code is currently disabled by default, and users can add the editor.autoIndent setting to the editor in order to enable it.