How to lint your Sass (scss) in Sublime Text

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 .scss), JavaScript and JSON. We’re going to focus on Sass here.

The linting extension package that I like is SublimeLinter-contrib-scss-lint.

  1. 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.
  2. Use package control to install Sublime Linter.
  3. 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.
  4. 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.
  5. Open a .scss file in Sublime Text, and you might start seeing icons in your gutter, like this:

SCSS Linting Gutter Icons

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.

An scss error explained

Who’s rules?

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 /user/ directory.

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.

What about JavaScript?

The same general process applies to linting your JavaScript in Sublime text – install a SublimeLinter extension, and follow it’s external install directions.

On a current project, we are using ESLint – a linter that checks against ES6 best practices:

  • Install SublimeLinter-contrib-eslint
  • Install the node eslint pacakge – npm install -g eslint
  • In this case, though, the lint config is stored in a file called .eslintrc, which can be part of your project, or higher up in your system