How to Catch Your Errors in Sublime Text 3

Introduction

Linting is the process used to make sure that our files are error-free. Making sure we have a good linting program is a smart way to avoid small errors during development. Sublime Text doesn’t come with any linters built-in, but we can easily add them.

By linting, we can avoid the little errors that we’ve all been caught up on, like missing a semicolon. Once Sublime Linter is installed, you’ll be able to see the errors in the Sublime Text gutter. Once you click on the offending line, an explanation will be given in the status bar.

Sublime Linter 3 is a plugin for Sublime Text that provides the framework to lint all the programming languages we use for development.

Using Sublime Linter 3

The biggest change between this and other versions of Sublime Linter is that a new package must be installed for each of the languages that we need to lint.

For instance, if we need to lint JavaScript, PHP, and CSS, we’ll need four packages:

1. SublimeLinter
2. SublimeLinter-php
3. SublimeLinter-jshint
4. SublimeLinter-csslint

The quickest way to get those packages is to install using Package Control and the command palette (CTRL+SHIFT+P).

Each of those specific packages also has its own types of installation requirements and you’ll need to look through each package’s installation instructions.

Here are the requirements for the above packages:

Linting PHP (requires PHP)

Make sure that you have the SublimeLinter-php package installed and the other requirement is to have php installed on your computer.

That’s it!

Linting JavaScript (requires jshint)

You will need the SublimeLinter-jshint package, but this one requires a few more things. You will need to have jshint installed on your computer.

To install JSHint, you will need Node.js and npm. After you have Node.js and npm, you’ll need to install the jshint package using npm.

npm install -g jshint

The -g means that you are installing jshint globally and it will be usable by your system. Once that happens, you’ll be able to see all your errors.

If you want to install any more packages, be sure to look at its installation instructions and see what dependencies that specific package needs.

Linting Modes

Sublime Linter provides many different customizations and configurations. One of those options is the linting modes. This option changes when you see errors.

• Background: This is the default behavior of Sublime Linter. Errors will be shown as you type and are updated every time you make a change.
• Load/save: The background setting will show you errors even before you’re done typing a function. This can be annoying for some and you can change linting to only happen on load/save.
• Save only: Only lint on save.
• Manual: You’ll have to trigger a lint through the command palette.

I personally prefer the load/save setting. This way, Sublime Linter stays out of your way until you save. The background setting can get annoying as it constantly tells you that your code has errors (even though you aren’t even done writing it!)

To Change Linting Mode

To change the linting mode, just go into your command palette and type:

sublimelinter lint mode

You can see the setting in the command palette and change it from there.

Mark Style

The mark style is how the code will look with an error. The default is outline but you can choose whichever you like based on personal preference.

Taken from the Sublime Linter site, the following are the options:

• fill
• outline
• solid underline
• squiggly underline
• stippled underline

Just like the lint mode, you can change the mark style from the command palette. Just look for Sublime Linter: Choose Mark Style.

Gutter Themes

In addition to mark styles, you can also change the gutter icon that shows up next to the error. Taken from the Sublime Linter docs, the following are your options

Change the gutter theme in the command palette with Sublime Linter: Choose Gutter Theme.

Conclusion

The Sublime Linter package is very flexible and has support for so many different languages. Take a look at the list of supported languages at the Sublime Text package control site.

There are also many more options available and be sure to look through the docs to see all that you can do!