Getting it Right with sublime text

Published Jul 01, 2017Last updated Jul 10, 2017
Getting it Right with sublime text

What went wrong

Sublime Text is a very popular text editor majorly because it is free-ish to use and it is super fast and lightweight. But it sadly doesn't come with some of the productivity tools we crave for the most, for instance say you're working with JavaScript or Ruby, it would be very helpful if you could get realtime indentation errors and syntax errors while you type your code, thereby eliminating the need to have to run your code to see the issues you have which would definitely increase you development pace much faster. Truth is there are several other IDEs that have all this features the problem is they are mostly not free and are usually larger in size, consume more memory and startup speed isn't pretty, although you may not notice if you're using some really highend machine. The startup speed of sublimeText is wizardry even on very baasic hardware configuration, it's so efficient that having these extra functionalities on top of it would be total bliss.
ā€‹
The truth is all this features can be added to sublime text with the help of some awesome plugins that we are gonna cover, but what actually went wrong is that there is no visible Plugin menu in the Sublime menu bar, so you just know that sublime text probably supports plugins, but you also feel it would require some efforts to install them so we tend to make the painful switch šŸ˜¦.
ā€‹

Setup Package Control (the fix)

First off just like you have imagined, installing sublime plugins can require some efforts, normally you would have to search through the internet download a plugin which is usually in a zip format, you would extract it, then start moving the directories to the appropriate plugin directory for sublime.
ā€‹
Obviously the process above can be annoying since you have to repeat the steps for every single time you need to install a plugin. So what we can do instead is to first have Package control installed, this would enable us to install any plugin later in the future with just a few clicks. With the Package Control we can search for any plugin we might be interested in, this would let us discover new plugins, easily install the plugin and best of all automatically upgrades the plugin when a newer version is available.
So how do we install the Package control in sublime?
ā€‹
Sublime Command Palette
ā€‹
From the screenshot above, clicking the command palette option will bring up a popup window, where you can make a search. Now you can search for Package Control by just typing it right in.
Clicking the Search result would automatically start the installation process for Package Control. (You may have to wait a little while depending on your network speed.)
ā€‹
Searching for command pallete
ā€‹

Installing A Plugin

Now that we have succesfully installed the package control, we would be learning how to use the package control to install plugins for sublime. We first want to install the SublimeLinter plugin, this plugin is actually the base where most of the other language specific linters will be based off of. To install this plugin we just have to follow this easy 2 step process.
ā€‹

  1. From the sublime menubar click on Tools then click on Command Palette
  2. Search for Install
    ā€‹
    Now click the search result which reads Package Control: Install Package, this would bring the actual search window where you can search for thousands of online plugins published to sublime package control. What we want to search for is SublimeLinter, clicking the search result would automatically start installing SublimeLinter just as we did with the package control.
    To ensure you have the plugin installed reference the screenshot below.
    ā€‹
    Sublime Linter plugin
    ā€‹

Setting up the Linters | Eslint

Now that we have the SublimeLinter plugin installed we now need to install the eslint plugin specifically for javascript. We would just repeat the steps above, except this time when searching for the eslint plugin we would be searching for SublimeLinter-contrib-eslint. You should get exactly same result as below screenshot.
Eslint
ā€‹
Clicking the search result would automatically install the plugin.
Note: For this plugin to work you need to ensure you have nodejs installed on your machine and also have the eslint package for nodejs installed globally aswell, and that's it!
ā€‹

Linting for HTML & CSS

Using this html and css linter is highly recommended and beneficial as you would not have problems with properly nested html code, you can detect html tags or css styles that have not been closed on time, which usually mess up deisgns on the webpage. Getting SublimeLinter to provide linting for HTML and CSS is pretty much the same, if you have noticed by now, all the linter usually have a prefix of SublimeLinter-[language-specific-linter]. In that case adding linting for HTML would require you to install the SublimeLinter-contrib-htmlhint plugin. This plugin would automatically start linting your html, you could also configure it to work only on save. To add linting support for CSS you would install SublimeLinter-contrib-csslint plugin aswell.
Note For both linters to work, you must install their nodejs modules globally, by runninng this code in your terminal.

npm install -g htmllint-cli csslint

HTML lint
CSS lint
ā€‹
Screenshot: How to edit Plugin Settings
configuring sublime-linter
ā€‹

Linting for Ruby | Rubocop

To add support for Ruby Rubocop you would install SublimeLinter-rubocop plugin, this plugin automatically uses the .rubocop.yml file you have specified in your project root directory.

We would not be able to cover all the linters supported by SublimeLinter in this article, but we would list some of the other plugins that are worth mentioning for easy reference.

  • SublimeLinter-pep8 for python linting catch identation errors on time
  • SublimeLinter-phplint for linting php
  • SublimeLinter-contrib-codeclimate amazing code quality check for sublime :awesome-face
    These are just to mention a few as there bunch of other awesome plugins to speed up your development.
    **Note:**Most of the plugins, after being installed automatically open an instruction page in sublime text, read the instruction to ensure you get the most out of these plugins.
    ā€‹

Color Highlighter and Color Picker

While designing websites you would most likely want to see what shade of color would be best for a particular element on your webpage or maybe you just want to see what color a color code is.
with the color-higlighter plugin, sublime text would automatically reveal the color for the color code you have added in your css, by using the actual color as background on the color code text. to install this plugin search for Color-higlighter from the plugin repository and then install.
**Note:**You should add this config in the user setting for the color-higlighter plugin to make the plugin reveal the actual color as background for the text.
Color-HighLighter
Then add the below code in the config editor

{
"ha_style": "filled"
}

ā€‹

Version Control with GitGutter

With the GitGutter plugin we can now have git integration within our project. This plugin would give us the ability to see in realtime the exact line that has been modified in the project, what has been deleted and what was newly added. to add this plugin, you would simply search for GitGutter from the packages and install it.
ā€‹
Gitgutter display changes
ā€‹

Sweet Material Design & Autosaving

You may have noticed how in the screenshot above the theme is more elegant in comparison to other built in sublime themes, and the file icons are just as sweet as the sublime text editor tabs. I highly recommend you install the Material-Theme plugin to get this awesome look and feel.
Note: You would have to activate this plugin after installing it before it starts working.
Activating material-theme
ā€‹
Autosaving is built right into Sublime text, though it doesn't come enabled by default. So to enable autosaving in the editor, you would have to add this line in the User preference

"save_on_focus_lost": true

Follow this screenshot below to open the User preference config and add the config.
User preference
ā€‹
ā€‹

Conclusion

At this point we have been able to cover the little changes, that would make your development life easier and fun-filled. But we have barely just scratched the surface on the amazing ways we could use sublime text, there are so many other things we could explore. But for now I hope this has made you fall inlove more with sublime text.

Discover and read more posts from Paul Smith
get started