Tutorial

How to Catch Your Errors in Sublime Text 3

Draft updated on Invalid Date
    author

    Chris on Code

    How to Catch Your Errors in Sublime Text 3

    This tutorial is out of date and no longer maintained.

    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.

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

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about our products


    About the authors
    Default avatar
    Chris on Code

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Featured on Community

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel