Friday, December 18, 2015

The Atom Editor - part II. - The Atom Packages

A Collection of Must Have Atom Packages


The Atom editor calls the extension plugins Packages. The packages can add a new functionality, extend the existing functions or completely replace them. Even the core functions can replaced by an external package.

How to Install Packages

Installing directly from the Atom Editor

It is really easy, in the Setting panel (Ctrl + ,) go to the Install section, search for a package and press the Install button.

Installing from Command Line

Alternatively you can install packages from command line using the `apm` command. Run `apm install package` to install the package. You can also pass multiple packages for mass installation.

Installing Starred Packages

You can mark a package with star - unfortunately only at the Atom web pages, not from the editor itself. Then you can install the starred packages with command "apm stars --install" command.

You can also install the starred packages from a different user. So if you want to install all my starred packages simply run "apm stars --user lslezak".

Note: It will install all starred packages, you cannot select individual packages or change the list before installation. So really check what the bundle contains!

Possible Problems

There are thousands of Atom packages available so it means there is a wide variety of packages and you almost sure find a package for a feature you miss.

Too Many Packages?

But that also means there might be several packages providing the same functionality, there might be forks of the same packages, there might be low quality packages... This is a similar situation like with Rubygems, you have to spend some time searching for the best option.

You can use the download number as a very roughly indicator, a high download number usually means the package is good. (Obviously this metrics does not work for the newly published packages or for very specific packages...)

Conflicts

Another drawback of too many packages is that there might be conflicts between packages by chance. The keyboard shortcuts can easily get in conflict because there are not many possibilities for unique and simple shortcuts.

If a shortcut does not work for you then look whether it is actually defined properly in Settings -> Keybindings section. Or you can press Ctrl+ . (dot) to display the keybinding resolver which displays all actions for the pressed keys.

There are two possibilities how to resolve a conflict:
  • Simply ignore the conflict and use the command panel (Ctrl + Shift + p) for selecting and running the action.
  • If you need to run the action often and you really want to have a shortcut then you can disable the keyboard shortcuts for the conflicting package. If you need the shortcuts for the conflicting package you can remap them in your config file (there is a link at the top of the Keybinding settings page).
If the packages conflict at the UI level (using the same UI element, that can happen if you install another fork of a package) or at the program level then you should probably report an issue at GitHub and ask the maintainers to solve the conflict.


Generic Packages

