Updating Development Tools

NOTE

These instructions are for students who have previously installed development tools for the IMD program. If you are new to IMD OR if you have new computer these instruction may not work for you. Talk to your professor on how to proceed.

Updating Browsers

Most modern browser update automatically. But it is a good idea to ensure that you are running the latest version of all the browsers. The following instructions will explain how to check for updates and update your browsers.

• Update Google Chrome
• Update Firefox / Firefox Developer Edition
• Update Safari
• Check Microsoft Edge Version

Updating Visual Studio Code

By default, VS Code is set up to auto-update. But you can also manually check for updates by clicking the gear icon (⚙️) in the bottom left corner of the VS Code window and selecting Check for Updates....

Getting New Extensions

Using the Settings Sync extension

Warning

If you have installed extension or made settings changes to VS Code, using settings sync WILL override those changes. To avoid this, skip to the manual install section.

If you are using the Settings Sync extension, you can get the latest extension for the IMD program by opening the Command Palette (ctrl+shift+p - Windows, cmd+shift+p - macOS) and typing sync. Select the Sync: Download Settings option.

Manually Install

Of course, extensions can be installed manually. Go to the Extensions View by clicking on the extension icon in the Activity Bar on left side of the VS Code window. From the extensions view, you will be able to see the enabled, recommended, and disabled extensions. You can search for new extension using the search bar the top of the Side Bar.

Required Extensions:

• Live Server - Creates a local development server with live reload
• Live Sass Compiler - Compiles Sass and SCSS file
• StandardJS - JavaScript Standard Style - Integrates JavaScript Standard Style into VS Code

Recommended Extensions:

• Beautify - Beautifies JavaScript, JSON, CSS, Sass, and HTML.
• open in browser - Allows you to open the current file in your default browser.
• IntelliSense for CSS class names in HTML - CSS class name completion from the HTML class attribute.
• CSS Peek - Allows peeking to CSS definitions from HTML files.

Once you have to extensions installed, you will need to make some edits to the settings.json file.

1. Open the VS Code command palette (ctrl+shif+p - Windows, cmd+shift+p - macOS)
2. Type: Settings JSON and select Preferences: Open Settings (JSON)
3. Once the file is open go to the bottom of the file and before the last curly brace, add:

,
"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "/css/"
  },
  {
    "format": "compressed",
    "extensionName": ".min.css",
    "savePath": "/css/"
  }
],
"beautify.ignore": [
  "css/main.scss",
  "*.js"
]

Updating Git

Updating your version of Git is the process as installing it for the first time. Those instructions can be found on Installing Git.

Updating Node

Like git, updating node follows that same instruction as installing it for the first time. Those instructions can be found on Installing Node.