Clearly Emmet abbreviation is a very powerful tool that makes coding very easy in Visual Studio code. Moving a line up/down: We can easily move a line up and down in the Visual Studio Code. This helps us reposition the content with ease. VSCode will move a line up when you use OPT+UPARROW or down when you use OPT+DOWNARROW. # Go to Next Error or Warning When you have multiple errors or warnings, you can visit each of them in the current file using the Go to Next Error or Warning. Press F8 and you will see the first error or warning.

Show file extensions

Before you do anything else in this course, we need to make sure that extensions (e.g., .html, .zip, .jpeg) show up at the ends of files.

If you use a Mac, do the following:

1. Click on the Finder.
2. Click on Finder > Preferences.
3. Click on the Advanced tab.
4. Check the box next to Show All Filename Extensions.
5. Close the Preferences window.

If you use Windows, please refer to Configuring Windows To Show Extensions & follow those directions.

Install Visual Studio Code (VSCode)

Download Visual Studio Code & install it on your computer.

VSCode settings

When you change the settings in most apps, you click on buttons & check checkboxes & so on. In VSCode (& many other developers’ text editors), you instead edit text files. To change your settings in VSCode, go to Code > Preferences > Settings. The Default Settings are on the left, & your settings (called User Settings) are on the right. To change a setting, copy it from the default on the left, paste it into your settings on the right, make your change, & Save.

I have already created settings for you. To use them, do the following:

