Linter is an indispensible tool in modern web development. It helps us to stay in check with errors and enforce best practice when writing codes. If you’re using SublimeText, I highly recommend to install SublimeLinters. Over the years, SublimeLinters has eveolved to be a power tool suite in SublimeText and brought official packages that connect to linters of various programming languages.
In this tutorial, we’ll see how to install and setup SublimeLinter. Let’s just get started.
Recommended Reading: 12 Most-Wanted Sublime Text Tips And Tricks
The easiest way to install SublimeLinter 4 is through the SublimeText Package Control. Ever since in SublimeLinter 3, each linter must be installed separately. This allows SublimeLinter to run more efficiently by only running the linters that we’ve installed.
Since I use HTML, CSS, JS, and PHP most of the time in my projects, I would like to install linters for these languages. In the Package Control, I install SublimeLinter together with the following plugins:
For those of you who are using OSX, Tidy and PHP are pre-installed in the system. To verify, run the following two commands consecutively.
tidy --version php --version
These commands will show you the Tidy and PHP version you have. You can proceed to use them in Sublime Text.
If you are on Windows or Linux, or don’t have them installed, you can follow the instructions below.
Installing HTML Tidy
To install HTML Tidy:
- In OSX, run this command in Terminal
brew install homebrew/dupes/tidy
- In Linux, use this command
sudo apt-get install tidy.
- In Windows, you can grab the EXE installer from TidyBatchFiles.
Installing PHP CLI
Next, we will install the CSS linter called Stylelint that will allow us to check and enforce best practices in our CSS files. The following instruction can be followed in all three platform: OSX, Windows, and Linux. I presume that you’ve already installed Node.js with the NPM.
To install Stylelint, run:
npm install -g stylelint
Note that you will also need to add a Stylelint configuration file to your project directory, additionally install a predefined config like stylelint-config-standard. Once these are configured, you should find the errors highlighted as below.
To install it, run.
npm install -g eslint
We are all set. We can start linting HTML, CSS, JS, and PHP in SublimeText using SublimeLinter 4.
New Features in SublimeLinter 4
SublimeLinter 4 brings several new features, and one that’s easily noticeable is the panel that displays all the errors of the opened files. If you are in Mac, press Command + Ctrl + A. In Windows and Linux, you can press Ctrl + K, Ctrl + A.
The Hot key will show a list of errors, as shown in the following screenshot.
Use the ↑ and ↓ to navigate the list, and the page will scroll to the exact line where the error occurred.
We can now hover over the gutter in the editor or just the line where the error happen to view the error message. This was not possible in the previous version.
SublimeLinter 4 is now more configurable than ever before. For example, we can now custom “styles” to each of the linter configuration. This allows us to set icons, color, lint mode, path, and environment variables for each linter separately.
I hope that this short introduction could help get up and running with SublimeLinter. You can also refer to the reference if you’d like to more of advanced stuff.