Note: This document is a work in progress. You can help improve it.

Your New Best Friend

Text Editors

Editors vs. IDEs



A hackable text editor for the 21st Century

Atom, built by the GitHub team is a cross platform editor that is hackable through the use of CSS and JavaScript. The editor is implemented in web technology so all of the tools we learn in class can be use to change and extend the editor.

There are a set of plugins we recommend for students at the start of their course. As we proceed through the class we will install more plugins as we add more skills.

Plugins we recommend to start with (some of these are installed by default)

  • Makes Atom look more pretty
    • file-icons adds fancy icons to the project file view
    • pigments improves color handling in files such as CSS
  • Makes your code look pretty
    • In your terminal: brew install tidy-html5
    • prettier-atom formats your CSS and JavaScript files to a nice standard.
      • NOTE: Turn on 'format on save' in settings
    • formatter formats other files such as HTML
    • formatter-tidy handles HTML files better, including all HTML5 tags
  • Points out typos/mistakes in your code
    • linter shows typos/mistakes in code
    • linter-stylelint shows typos/mistakes in code
  • Generally helpful tools
    • autocomplete-paths will show autocomplete suggestions of files in your project
    • color-picker nice color picker for defining color codes in files

How to install plugins

  • Select the menu option Atom > Settings
  • Click the Install icon (with the + symbol)
  • Type in the name of the plugin and press enter to search
  • Find the plugin and click Install
  • Restart Atom if necessary

Visual Studio Code

Code editing. Redefined.

If you sure you are going to be choosing the C#/.net path in the backend frameworks section OR you are a Windows user, we recommend choosing Visual Studio Code

First time setup instructions

  • Launch VS Code
  • Use Command Shift P (or Control Shift P) to launch the command palette
  • Type command to search for the entry Shell Command: Install 'code' command in PATH and press ENTER

Plugins we recommend to start with (some of these are installed by default)

  • Code Spell Checker
  • ESLint
  • Prettier
  • Gitignore Template
  • HTML CSS Support
  • JS JSX Snippets
  • Markdown Preview Github
  • open-in-browser
  • Rainbow Brackets
  • Reactjs code snippets

Settings we recommend to start with

Go to Code menu, then Preferences, then Settings

  • In the search bar enter tab size
  • Find the setting Editor: Tab Size and change this to 2
  • In the search bar enter formatOn
  • Find the setting Editor: Format on Save and turn this ON
  • In the search bar enter Prettier
  • Find the setting Prettier: Semi and turn this OFF
  • Find the setting Prettier: Single Quote and turn this ON
  • Find the setting Prettier: Use Tabs and turn this OFF

Tips and Tricks

Sublime Text





Visual Studio


Jetbrains (Intellij, Rubymine, etc.)