Guide to Using SublimeLinter for Developers

Linter is an indispensible tool in modern web development. It helps us to stay in check with errors and enforce best practice when writing codes. If you’re using SublimeText, I highly recommend to install SublimeLinters. Over the years, SublimeLinters has eveolved to be a power tool suite in SublimeText and brought official packages that connect to linters of various programming languages.

In this tutorial, we’ll see how to install and setup SublimeLinter. Let’s just get started.

Getting Started

The easiest way to install SublimeLinter 4 is through the SublimeText Package Control. Ever since in SublimeLinter 3, each linter must be installed separately. This allows SublimeLinter to run more efficiently by only running the linters that we’ve installed.

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 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.

check version

If you are on Windows or Linux, or don’t have them installed, you can 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

Installing Styleint

Next, we will install the CSS linter called Stylelint that will allow us to check and enforce best practices in our CSS files. The following instruction can be followed in all three platform: OSX, Windows, and Linux. I presume that you’ve already installed Node.js with the NPM.

To install Stylelint, run:

npm install -g stylelint

Note that you will also need to add a Stylelint configuration file to your project directory, additionally install a predefined config like stylelint-config-standard. Once these are configured, you should find the errors highlighted as below.

stylelint errors

Installing ESLint

We are also going to install ESLint, a modern and highly-configuratble linter for JavaScript. This will help us to enforce best practices as well as catch potential errors when writing JavaScript. Installing ESLint also requires Node.js with the NPM.

To install it, run.

npm install -g eslint

Similarly, you will need to add the ESLint configuration to your project, or use the predefined configuration such as eslint-config-recommended.

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

New Features in SublimeLinter 4

SublimeLinter 4 brings several new features, and one that’s easily noticeable is the panel that displays all the errors of the opened files. 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.

error panel

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

Better Visual

We can now hover over the gutter in the editor or just the line where the error happen to view the error message. This was not possible in the previous version.

error on hover

Highly configurable

SublimeLinter 4 is now more configurable than ever before. For example, we can now custom “styles” to each of the linter configuration. This allows us to set icons, color, lint mode, path, and environment variables for each linter separately.

user setting

Further Reference

I hope that this short introduction could help get up and running with SublimeLinter. You can also refer to the reference if you’d like to more of advanced stuff.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail