Set-up Sass Lint with Gulp

Linting is a great way to make sure your code is written in a particular way, this works best for teams when trying to keep their code base consistent between teams members.

In this tutorial I’m going to show you how to get set-up with linting for Sass using Gulp.

First lets install Gulp Sass Lint in your project:

npm install gulp-sass-lint --save-dev

Now lets call Sass Lint in our Gulpfile. You can use ! at the start of a file location to stop it from being linted.

Next up you need to create your .sass-lint.yml file, this is the config that the linter will use to show warnings and errors in your Sass. Create the file in the root of your project.

I’ve whipped up a good starting point for your .sass-lint.yml so you can copy and paste that into your own file. Feel free to chop and change the file so it works for your coding style.

Now head to your terminal and run gulp sass-lint and you should see the linter doing its job!

I hope that this quick tutorial of how to get Sass Linter up and running with Gulp was helpful!

You can read a little more about the config file and how Sass Lint works in the repo on Github: https://github.com/sasstools/sass-lint/tree/master

Check out similar posts for Sass linting

Use Sass Lint with Atom

Thanks for reading, I hope you liked it 🤙 I write about freelancing, front-end development and design.

You can find me on Twitter, Dribbble and Github.

Looking for a Freelance Web Designer & Front-end Developer?
Check out my work.