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.
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.
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.
4. Project Setup
- Create a project folder. I will name it
- Add this folder to VS Code Workspace.
- Open the terminal and run
npm init -ycommand which will create a default package.json file.
- Create a new file and name it
Your project directory should look similar to this
5. Installing stylelint package
Use npm to install
6. Create stylelint configuration file
.stylelintrc.json file in the root of your project and add below lines of code to it.
“extends” is used to extend an existing configuration that is made available, like
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! 🏡