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
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.
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:
- For macOS:
curl -s http://php-macOS.liip.ch/install.sh | bash -s 5.5to install PHP 5.5. - For Linux: refer to this comprehensive tutorial from DigitalOcean.
- For Windows: download the installer from here.
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.
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.
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.
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.
Further Reference
This guide should help you get started with SublimeLinter. For more advanced topics, consider exploring the following resources: