How to Catch Your Errors in Sublime Text 3

Chris Sevilleja
👁️ 114,539 views
💬 comments

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.

Table of Contents

    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

    173 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.