A Look Into: SublimeLinter 3

In a previous post, we have shown you how to find potential code errors and bugs in SublimeText using SublimeLinter. Unfortunately, as one of our readers also pointed it out, it does not work in Sublime Text 3.

Sublime Text 3 introduced a new set of API on how a plugin should work, which is likely to have affected SublimeLinters abilities. The developer has since rewritten the plugin, and released the rewrite. Let’s check out SublimeLinter 3 and what it has to offer.

Recommended Reading: 12 Most-Wanted Sublime Text Tips And Tricks

Getting Started

The easiest way to install SublimeLinter 3 is through Package Control. However, unlike the previous version that bundles all available linters, SublimeLinter 3 separates them. This allows us to only install linters for languages that we frequently use.

This means when you made a mistake in your code, nothing will happen unless you install the linter that allows you to report the errors.

Since I use HTML, CSS, JS, and PHP most of the time in my projects, I would like to install linters for these languages. In the Package Control, I install SublimeLinter 3 together with the following plugins:

Then, in order for those plugins to work, we also need to install the linter for the languages, which are HTML Tidy, CSSLint, JSHint, and PHP CLI.

For those of you who are using OSX, Tidy and PHP are pre-installed in the system. To verify, run the following two commands consecutively.

 tidy --version php --version

These commands will show you the Tidy and PHP version you have. You can proceed to use them in Sublime Text.

If you are on Windows or Linux, or don’t have them installed, follow the instructions below.

Installing HTML Tidy

To install HTML Tidy:

In OSX, run this command in Terminal brew install homebrew/dupes/tidy
In Linux, use this command sudo apt-get install tidy.
In Windows, you can grab the EXE installer from TidyBatchFiles.

Installing PHP CLI

OSX users can install PHP in the system with curl -s http://ift.tt/1mfZO8d | bash -s 5.5 command. This will install PHP 5.5, which is the latest version, at the time of the writing.
Linux users can follow this comprehensive tutorial from DigitalOcean.
For Windows users, you can download the installer here.

Installing CSSLint

Next, we will install CSSLint. The following instruction can be followed in all three platform: OSX, Windows, and Linux.

First, install Node.js. Then, run the following command.

 npm install -g csslint

Installing JSHint

We can install JSHint with Node.js too. Here is the command.

 npm install -g jshint

And, we are all set. We can start linting HTML, CSS, JS, and PHP in SublimeText using SublimeLinter 3.

New Features in SublimeLinter 3

SublimeLinter 3 brings several new features, and one that I found really useful is the ability to navigate through errors quickly.

Navigate through Errors

If you are in Mac, press Command + Ctrl + A. In Windows and Linux, you can press Ctrl + K, Ctrl + A.

The Hot key will show a list of errors, as shown in the following screenshot.

Use the ↑ and ↓ to navigate the list, and the page will scroll to the exact line where the error occurred.

Different Mark Styles

In addition, you can also select different mark styles for the Errors. SublimeLinter 3 provides 5 styles, as shown below:

Fill

Outline

Solid Underline

Squiggly Underline

Stippled Underline

To select these style, open Command Pallete – (Mac) Command + Shift + P, (Win/Linux) Ctrl + Shift + P. Then, search and select SublimeLinter: Choose Mark Style. Select the style of your preference.

Alternatively, you can also specify it within the Setting file. Go to Preferences > Package Settings > SublimeLinter > Setting – Users. Then, add this line below.