Setting Up Stylelint for SCSS and Stickler for GitHub

This is a step by step guide to guide you through the process of installing scss linter and configuring it with stickler so that it can make your work much easier when developing your scss projects.

Step1: You need to ensure you have installed NPM.

NPM is installed with node.js thus to update it you can run the following
command

npm install npm@latest -g

Step 2: Install Stylelint.

Stylelint is a modern linter for CSS that ensures a standard way of
writing CSS files. If you have not installed it you can follow this article
by Ikram that gives a detailed guide to install it.

Stylelint-scss requires stylelint to operate since it is a plugin thus it
is meant to be used with it.

Step 3: Install stylelint-scss

You can install the stylelint-scss by typing this command on your
terminal

npm install stylelint-scss

To make sure you have installed it you can open package-lock.json file and search for “stylelint-scss”

Step 4: Set up a config file in your project

Create a json file with any name. e.g.

.stylelintrc.json

Inside this file we will add stylelint to the plugin array and the rules you will use which can be customized.

Step 5: configure our stickler with stylelint-scss

Assuming that you have already installed stickler. Open the .stickler.yml file in your project

From here is where we will link the stickler file to our
plugin so that it doesn’t show errors on stickler in our GitHub pull request.

In the config you can replace it with the file name that you gave it in our case is .stylelintrc.json.

Thus this is just a simple to be up and running with your
project with limited issues. You will be able to track your scss files with
ease. Please give a like if the article is of help.