DPS909 & OSD600 Winter 2017 - Lab 6
Contents
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:
