DPS909/OSD600 Fall 2017 Lab 3

Mastering Your Code 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. An editor's 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:

• Visual Studio Code (Microsoft/vscode)
• Atom (atom/atom) recently updated to a full IDE by Facebook
• Sublime Text 3 (not free/open, but free to use)
• vim (vim/vim)
• emacs (emacs-mirror/emacs)

2. Test Drive some Editors

Begin by downloading some source code, for example, the source to Best Resume Ever app (.zip file). We'll use this to test drive our editors.

Next, choose from the list of editors above. Pick 2 that you've never used before (or are interested in learning more about) and install them. In each of your new editors, open the source (e.g., top-level folder) for the source you downloaded.

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/Addons

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 guide to your favourite 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 source code open
• Instructions on how to do some of the tasks from section 2. Use screencast gifs where appropriate to demonstrate.
• Discussion of a few of your favourite extensions/addons 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	Michael Pierre	Visual Studio Code	https://michaelpierreblog.wordpress.com/2017/09/21/mastering-your-code-editor-sublime-text-3-and-visual-studio-code/
2	Joao Rodrigues	Atom	https://jmrodriguesgoncalves.blogspot.ca/2017/09/lab-3-mastering-your-code-editor.html
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40