DPS909/OSD600 Fall 2017 Lab 3

From CDOT Wiki
Jump to: navigation, search

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:

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 Jay Yin Atom http://jyopensource.blogspot.ca/2017/09/trying-out-new-editor.html
4 Jiel Selmani Visual Studio Code http://mylyfeincode.blogspot.ca/2017/09/one-text-editor-to-rule-them-all.html
5 Marvin Sanchez Atom http://marvinrsanchez.wordpress.com/knowing-your-text-editors/
6 Nicholas Krause Vim https://nicholas95com.wordpress.com/2017/09/23/trying-out-another-editor/
7 Earle white Emacs https://ewhite7blog.wordpress.com/2017/09/23/choosing-the-right-text-editor/
8 Dan Epstein Atom http://www.danepstein.ca/atom-and-visual-studio-code/
9 Joshua Longhi Visual Studio Code https://jlonghiblog.wordpress.com/2017/09/25/text-editors-and-visual-studio-code/
10 Ajla Mehic Visual Studio Code https://amehic.wordpress.com/2017/09/25/text-editors-visual-studio-code/
11 Avedis Zeitounilian Atom http://avedis777.blogspot.ca/2017/09/atom-my-new-code-editor.html
12 Gaurav Verma Visual Studio Code https://gblogs2017.wordpress.com/2017/09/25/vs-code-editor-guide/
13 Anthony LoMagno Atom https://anthonylomagno.wordpress.com/2017/09/25/mastering-your-editor/
14 Hans van den Pol Atom https://opensourcetoronto.wordpress.com/2017/09/26/getting-started-with-atom/
15 Igor Naperkovskiy Atom and Sublime https://naperkovskiyblog.wordpress.com/2017/09/26/sublime-text-vs-atom/
16 Teddy Prempeh Atom https://teddyprempeh.wordpress.com/2017/09/26/atom-ide/
17 Steven De Filippis Atom https://dps909.defilippis.ca/index.php/2017/09/26/trying-atom/
18 Mat Babol Visual Studio Code http://mmbabol.blogspot.ca/2017/09/learning-ins-and-outs-of-my-favourite.html
19 Mithilan Sivanesan Sublime Text https://mithilanblog.wordpress.com/2017/09/26/sublime-text/
20 Eric Schvartzman Atom https://ericschvartzman.blogspot.ca/2017/09/atom-vs-sublime-3.html
21 Azusa Shimazaki Atom & VSC http://assmith2017.blogspot.ca/2017/09/nice-editor.html
22 Leonel Jara Atom https://lejara.wordpress.com/2017/09/27/atom-vs-sublime/
23 Sean Prashad Sublime Text 3 https://medium.com/seanprashad/emerging-editors-96fd7006f516
24 Haoyu Yang Visual studio code https://haoyu1337.blogspot.com/2017/09/playing-with-visual-studio-code.html
25 Fateh Sandhu Visual studio code & Brackets https://firefoxmacblog.wordpress.com/2017/09/26/visual-studio-code/
26 Yankai Tian Atom & Visual Studio Code https://ytian38.wordpress.com/2017/09/28/editors/
27 Parthkumar Patel Atom https://ppatel221.wordpress.com/2017/09/28/my-choice-of-editor/
28 Eric Suarez Visual Studio Code https://esoscode.wordpress.com/2017/09/28/choosing-the-right-text-editor/
29 Marco Beltempo Visual Studio Code http://www.marcobeltempo.com/open-source/visual-studio-code-review/
30 Hadi Saeed Atom https://techbreaksblog.wordpress.com/2017/09/28/getting-started-with-atom/
31 Diana Dinis-Alves Visual Studio Code https://ddinisalves.wordpress.com/2017/09/27/trying-out-vs-code/
32 James Clarke Atom vs Visual Studio Code https://jamesclarke.blog/2017/09/27/open-source-code-editors/
33 Dilan Guneratne Visual Studio Code https://dnguneratne.wordpress.com/2017/09/28/exploring-code-editors/
34 Ojavi Hewitt VS Code vs Sublime Text 3 https://wordpress.com/post/osbdotcom.wordpress.com/57
35 Arpit Gandhi Visual Code vs Atom https://wordpress.com/post/arpit1667.wordpress.com/35
36 Phil Henning VSC vs VIM https://bluesockphil.wordpress.com/2017/09/23/compare_editorsvim-vsc/