Linting your Sass is a great way to ensure some degree of code quality. At the very least you will have greater stylistic consistency.
One thing before we get started: be careful not to blindly follow what a linter says, though: treat linter rules as guidelines, not absolutes .
In my text editor of choice, Sublime Text 3, the best way to get linting in any language is currently using the Sublime Linter package. Once that is installed, you can install extension packages for each language you want to lint.
In my case, the main ones are Sass (as
The linting extension package that I like is SublimeLinter-contrib-scss-lint.
- To get rolling (get it??), first make sure you have Package Control up and running. When it comes to Sublime Text packages, it’s the only way to fly.
- Use package control to install Sublime Linter.
- You now have the core Sublime Linter installed, but you need extensions to make any use of it. In this case, we want “SublimeLinter-contrib-scss-lint”. Install it with Package Control as well.
- There is a step you now need to make, external to Sublime Text, to get this to work. You need to install a Ruby gem called scss-lint. The Sublime Linter extension is simply a wrapper for this gem. In your terminal client of choice enter
gem install scss_lint.
- Open a .scss file in Sublime Text, and you might start seeing icons in your gutter, like this:
If so, congratulations! Linting is working. If not you may need to turn on debug mode and find out what is going on. In my experience, uninstalling and reinstalling packages seems to do the trick.
If you have linting working, you can tell what the particular violation of the linter is by looking at the bottom of your window. The rule will be spelled out, and possibly have a recommendation.
How do you choose which rules to follow, and how to follow them? With a config file. This config file will be looked at by scss-lint when looking at your Sass. Config files can reside in the same directory as your
.scss files, in the root of your project, or in your computer’s
What probably makes the most sense is including this configuation file in the root of your project and comitting it to your repo. That way others on your project can follow the same coding standards.
Creating a config file
The easiest thing to do is to grab this example config file, and save it to your desired location as
.scss-lint.yml. You can then tweak the rules to your liking.
As an example, I like to use the SMACSS property order rule. You will need to make the PropertySortOrder look like this:
PropertySortOrder: enabled: true ignore_unspecified: false order: smacss min_properties: 2 separate_groups: false
You can look through the whole config file and tweak to your heart’s content.
On a current project, we are using ESLint – a linter that checks against ES6 best practices: