Stylelint, SCSS, and Visual Studio Code.

Stylelint is an unopinionated modern stylesheet linter, meaning we can customize it to our exact needs. Stylelint can parse CSS-like syntaxes like LESS, SASS/SCSS, and SugarSS. You can explore more about its features and usage at stylelint.io.

In this article, we will learn how to properly configure stylelint for SCSS so that errors in your .scss files are exposed right into your VS Code – Problems Panel. First, we will install the vscode-stylelint extension in VS Code editor and then we would configure stylelint within a project directory.

Setup for VS Code

1. Install vscode-stylelint

You can directly search for vscode-stylelint in VS Code – Extensions tab and install the extension. Otherwise, go to this link and click the Install button which would prompt you about “Visual Studio Code is required…”, click Continue.

VS Code will start with the Extensions tab similar to the below screenshot. Click Install.

2. Turn off other validators

To prevent the built-in CSS, LESS & SCSS linters from reporting essentially the same errors as stylelint would, it’s imperative we disable these linters. Open the VS Code settings.json file (open Command Palette and type settings.json and click Open Settings (JSON) to open the JSON file) and add the below lines of code at the very end of this file.

"css.validate": false,
"less.validate": false,
"scss.validate": false

Save the settings.json file and close it.

3. Config Basedir for vscode-stylelint extension

The vscode-stylelint Basedir is a path to the directory where “extends” and “plugins” of stylelint are located. We will set its value to point the global node_modules folder. First, let’s figure out where exactly the global node_modules folder is located on your OS. Open your terminal and type npm root -g

This command will return a relative path of the global node_modules folder on your OS. The output would be similar to the below snippet, depending on which operating system you are currently working on.

/usr/local/lib/node_modules # macOS/Ubuntu

C:\Program Files\nodejs\node_modules # Windows

# NOTE:: Results could vary as per installation of Node.js

Copy the relative path from your terminal. Then perform the following steps in order.

Open VS Code Settings Tab by (cmd + , or ctrl + ,)
1. Search stylelint in the top search bar.
2. Click stylelint under Extensions
3. Paste node_modules relative path in Stylelint: Config Basedir

If you noticed the Sync: Ignored icon for this setting, is because its value will differ as per OS. Therefore it’s recommended to turn off Sync for this setting in particular. By far we have simply installed the vscode-stylelint extension for Visual Studio Code and configured few required settings. We will now set up a basic project directory and install stylelint using npm and create a configuration file.

Stylelint Configuration

4. Project Setup

Create a project folder. I will name it stylelint (customName).
Add this folder to VS Code Workspace.
Open the terminal and run npm init -y command which will create a default package.json file.
Create a new file and name it index.scss.

Your project directory should look similar to this

stylelint
|- index.scss
|- package.json

5. Installing stylelint package

Use npm to install stylelint and stylelint-config-sass-guidelines globally.

npm i -g stylelint stylelint-config-sass-guidelines

6. Create stylelint configuration file

Create a .stylelintrc.json file in the root of your project and add below lines of code to it.

{
  "extends": "stylelint-config-sass-guidelines"
}

“extends” is used to extend an existing configuration that is made available, like stylelint-config-recommended, stylelint-config-standard. Similarly, stylelint-config-sass-guidelines is a config to work with SCSS code.

NOTE: Every time you edit the .stylelintrc.json file, make sure to reload Visual Studio Code, otherwise, you won’t be able to see the changes.
VS Code Tip

It all set up! To check, open the index.scss file, and write some SCSS in it. Make some errors 😅 and stylelint will point out those errors or recommendation right up to you Problems Panel.

This is it. It’s how we perfectly configure vscode-stylelint with Visual Studio Code and use the stylelint npm package with SCSS files in your project. Hope you successfully managed to work this out. For any questions feel free to comment below and don’t forget to share this article with fellow developers.

See you in the next post. Till then stay home, stay safe! 🏡