Identify Code Error In Sublime Text With Sublime Linter

Writing codes for hours only to find that it returns errors is one of the most distressing thing about a developer’s life. This is made worse when we have no idea what we did 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 error).

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

Recommended Reading: Working With Code Snippets In Sublime Text

Lint and Linters

Lint, in programming, is the term referring to an attempt of analyzing potential errors or bugs within the codes. Linter is the tool for Lint(ing). There are literally a bunch of linters for almost any languages, like JS, PHP, Java, and even CSS.

By Linting, not only will you be able to minimize errors and bugs, we can also become a better coder as it serves as a reason for us to follow the standard rules and best pratices in writing code. Luckily, there is a Sublime Text plugin that have packed all these linters in one package, allowing us to lint various codes seamlessly.

Installing SublimeLinter

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

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

Adjusting When Linting Happens

The linting process, by default, runs on the background, the process runs immediately as we are writing the codes. For more convenient experience, I suggest changing this behaviour (but if you are fine with the current setting, then skip ahead).

Head over to the Preferences > Package Setting > Sublime Linter > Setting â€" User, which opens in a new tab.

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

  {
  	"sublimelinter": "save-only"
  }
  

Linting CSS

Now, let’s try it out with our codes, starting from 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 at 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 selector as it has 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 most thinks 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, it also helps you to become a better coder on the long run.