WDD 231: Web Frontend Development I

W01 Setup: Tools – Editing – Visual Studio Code

The purpose of this setup activity is to install VS Code. It is free to install on Mac, Windows, and Linus operating systems. This is the software application that will be used to write and edit code.

Organizations and individual programmers decide on which code editors to use. This course uses VS Code as the primary code editor because it is free, open source, and popular in the industry having a large community of support, development, and extensions.

Activity Instructions

1. Install the VS Code editor if you do not already have it installed: Visual Studio Code.
2. If you already had VS Code installed, check for updates.
   To check for updates in VS Code, use the menu Help ► Check for Updates...
3. Add the Live Server extension in VS Code in order to support local, offline testing of your work in your browser.

   Optional Resources

   The Live Server (Five Server) by Yannick tool is very similar to Live Server and will also work for this course. So if you have trouble with Live Server, or have already installed Five Server in a previous course, it is another good option.

4. Customize your VS Code installation:
   • Turn on format code on save.
     Click to expand

     1. In the VS Code menu bar, click File ► Preferences ► Settings

        You can always get into the Settings panel by pressing the shortcut ⌘ , [Mac] or Ctrl , [Windows/Linux].

     2. Type format in the search box.
     3. Check the box for ☑️ Editor: Format on Save.
   • Turn on auto save code using the After Delay option.
     Click to expand

     1. Go to Settings panel by pressing the shortcut ⌘ , [Mac] or Ctrl , [Windows/Linux].
     2. Type auto save in the search box.
     3. In the Files: Auto Save panel, change the dropdown menu from off to afterDelay.

        Option: You can set the delay to your preferred time in milliseconds in the Files: Auto Save Delay setting.

   • Turn on auto updating tags.
     Click to expand

     When modifying a tag, the linked editing feature automatically updates the matching closing tag.

     1. Go to Settings panel by pressing the shortcut ⌘ , [Mac] or Ctrl , [Windows/Linux].
     2. Type linked editing in the search box.
     3. Check the box for ☑️ Editor: Linked Editing.
   • Disable the AI inline suggest tool.
     Click to expand

     Development tools such as VS Code are designed for professionals and have many features that help professionals write basic lines of code quickly. Unfortunately, when you are first learning to write these basic lines of code, these powerful tools often get in your way and hurt your learning. With that in mind, it is recommended that you disable the VS Code Inline Suggest tool.

     1. Go to Settings panel by pressing the shortcut ⌘ , [Mac] or Ctrl , [Windows/Linux].
     2. Type inline suggest in the search box.
     3. Un-check the box for ☑️ Editor > Inline Suggest: Enabled.
   • You will also use the built-in Visual Studio Code support for Emmet which provides shortcuts and abbreviations for quickly writing HTML and CSS, significantly speeding up the coding workflow. You do not need to do anything to enable Emmet, but it is useful to review some of the common commands.
     Examples using Emmet Shorthand

     Emmet supports a wide range of abbreviations and features, including:

     • Abbreviations for HTML elements: For instance, typing .container and pressing Tab generates a <div> element with a class of "container".

       <div class="container"></div>.

     • Nesting and Multiplication: You can nest elements by using the > character and make copies using the *. For example, ul>li*3 followed by Tab will generate a <ul> element with three nested <li> elements.

       <ul>
         <li></li>
         <li></li>
         <li></li>
       </ul>

     • Grouping: Use the * character to create multiple copies of an element. For instance, ul>li*5>a followed by Tab will generate a <ul> element with five <li> elements, each containing a <a> element.

       <ul>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
       </ul>

Getting Help

If you were not able to complete any of these steps, then you are not prepared yet.
Please reach out for help in Microsoft Teams.