Editors

There are so many great text editors and integrated development environments. We will best be able to support you if we can assume a common, local environment.

🫵 VSCode is Required

If you have strong feelings about your editor, please know you’re almost certainly right. You can even tell anyone you wish that we said so! That being said, in-class and out-of-class, please use vscode. We have the best chance of being able to support you this way.

1. Install Visual Studio Code (a.k.a. “vscode”):
   • Windows folks, if you’re asked by the install wizard 🧙‍♀️, ensure that you enable/select the following:
     • Explorer context menu
     • Add to PATH
   • macOS people:
     1. Dr. Stewart has an unconfirmed hypothesis that for some apps (like VSCode), if you place them any where other than /Applications or ~/Applications, they may not function correctly. So when you download and open the zip, drag the resulting Visual Studio Code.app file to Applications *
     2. After installing vscode, launch it and press the “DO ALL THE THINGS!” shortcut: command+shift+P and then (do not delete the pre-filled >) type shell and choose the Shell Command: Install 'code' command in PATH entry. (docs)

VSCode from the Command Line

Make sure code is available from command line (“CLI”):

Restarting Shell

Note any time you’re trying to make new apps or commands available to your command line interface, you may need to re-launch your CLI after installing or configuring the new app/command.

1. Windows: the installer should have done it, try opening Windows Terminal or PowerShell or whatever and just type code and hit enter.
2. MacOS
3. Linux: the installer should have added it to your path already, try it in your shell

VSCode Extensions for CS 343

VSCode is pretty great out of the box, but part of its speedy greatness is due to their painstaking work to keep the core editor focused, and few-frills. There are several extensions that add functionality to VSCode that might facilitate your work this semester. Consider the following curated lists.

Developer Experience (DX)

1. Live Preview
• have the code you’re writing open in the browser for live preview that automatically updates as you work.
• Note: you should almost certainly change one of this extension’s default settings livePreview.autoRefreshPreview to On Changes to Saved Files (rather than On All Changes in Editor), at least before you start making http requests in your code (e.g. via fetch)
2. Live Share Extension
   • real time co-editing with lab partner or project member(s)
3. Remote Development extension pack
   • Adds functionality to vscode so that it can help support your remote development.
4. indent-rainbow
   • “This extension colorizes the indentation in front of your text, alternating four different colors on each step.”
5. Todo Tree
   • “This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).”
6. Code Spell Checker
   • “A basic spell checker that works well with code and documents.”

WebDev

1. HTML Validate Extension
   • get warnings while authoring HTML that your code won’t validate or violates best practices.
2. axe Accessibility Linter
   • Accessibility Linting for HTML and more.
3. Debugger for Firefox
   • A VS Code extension to debug web applications and extensions running in Firefox.