DPS909 & OSD600 Winter 2017 - Lab 6

Picking and Learning a Good Editor

In this lab you will work with some modern code editors, learn how to work with editor package managers and addons, and learn some common workflows. You will also learn how to use screen recording software.

1. Editors

One of the most important tools a software developer has is his/her code editor. Choosing an editor is important, because it determine the limits of what you can work on, and where (e.g., OS) you can use it. The extensibility is also one of the determinates of how much you can grow as a developer: does your editor support you as you learn new things, as new tooling, practices, and workflows become available?

Some of the most popular editors at the moment include:

• Atom (atom/atom)
• Visual Studio Code (Microsoft/vscode)
• Brackets (adobe/brackets)
• Nuclide (facebook/nuclide)
• Sublime Text (not free/open, but free to use)
• vim (vim/vim)
• emacs (emacs-mirror/emacs)

2. Test Drive some Editors

From the list of editors above, pick at least 2 that you've never used before and install them. Use the Mozilla Brackets repo to test the editor (i.e., try opening the entire project) in the chosen editors to see how they perform.

Research and try doing some common tasks with both editors, for example:

• How to open a file, a folder of files (e.g., an entire project)
• How to change your indent from tabs to spaces, 2-spaces, 4-spaces, etc?
• How to open the editor from the command line
• How to find things (e.g., a string, a file)
  • Finding something in an open file (current editor)
  • Finding something in any file in a project
• How to split the screen into multiple panes/editors/views
• How to install editor extensions (a.k.a., plugins, packages, etc.)
• How to use multiple cursors to change common code at the same time
• What are some common key bindings
• How to change keybindings
• How to enable/use autocomplete for coding HTML, JS, CSS, etc
• How to change editor preferences and some common preferences you might want to set/change

Which editor is easier to use and learn for these tasks? Based on your experience, pick one of the editors for the next section.

3. Install some Extensions

Modern editors are extensible, and can be improved by adding third-party extensions/packages/plugins. Using the editor you chose in step 2. research some popular extensions for your editor. Here are some categories to consider:

• Language support (integrated docs, autocomplete, etc)
• Linting (reporting warnings, errors in code syntax)
• Beautifiers (clean up spacing/indentation in files)
• Git integration (make it possible to see git info, or use git from the editor)
• Git Merge Conflict tooling (help when dealing with merge conflicts in files)
• Debugging (connect to remote debugging tools from the editor)
• Themes (change how things look)
• Syntax Highlighting for common formats (Vagrantfile, npm, docker, etc)
• Spell checking
• Tools for Files (allow working on files in advanced ways)
• Helper Tools (image viewers, colour pickers, etc)
• Terminal integration (allow interaction with the terminal from the editor)
• Documentation tooling (make it easier to write docs for code)

Pick a few categories above, and install some extensions to your editor. Make sure you install at least 5 extensions.

4. Blog your Results

Write a short introductory guide to your chosen editor. In your guide, please include some screencasts recorded as animated gifs using licecap (Windows/Mac) or byzanz/peek (Linux). Your guide should include the following:

• Editors you tried in your experiment
• Name of editor you ended up choosing and link for downloading it
• Why you chose this editor over the other(s)
• Screenshot of what it looks like with the Brackets code open
• Instructions on how to do 5 of the tasks from section 2. Use screencast gifs where appropriate to demonstrate.
• Discussion of your 5 favourite extensions from section 3 and what they do. Use screencast gifs where appropriate to demonstrate.

After you've tested the editors and written your guide, add your name, the chosen editor name, and your blog guide:

#	Name	Editor (Name)	Guide Blog Post (URL)
1	Margaryta Chepiga	Atom, Brackets
2	Simon de Almeida	Nuclide, emacs
3	Andrey Bykin	Atom, Sublime
4	Eugueni Antsyferov	Brackets, vim
5	Oleg Mytryniuk	Atom, Nuclide
6	Theo Dule	Atom, Visual Studio Code
7	Xiao Lei Huang	Atom, Vs
8	Jerry Goguette	VSC, Atom
9	Ray Gervais	Spacemacs, Sublime
10	Tiago Aguiar	Vscode, Atom
11	Nagashashank P	IntelliJ IDEA, KOMODO IDE
12	Timothy Moy	Atom, Sublime
13	Michael Kavidas	Atom, Sublime
14	Christopher Singh	Atom, VS Code
15	Rahul Gupta	Sublime, UltraEdit
16	Badr Modoukh	Atom, Brackets
17	Peiying Yang (Brian)	Sublime Atom
18	Heetai Park	Atom, Visual Studio Code
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34