Sublime Text Editor Packages in Daily Development Tasks

Sublime Text Packages

In this article, we are going to discuss how the usage of Sublime text editor packages affects your development tasks. Many of us can write code on any text editor either pre-shipped with the operating system or downloaded from the Internet. We will begin by comparing the common text editors available nowadays; then we will explain how to install them and provide a list of the most popular packages and how to use them in your coding experience. Finally, we will discuss how the usage of Sublime text editor packages affects the daily development tasks of programmers.

Sublime Text Editor vs. RubyMine IDE

The most well-known editors or IDEs in ruby on rails development are TextMate, Sublime Text and RubyMine. This table demonstrates a comparison between Sublime Text Editor and RubyMine IDE (as TextMate product was discontinued):

Criteria Sublime Text RubyMine
Customizable YES PARTIALLY
Fuzzy Search YES NO
External Plugins YES (open source) LIMITED (JetBrains sources)
Booting Time Negligible (< 2s) Significant (> 30s)
Key Bindings Customizable Predefined sets
In-app Terminal Not present Built-in
Code Lint YES (External sources) Built-in
Notifications Not present Built-in
Price Free, License License only
Free OR USD $70 once and for all USD $ 199.00 /1st year, $ 159.00 /2nd year, $ 119.00 /3rd year onwards

Verdict:

We chose to use Sublime Text Editor for being highly customizable and because it provides the ability of fuzzy search where you type fragments of a folder and file name and it will suggest the best matching file lists. A significant number of external (3rd party) libraries or extensions to sublime can be installed to tailor it to your development needs.

Sublime Text
Sublime Text

Last but not least, it’s FREE version without any missing features 🙂

What Are Sublime Text Packages and What Are The Most Popular Ones

We will now discuss an overview on Sublime text packages and how to install them on your system.

Sublime text packages are external extensions for the text editor to add multiple features, themes and code style schemes and extend the default editor to cope with the developers needs and ease their life.

How to Install Sublime Package Control

In order to install the package control for Sublime, you need to do the following.

  1. Open the console of Sublime Text itself by clicking on CMD +`
  2. Then copy and paste the following:
     import urllib.request,os,hashlib;
     h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88';pf = 'Package Control.sublime-package';ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read();dh = hashlib.sha256(by).hexdigest();print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)   
    
  3. Restart sublime and viola! You can now install packages to your editor.

Here, we will discuss a number of sublime development packages that are used by most of the team members. The packages are categorized into several categories.

  • Category 1: Some packages that you need to install right away after installing Sublime.
  • Category 2: General Web Packages
  • Category 3: Specific Ruby on Rails packages.

Development packages you need to have

Here is a list of the need-to-have packages that will ease your development progress:

Packages Name Usage
BracketHighlighter provides the ability of highlighting the start and end of a code block
Clipboard Manager provides the ability of Copy & pasting many items and retrieve them from the generated copy and paste stack
Color Highlighter provides a color preview of with the color codes either rgba or hex next to the line number, mostly used in .(s)css files
ColorPicker provides advanced color picker either predefined colors, hex or rgba color codes
Emmet provides the ability of writing faster HTML codes using some snippets and abbreviations e.g. div.text-center > p.bold
Git provides the ability of extensive git control from sublime diff, blame, commit, etc…
GitGutter-edge highlights edited line numbers that were changed from the last commit in symbols
Gitignore provides gitignore templates predefined in a remote github repository to be used in your projects
Indent XML prettifies XML code syntax and indents it to increase readability
Local History enables local version control for files using timestamps
Pretty YAML indents YAML files for better readability
SideBarEnhancements provides more control on a project folder from inside of sublime editor e.g. new file, folder, renaming, etc…
Sublime-Text-2-BIDI a package to write bi-directional text in sublime, used mainly for RTL languages such as Arabic.
SublimeLinter lints many programming languages for errors such as ruby, java, etc…
TrailingSpaces removes trailsing spaces in any file, and it is better to be set to trim after save.

Web Packages

Packages Name Usage
Autoprefixer adds cross-browser CSS prefixes for a certain number of properties to ensure that all the properties behave the same across all modern web browsers
Bootstrap 3 Snippets provides most of Bootstrap styles as snippets to used directly in your code files
CSS Extended Completions provides CSS competitions for most, maybe all CSS properties and predefined values
jQuery provides autocompletion for JQuery functions and a brief description about the usage of each.

Ruby and Ruby on Rails packages

Packages Name Usage
Alignment eases the alignment of ruby syntax according to the style guide lines where all the = are aligned to the same column
BetterCoffeeScript adds CoffeeScript support to sublime including code completions and highlighting
Cucumber adds cucumber support for sublime including Gherkin syntax
Cucumber Step Finder eases the ability to search in cucumber Gherkin steps for navigation in all cucumber steps files
ERB Autocomplete eases the addition of ruby on rails HTMl templating language ERB to autocomplete the <%= %> tags
Haml adds the support of RubyHaml package to Sublime and speeds up the development with HAML using autocomplete and block comments
HTML2Haml converts HTML code to HAMl either whole file, selection or clipboard copied code.
SCSS provides better support for SASS (.scss) files in sublime editor

Impact on Development

The usage of Sublime packages has a significant positive impact on development tasks where it can do the following.

  • Increase the speed of developments
  • Ensure following of conventions and style guides for many programming languages
  • Ease the development flow with keyboard navigation without the use of a mouse/trackpad
  • Enter distraction-free environment of coding away from any notifications, emails or anything

After knowing why we chose sublime text, how to install external packages and what are the most popular packages used.

In the next episode, we will talk about configuring sublime text editor and some of the previously mentioned packages to facilitate your development life.

Mohamed Hisham

Ruby on Rails Team Leader Enthusiastic Ruby on Rails FullStack developer, interested in DevOps, a Software Engineer and MSc. graduate of University of Southampton

Leave a Reply

Your email address will not be published. Required fields are marked *