A Look Into: SublimeLinter 3
In a previous post, we have shown you how to find potential code errors and bugs in SublimeText using SublimeLinter. Unfortunately, as one of our readers also pointed it out, it does not work in Sublime Text 3.
Sublime Text 3 introduced a new set of API on how a plugin should work, which is likely to have affected SublimeLinters abilities. The developer has since rewritten the plugin, and released the rewrite. Let’s check out SublimeLinter 3 and what it has to offer.
Recommended Reading: 12 Most-Wanted Sublime Text Tips And Tricks
The easiest way to install SublimeLinter 3 is through Package Control. However, unlike the previous version that bundles all available linters, SublimeLinter 3 separates them. This allows us to only install linters for languages that we frequently use.
This means when you made a mistake in your code, nothing will happen unless you install the linter that allows you to report the errors.
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 3 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, 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
- OSX users can install PHP in the system with
curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5command. This will install PHP 5.5, which is the latest version, at the time of the writing.
- Linux users can follow this comprehensive tutorial from DigitalOcean.
- For Windows users, you can download the installer here.
Next, we will install CSSLint. The following instruction can be followed in all three platform: OSX, Windows, and Linux.
First, install Node.js. Then, run the following command.
npm install -g csslint
We can install JSHint with Node.js too. Here is the command.
npm install -g jshint
And, we are all set. We can start linting HTML, CSS, JS, and PHP in SublimeText using SublimeLinter 3.
New Features in SublimeLinter 3
SublimeLinter 3 brings several new features, and one that I found really useful is the ability to navigate through errors quickly.
Navigate through Errors
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.
Different Mark Styles
In addition, you can also select different mark styles for the Errors. SublimeLinter 3 provides 5 styles, as shown below:
To select these style, open Command Pallete – (Mac) Command + Shift + P, (Win/Linux) Ctrl + Shift + P. Then, search and select
SublimeLinter: Choose Mark Style. Select the style of your preference.
Alternatively, you can also specify it within the Setting file. Go to Preferences > Package Settings > SublimeLinter > Setting – Users. Then, add this line below.