Setting Up & Configuring Visual Studio Code

On this page…

    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:

    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:

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

    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:

    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:

    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:\\Users\\YOUR-USER-NAME\\Documents\\Web 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\.
    WebSanity Top Secret