1. Select Code > Preferences > Settings. A new tab will open in VSCode labeled User Settings, with Default Settings on the left & User Settings on the right.
2. Go to VSCode Settings & copy the settings in the VSCode Settings box (everything from — & including! — the first { to the last }.
3. Go back to VSCode & click in your settings on the right.
4. Select all of the content in your settings by pressing ⌘A (Mac) or Ctrl-A (Windows).
5. Paste the settings you copied, overwriting what was formerly in your settings.
6. Save what you just pasted in.
7. Close User Settings by clicking the × on the tab at the top of VSCode.

HTML snippets

VSCode has a fantastic feature (shared by other editors) that allows you to type a few letters (a snippet) & have them expand into code for you. I have created some HTML snippets for you to use, but you have to install them first.

1. Select Code > Preferences > User Snippets. The Select Language for Snippet palette will appear.
2. Either type HTML & press Enter, or click on HTML in the palette. A file named html.json will open.
3. Go to VSCode HTML Snippets & copy the snippets in the VSCode HTML Snippets (everything from the first { to the last }, including those characters).
4. Go back to VSCode & click inside html.json.
5. Select all of the content in html.json by pressing ⌘A (Mac) or Ctrl-A (Windows).
6. Paste the settings you copied, overwriting what was formerly in html.json.
7. Save what you just pasted in.
8. Close html.json by clicking the × on the tab at the top of VSCode.

Extensions

Now you need to install some necessary extensions. Get to the Extensions View of VSCode in one of the following ways:

• Go to View > Extensions.
• Press ⇧⌘X if you use a Mac & Ctrl+Shift+X if you use Windows.
• On the left side is the Activity Bar, which shows 5 icons running from top to bottom. Click on the bottom icon, which looks like a small square inside another square. If you hover over it, it should say Extensions.

To find an extension, type the name of the extension in the Search box at the top of the Extensions View. You will see a list of extensions that match what you typed. To find out more about an extension, click on it in the list of results. To actually install it, click on the green Install button.

Install the following extensions:

• Auto Complete Tag by Jun Han (which actually installs Auto Close Tag & Auto Rename Tag)
• Bracket Pair Colorizer by CoenraadS
• expand-region by Le Trieu
• File Templates by Bruno Paz
• File Utils by Steffen Leistner
• HTML Snippets by Mohamed Abusaid
• htmltagwrap by Brad Gashler
• Live Server by Ritwick Day
• Path Autocomplete by Mihai Vilcu
• Placeholder Images by Jake Wilson
• Project Manager by Alessandro Fragnani

Go ahead & install these too, but we won’t use them until we get to CSS:

• Autoprefixer by mrmlnc
• Beautify css/sass/scss/less by michelemelluso
• CSS Peek by Pranay Prakash
• HTML CSS Support by ecmel

Themes

I want you to make VSCode into your workspace. One way to do that is to install Color Themes & File Icon Themes. A color theme changes the colors of everything in VSCode, while a file icon theme puts little icons to the left of your files when you are in Explorer View. You install these themes as extensions.

Search for color theme to see the full list. I suggest searching for these in particular (e.g., color theme monokai), as they are widely supported by almost all code editors:

• Solarized (both light & dark)
• Soda (weirdly, there aren’t any light Soda themes)
• Monokai (I use Monokai Dark Soda by Adam Caviness myself, as it combines the best of Monokai & Dark Soda)
• Material
• GitHub
• Dracula

To apply your color theme, go to Code > Preferences > Color Theme. The Select Color Theme palette will open. Make your selection & press Return.

Search for icon theme to see the full list. I suggest looking at one of these:

• Material Icon Theme by Philipp Kief
• vscode-icons by Roberto Huertas (it’s what I use).

To apply your file icon theme, go to Code > Preferences > File Icon Theme. The Select File Icon Theme palette will open. Make your selection & press Return.

Advanced Only

You do not have to do the following, unless you’re feeling super-nerdy or want a challenge.

Emmet

First, let’s set up Emmet.

You must name folders exactly what I tell you in this section!

1. In the Documents folder on your computer, create a new folder & name it Web Dev Projects.
2. Inside the Web Dev Projects folder, create a new folder & name it +emmet (with the +).
3. Now go to Emmet - snippets.json, which should take you to a webpage at GitHubGist titled “rsgranne/Emmet - snippets.json”.
4. In the top right you should see a button labeled Download ZIP. Click that, & a zip file should appear in your Downloads folder named with a crazily-long collection of numbers & letters.
5. Double click that zip file.
6. Move the file named Emmet - snippets.json into the +emmet folder. The way you do that depends on your operating system.
   1. If you’re using a Mac…
      1. You should see new folder with the same crazily long collection of numbers & letters. Inside that is a file named Emmet - snippets.json.
      2. Drag Emmet - snippets.json into the +emmet folder you just created.
      3. Feel free to delete the folder & the zip file with the crazily-long name.
   2. If you’re using Windows…
      1. You will probably open a new window that contains a file named Emmet - snippets.json.
      2. Drag that file into the +emmet folder you just created.
      3. Close the zip window.
      4. Feel free to delete the folder & the zip file with the crazily-long name.

Now let’s get VSCode’s settings ready:

1. Select Code > Preferences > Settings. A new tab will open in VSCode labeled User Settings, with Default Settings on the left & User Settings on the right.
2. You need to make a very important change. Look for the line in the settings file that starts with emmet.extensionsPath. Next to it is /Users/YOUR-USER-NAME/Documents/Web Dev Projects/+emmet/. That needs to be changed.
   1. If you’re using a Mac…
      1. Open the Finder & select Go > Home. The name at the top of the Finder window or on the tab is your user name.
      2. Simply replace YOUR-USER-NAME with your specific user name.
   2. If you’re using Windows, you actually need to replace the entire line.
      1. Go to C:Users & you should see your Windows user name.
      2. Replace /Users/YOUR-USER-NAME/Documents/Web Dev Projects/+emmet/ with C:UsersYOUR-USER-NAMEDocumentsWeb Dev Projects+emmet (if you placed the +emmet folder where I told you to above in the Emmet section, this should work for you).
      3. Now replace YOUR-USER-NAME with your specific Windows user name that you saw in C:Users.

When consulting this documentation, you can see keyboard shortcuts for the keymap that you use — choose it with the selector at the top of the page:

JetBrains Rider's top keyboard shortcuts

Basic editing

Caret navigation

Select text

Coding assistance

Context navigation

What Is Visual Studio Code

Find everything

Navigate from symbols

Code analysis

Build, Run, Debug

Visual Studio Copy Line Down

Refactorings

Global VCS actions

Unit Testing

How To Download Visual Studio Code

Tool Windows