Text Editor Packages

Text editor packages help make our lives as developers easier by providing functionalities such as linter error detection, indentation correction, color preview, etc.

Useful packages for Atom

Atom comes built in with some packages (e.g. autocomplete, bracket-matcher, etc), and you can also install other useful packages. Today, we will install five additional packages which you will find helpful on your journey as a developer.

Note: There are many packages with very similar names (e.g. color-picker vs. colorpicker vs. color picker). Do look at the name of the package carefully before installing them.

Installation instructions (for Atom)

1 . If you haven't already done so, download Atom at https://atom.io. Unzip the file. Paste the Atom application into your Applications folder.

2 . From the Atom editor menu, navigate to Atom -> Preferences (or press ⌘ + ,).

3 . From there, click on the + Install tab on the left navigation bar.

4 . Search for the following packages (you'll have to hit enter to run the search), and install them one at a time:

• emmet
• color-picker
• pigments
• linter-js-standard
• standard-formatter

5 . Key commands for these packages

• emmet
  • http://docs.emmet.io/cheat-sheet/
• color-picker
  • Hit ⌘ + shift + C to show colour. Repeat to scroll through different colours, and press any other key to exit.
• standard-formatter
  • Hit Ctrl + Alt + F to fix minor linter errors in your javascript file

Installation instructions (for Brackets)

1 . On the menu, navigate to File -> Extension Manager.

2 . Search for the following packages (you'll have to hit enter to run the search), and install them one at a time:

• Emmet
• JSHint
• Brackets Color Picker
  • type 'color:' to see color picker
• Brackets Css Color Preview