How to Lint SCSS files?

[bradonomics]

I have found various tutorials around the web for how to lint SCSS files. None of them are working for me. I am unable to get an error notification when I e.g. remove a closing bracket. Do you know of any good tutorials for this?

[Orlmente]

Hi,
take a look at SublimeLinter for general linting, and, for scss specific linting I’d suggest Stylelint.

[bradonomics]

I’ve looked through the docs and tried various tutorials, but still can’t get linting to work. Do you know of any tutorials I should read?

[Orlmente]

The only tutorial I followed was the styelint getting started.
I’ll try to summarize the passages I’ve done to make it work.

Prerequisites:

• node.js & npm installed and running on your machine

Steps:

1. open your project in ST
2. open your project folder in any terminal/command prompt you use
3. run npm init
4. run npm install postcss stylelint stylelint-config-standard
5. create a file .stylelintrc in you project folder with following content

    {
       "extends": "stylelint-config-standard"
    }

6. optionally add your specific linting rules to tweak the output. (here you find all stylelint rules)

At this point you should have stylelint running.

[bradonomics]

The NPM packages installed without error. I changed my .sass-lint.yml file to .stylelintrc and added extends: 'stylelint-config-standard'. Opened a .scss file and removed a bracket. I closed Sublime and reopened. No linting errors.

[rwols]

Any hints in the console? Exceptions or failing plugins?

Click on View > Show Console

[bradonomics]

Ah, yes, there are errors in there.

[2020-11-03 08:20:13,292 - WARNING - SublimeLinter.lint.linter] sass cannot locate ‘sass-lint’
Please refer to the readme of this plugin and our troubleshooting guide: http://www.sublimelinter.com/en/stable/troubleshooting.html

I went to the troubleshooting guide linked in the error and read this:

To enable this mode, set "debug" to true in your SublimeLinter settings.

I turned on debug mode, made some edits in a SCSS file, and got this:

[2020-11-03 08:26:53,794 - INFO - SublimeLinter.lint.linter] sass: Checking lint mode ‘background’ vs lint reason ‘on_modified’. Ok.
SublimeLinter: #7 linter.py:1105 sass: linting ‘_breadcrumbs.scss’
[2020-11-03 08:26:53,816 - INFO - SublimeLinter.lint.linter] sass: linting ‘_breadcrumbs.scss’
SublimeLinter: #7 node_linter.py:85 Searching executable for ‘sass-lint’ starting at ‘/_sass/components’.
[2020-11-03 08:26:53,818 - INFO - SublimeLinter.lint.base_linter.node_linter] Searching executable for ‘sass-lint’ starting at ‘/_sass/components’.

There is also a note in the docs to “run the program from the command line,” but no instructions on how to do this.

[rwols]

Sometimes you have to dive into the code a bit. That warning message about sass-lint is here: https://github.com/SublimeLinter/SublimeLinter/blob/75559cc057b90cfea80a3dc00cfd80fe37ed016f/lint/linter.py#L834

The SublimeLinter-stylelint package doesn’t seem to use that executable though: https://github.com/SublimeLinter/SublimeLinter-stylelint/blob/master/linter.py#L11

Are you sure you have SublimeLinter-stylelint installed?

Make sure your executables can be found in your $PATH. http://www.sublimelinter.com/en/stable/troubleshooting.html#debugging-path-problems

[rwols]

To check whether your path is setup correctly you can run the following from the ST console:

import os; os.environ["PATH"]

To check whether an executable can be found by e.g. SublimeLinter or other plugins run the following:

import shutil; shutil.which("stylelint");

[rwols]

More info about setting up your $PATH correctly can be found here: https://lsp.readthedocs.io/en/latest/troubleshooting/#2-lsp-cannot-find-my-language-server-no-such-file-or-directory-xyz

[bradonomics]

The issue of linting SCSS is now solved. Thank you Raoul. The issue was that I did not have SublimeLinter-stylelint installed. I never saw instructions saying I need that.

For posterity, it might be good to include instructions for how to find the Sublime Text console. I searched the googles and could not find instructions.