How to Catch Your Errors in Sublime Text 3

fdsafdsafdsafdsaf

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.

linter-fill

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 their 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!

linter-php-error

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 and npm. After you have node and npm, you’ll need to install the jshint package using npm (node’s package manager).

 $ 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:

linter-js-error

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.

choose-lint-mode

Mark Style

The mark style is how the code will look with an error. The default is outline but 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.

Fill

linter-fill

Outline

linter-outline

Solid Underline

linter-underline

Squiggly Underline

linter-squiggly-outline

Stippled Underline

linter-stippled-outline

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

Blueberry – cross

sublime-linter-blueberry-cross

Blueberry – round

sublime-linter-blueberry-round

Circle

sublime-linter-circle

Danish Royalty

sublime-linter-danish-royalty

Hands

sublime-linter-hands

Knob – simple

sublime-linter-knob-simple

Knob – symbol

sublime-linter-knob-symbol

Koloria

sublime-linter-koloria

ProjectIcons

sublime-linter-projecticons

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!

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.