How to Identify Code Errors in Sublime Text

Writing code for hours only to find that it returns errors is one of the most distressing things about a developer’s life. This is made worse when we have no idea what went wrong. And when things go wrong, developers cope in every way they can (check out Jake’s post for 30 common ways we deal with code errors).

However, if you write code with Sublime Text, here is a small tip to minimize this frequent problem and stop you from giving up coding.

Lint and Linters

In programming, “lint” refers to the process of analyzing potential errors or bugs within the code. A linter is the tool used for linting. There are numerous linters available for almost any language, such as JS, PHP, Java, and even CSS.

By linting, you can not only minimize errors and bugs, but also become a better coder as it encourages you to follow standard rules and best practices in writing code. Fortunately, there is a Sublime Text plugin that packs all these linters into one package, allowing you to lint various codes seamlessly.

Installing SublimeLinter

First, you need to install Package Control for the easiest way to install Sublime Text plugins. If you have it installed, press Shift + Command + P and search for “Install Package“. This will load the package repository.

Once loaded, search for SublimeLinter, and press Enter to install.

Adjusting When Linting Happens

By default, the linting process runs in the background as you write the code. For a more convenient experience, I suggest changing this behavior (but if you are fine with the current setting, feel free to skip ahead).

Go to Preferences > Package Settings > SublimeLinter > Settings – User, which opens in a new tab.

Then, add the following line to ensure that linting only occurs upon saving a file.

{
  "sublimelinter": "save-only"
}

Linting CSS

Now, let’s try it out with our code, starting with CSS. We have the following adjoining class selector without the closing curly bracket.

.class.anotherclass {
  border-radius: 5px;

After saving the file, it turns out that I got 1 caution and 1 warning.

The error message can be found in the status bar, to the left of the line number, marked with a warning sign. In my example, it notified me of the missing curly bracket and also advised me to avoid using adjoining class selectors as they have some issues in Internet Explorer 6.

Linting JavaScript

Next, let’s try this with JavaScript. This time we have the following JavaScript function taken from W3School. I have introduced errors into it by removing the semicolons, something programmers often forget to do.

function myFunction() {
  var x = ""
  var time = new Date().getHours();
  if (time <= 20) {
    x = "Good day"
  }
  document.getElementById("demo").innerHTML = x
}

After saving the file, (ta-da) yes, I am missing a few semicolons.

Final Thought

If you are coding with Sublime Text, I think SublimeLinter is a must-install plugin. Not only does it help cut down on the time you need to find errors in your code, but it also helps you become a better coder in the long run.