How to Effectively Use SublimeLinter in SublimeText for Better Code Quality

Linter is an indispensable tool in modern web development. It helps us identify errors and promotes best practices while coding. If you’re a SublimeText user, installing SublimeLinter is highly recommended. Over the years, SublimeLinter has evolved into a robust tool suite within SublimeText, offering official packages that integrate with linters for various programming languages.

In this tutorial, we’ll explore how to install and configure SublimeLinter. Let’s dive in!

12 Best Sublime Text Tips and Tricks

12 Best Sublime Text Tips and Tricks

You probably know by now that we are fans of Sublime Text. It might look like a very... Read more

Getting Started with SublimeLinter 4

The easiest way to install SublimeLinter 4 is through SublimeText Package Control. Since the release of SublimeLinter 3, each linter needs to be installed separately to enhance efficiency by only activating the linters that are installed.

As a developer primarily working with HTML, CSS, JavaScript, and PHP, I usually install linters for these languages. In the Package Control, I install SublimeLinter along with these plugins:

For these plugins to function, you’ll also need to install the respective linters for each language. Here are the necessary tools:

If you are using macOS, Tidy and PHP are pre-installed. You can check their versions by running these commands:

tidy --version
php --version

This will display the installed versions of Tidy and PHP, ready to use in Sublime Text.

Checking version on Terminal

If you are on Windows or Linux, or if these tools are not installed, follow the installation instructions below.

Installing HTML Tidy

To set up HTML Tidy, use these platform-specific commands:

  • On macOS: brew install homebrew/dupes/tidy
  • On Linux: sudo apt-get install tidy
  • On Windows: download the EXE installer from TidyBatchFiles.
Installing PHP CLI

Follow these instructions to install PHP CLI on different operating systems:

Installing Stylelint

Next, let’s install Stylelint, a CSS linter that helps enforce best practices in your CSS files. These instructions apply to macOS, Windows, and Linux. Ensure you’ve installed Node.js and NPM beforehand.

To install Stylelint, execute the following command:

npm install -g stylelint

You’ll also need to incorporate a Stylelint configuration file into your project directory. Additionally, consider installing a predefined config like stylelint-config-standard. Once configured, you’ll see highlighted errors as shown below.

Stylelint error highlights
Installing ESLint

We will also install ESLint, a configurable linter for JavaScript that helps enforce coding standards and identify potential errors. Ensure you have Node.js and NPM installed.

To install ESLint, run:

npm install -g eslint

Next, add the ESLint configuration to your project, or use a predefined configuration such as eslint-config-recommended.

With these tools, you’re ready to start linting HTML, CSS, JavaScript, and PHP files in SublimeText using SublimeLinter 4.

New Features in SublimeLinter 4

SublimeLinter 4 introduces several enhancements, including an error panel that displays all errors in the open files. For Mac users, press Command + Ctrl + A. Windows and Linux users can use Ctrl + K, Ctrl + A.

The hotkey reveals a list of errors, as illustrated below. Use the and keys to navigate through the list, which automatically scrolls to the error’s location.

Error panel in SublimeLinter 4

Additionally, it’s now possible to hover over an error in the gutter or directly on the line to view detailed error messages – a significant improvement over the previous version.

Error details on hover in SublimeLinter 4
Highly Configurable

SublimeLinter 4 is more customizable than ever. You can now apply custom “styles” to each linter’s configuration, setting specific icons, colors, lint modes, paths, and environment variables independently for each linter.

Custom user settings in SublimeLinter 4
Further Reference

This guide should help you get started with SublimeLinter. For more advanced topics, consider exploring the following resources: