How To Download and Setup Visual Studio Code

Download

Download and install VS Code for free from: code.visualstudio.com/download

User Interface

User Interface diagram: code.visualstudio.com/docs/getstarted/userinterface
From left to right:
A) Activity bar (toolbars: Explorer, Search, Source Control, Run & Debug, Extensions).
B) Side Bar
C) Editor / Editor Groups
D) Panel (Terminal, Output, Debug Console, Problems)
E) Status bar (on bottom) 

---

Setup for Web Development

Extensions:

• Find and install the Live Server extension. This allows you to run a web server that automatically reloads every time you save a file in your web project: 

Click the Extensions icon on the Activity Bar > type "Live Server" in the search box > click Install

• To use Live Server: Open an HTML document in VS Code > Right click in the Editor > select "Open with Live Server". The HTML page will automatically open in your default web browser.

• Find and install the JavaScript ES6 Code Snippets extension.

Click the Extensions icon on the Activity Bar > type "JavaScript ES6 Code Snippets" in the search box > Click install 

• To use ES6 Snippets: Type in a shortcut followed by tab and the snippet will be added.

Launch VS Code from the Command Line:

How to use VS Code

Open a project in VS Code, and add files and folders

1. Create an example project directory called web-project in Microsoft Explorer or Mac Finder.
• Or from the command line: mkdir web-project
2. Open VS Code.
3. Open the web-project folder: File menu > Open Folder > navigate to web-project 
• or on Mac you can drag the directory from Finder to VS Code on your Dock.
• or if you set VS Code to start from the web-project directory in the command line, enter: code .

Add Files:

• Click the Explorer icon in the Activity Bar. This will place the project's File tree on the Side Bar. 
• Click the New File icon to add a file named index.html (or new folder icon to add a folder).
• Click New File icon and create a file named myjs.js.

Find File:

In projects with many files you can use a keyboard shortcut to open the file:
Mac: Command+P > type the file name: index.html
Windows: Control+P > type the file name: index.html

---

Code Snippets

Code snippets can save you a lot of typing of commonly used code statements. 
There are HTML, JavaScript and other language snippets built into VS Code.

Built-in HTML code snippets

• !→ In the empty page, type Exclamation mark then press the tab key. This will generate a skeleton HTML document.
• h1→ Below the body tag, type h1 then the tab key. This generate tags <h1></h1> , then add heading text between the tags. Save the changes.
• To see it, you can Launch Live Server. Right click in the editor > select "Launch with Live Server". It will open the page in the browser at url: http://127.0.0.1:5500/index.html. You should see the header text in header format (bold with larger text).
• p#first-para→ Below the header, enter p for a paragraph element followed by a pound sign to add an element ID. Then the id text, the press tab. This will create tags: <p id="first-para"></p> 
• lorem→ To generate lorem ipsum placeholder text between the p tags, enter lorem then press tab.
• p.some-class→ Below the first paragraph, enter p for another paragraph element, followed by a period to add a class, followed by the class name, then press tab. This will create tags: <p class="some-class"></p> 
• lorem→ Add more lorem ipsum placeholder text in the second paragraph by entering lorem then pressing tab.
• Save the changes, then go back to the browser to see the changes. Live Server uses hot reloading so the web page is automatically reloaded every time you save the file.
• Add an opening third paragraph tag without closing it, and some text. Paste this after the second paragraph: <p>Some text. 
• To close an open tag, just enter </ and the rest will automatically be filled in.

Built-in JavaScript and ES6 extension code snippets

Go to the myjs.js file.

• if↓return Type "if" then a list of options will appear below it. Press DownArrow one time to select the second option, then press the tab or the return key. This will insert an if statement.
• ife→ Type "ife" then press the tab or return key. This will insert an if-else statement.
• foreach→ "foreach" then tab or return will insert an array forEach iterator.
• forin→ Type "forin" then tab or return to insert a for ...in loop.
• function↓→ Type "function" then press DownArrow to select the second option in the list, then press tab or return. This will insert a function declaration.
• new↓→ Type "new" then press DownArrow to select the second option in the list, then press tab or return. This will instantiate a new object.
• log→ Type "log" then press tab or return to insert a console.log() statement.

JavaScript ES6 Code Snippets extension

If you have the JavaScript ES6 Code Snippets extension installed you can use additional snippets focused on ES6 syntax.

• imp→ Type "imp" then press tab or return, inserts an import statement: import moduleName from 'module'; 
• req→ Type "req" then press tab or return, inserts a require statement: const packageName = require('packageName');
• nfn→ Type "nfn" then press tab or return, will insert a named arrow function: const name = (params) => {}

Create your own snippets

Also you can create your own snippets.
Go to Code menu > Preferences > Configure User Snippets > Select the language file Or globalSnippets to apply to all files.

This opens a json file that holds user created snippets.
Enter your new snippet or edit an existing snippet.

The below JavaScript snippet will generate a console log statement that prints the filename before the value you want to log. It is useful when you are logging values from multiple files.

"Console-log-with-filename": {
  "prefix": "clf",
  "body": "console.log('$TM_FILENAME:', $1);",
  "description": "Log output to console with file name"
},

• The key: "Console-log-with-filename" is the name of the snippet.
• prefix: "clf" is the character sting that inserts the snippet when you type it in, then press tab or return.
• body: is the snippet to insert.
• $1 is where the cursor will point. This is optional.
• $TM_FILENAME is a variable that prints the filename.
• description: describes what the snippet does.
• For more information, go to: code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets

Put the above snippet in the javascript.json snippets file, and save it.
In the myjs.js JavaScript file, entering clf→ will insert the snippet.
The file must have a .js extension for the JavaScript snippet to insert.

---