[Note: Some screenshots are linked from the project pages.]
  • open-recent - Adds a new submenu with the recent files and projects, helps when you often switch between multiple projects.


  • local-history - Keeps a copy of each file when saved, can help you if you are experimenting and you want to get some change from the history. When you are testing something you usually do not commit every change to Git (you would need to clean them up later) so if you need to have a fine grained history without Git commits this tool can help you. The changes are displayed in a diff tool (meld by default) so you can easily choose which specific parts should be reverted back.


  • sync-settings - Backs up the Atom settings to cloud (GitHub's Gist) which can be later restored. You can easily share the configuration, packages, snippets, etc across several machines (e.g. a desktop and a laptop).
  • term3 - Run terminal directly in an Atom tab, run commands without switching to a different window.

Editor Packages

  • revert-buffer - Drops all changes and reloads the current file from disk. You can close the file without saving and then reopen it but you would need to file the file in the tree and it would loose the current state (tab position, cursor position).
  • change-case - Easily change the case (camel, snake, upper, lower...)
  • toggle-quotes - Easily switch between single quote (') and double quotes (")
  • highlight-selected - Highlights the selected word in the file, helps with locating functions and variables in the file.
  • minimap - Displays a miniature of the file for easy navigation.

Code Completion

Git Packages

  • atomatigit - Adds an optional side bar with Git status and provides some shortcuts for Git commands (stage, commit, push...):



  • git-plus - Access to the most used Git commands


I currently combine both, git-plus has direct shortcuts while atomatigit is more interactive (e.g. you can select which changed files to stage and commit).


  • git-blame - Displays the "git blame" data next to the text:



  • git-history - Displays a commit (diff) from the history of the current file (or a full version)

  • git-log - Displays a graph with the Git commits




Additional Language Packages


These packages provide syntax highlighting and support for other file formats and programming languages which are not included in the default set:
Of course, you can find support for many more languages, just check the available packages.

Ruby Packages


These packages can help you with Ruby development.
  • ruby-block - Highlights the matching block at the cursor. When you place the cursor at `end` keyword it highlights the matching `do` or `if` line.


  • ruby-block-converter - Easily convert between single line `{}` and multine `do...end` Ruby blocks.

  • ruby-quick-test - Runs the test at the cursor, avoid running whole possibly long test suite when fixing just a single test.

Linters

Linters provide live code style checks and/or syntax checks.


  • linter-rubocop - There is also Rubocop linter, but unfortunately it requires a recent version of Rubocop (the version used by YaST is too old).

Building tools

For building the sources I basically found two systems:



I tried both and it seems that the "build" package is a bit better from the usability point of view. "build-tools" use more complicated keyboard shortcuts and require manual configuration while "build" tries to autodetect the tools used (scans for "Makefile", "Rakefile", etc...).

Web Development




  • pigments - Another color selection and visualization tool. (Note: I suggest to disable it and enable it only when editing a style sheet. The package treats numbers in a text like "bnc#123456" as a color specification and sets it as the background which looks weird...)


    • emmet - expands text like "ul.list>li.item*3" into appropriate HTML structure

    • rest-client - A simple REST API client for testing server responses, can be useful for testing the server response.

    TODO and FIXME Helpers

    • imdone-atom - Scans the project for "FIXME", "TODO" and similar comments. Displays a Trello-like dashboard where you can track the status. The drawback is that it adds some additional tags to each comment (to track the state) so it is not good for project where you do not want to change the code unnecessarily.


    • todo-show - Similar to the previous package, but only scans the project. On the other hand it does not touch the code.

    Miscellaneous

    I found some quite interesting plugins which nicely show the flexibility of Atom.

    • lcov-info - Displays code coverage overview and highlights covered and not covered lines. For Ruby you need LCOV coverage generator like simplecov-lcov Ruby gem.
      You need to enable single file output via "SimpleCov::Formatter::LcovFormatter.report_with_single_file = true" option and add the formatter. Unfortunately the generated coverage is saved to "./coverage/lcov/directoryname.lcov" while the lcov-info expects "./coverage/lcov.info" file. You have to move the file manually or enhance the task which runs the test.
    • markdown-scroll-sync - A nice enhancement for the builtin Markdown preview package. It keeps the editor position in sync with the preview when scrolling and moving the text.


    • docblockr - help with writing the documentation comments, scans the function methods and generates a template. Unfortunately the support for Ruby is missing... :-(



    • travis-ci-status - Displays a Travis build status icon in the panel. On click it displays details with a direct link to the Travis build.



    To be Continued...


    The next time we will look at the "hackability" of the Atom editor...

    Monday, December 14, 2015

    The Atom Editor - part I. - Introduction

    The Atom Editor

    For the 13th SUSE HackWeek I chose the Atom Editor as the topic.

    I wanted to get familiar with it and to learn how to customize it and how to develop new features.

    Atom Overview


    For the quick overview of the Atom features just watch this video:


    If you have more time you can watch this longer video:


    Installation

    Installation is quite easy, there are pre-built binary packages for the most used Linux distributions. If there is no package for your distribution or it does not work for you then you can build Atom from the sources.

    Fortunately for the openSUSE distribution is it easy, just download the RPM package from the main page. It has been built for Fedora 21 but it works without any problem in openSUSE Leap 42.1. (I have tested an older version also in openSUSE 13.2 and it was fine so it should work there as well.)

    Setup

    I suggest to switch from the default white-on-black scheme to more usual black-on-white which is used by most desktop applications and make switching to the other applications (like a web browser) more eye-friendly.

    At the configuration tab (Ctrl + ,) go to the Theme section and select Atom Light as the UI theme and One Light as the syntax theme. You can try the other themes or you can download some new one in the Install section as shown in the videos above.


    The Atom Features

    Here is a short summary of the features which I found interesting during the short testing. I do not mention the usual editor features and I likely overlooked something. You can also see some features in the videos above.

    • The Command Panel (Ctrl+Shift+P) is probably the most important feature. It displays all known commands (the core commands and also from all enabled plugins) with a keyboard shortcut if available. There is also a quick search for looking up.
      So if you cannot remember a shortcut or you do not know where to find a command just simply type it into the search bar and Atom will list all (even fuzzy) matches.
    • The Atom authors say it is a hackable editor. I can confirm this, you can very easily change the look or layout or add new features. But let's go into the details in another blogpost...
    • Open at GitHub - if you are editing a file which is stored at a GitHub repository you can easily open it in web browser. That's useful if you want to send a position in the code via IM, mail etc...
    • Live Markdown preview can be displayed while you are typing. This helps a lot with the correct formatting.

    The Atom features can be easily extended by plugins, let's look at them later.


    Documentation

    You can find the detailed user documentation here.


    To Be Continued...

    Next time we check some Atom plugins which extend the basic functionality.