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.
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.
- Open the console of Sublime Text itself by clicking on CMD +`
- 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) - 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.