Stylelint Tutorial – CSS Linter for VSCode


hello and welcome to red stapler channel
in this video I’m going to show you how to install stylelint Visual Studio code
extension and set up linter rules to lint your CSS or SCSS let’s check it out so first let’s start with installing the
extension head to the extension menu and search for stylelint then click install once the install has finished click
reload now you’ll see that there’s nothing on a
console right now this because stylelint is an unopinionated linter and have all
the detection rules turned off by default you will have to create a configuration
file and turn on each rule by yourself here’s the list of the rules that you
can turn on for example if you want to limit the maximum number of the class
selector to two you can set the selector-max-class to two in a configuration file now there are a couple ways to
load a config file to the stylelint the first one I’m going to show you is to
place it directly into vs code setting like this you also want to disable the vscode
default validator to prevent a duplicate warning with stylelint next I will close and reopen the Visual
Studio code to reload the extension now let’s try adding more than two class
selector in a CSS file you see that the stylelint has detected the rules breaker and show it on a console now if you are working on a project and
want to share the customized rules I recommend you to create a configuration
file instead of loading directly to the vscode if you are working on a node
application you can add a stylelint property into package.json like this but if you are not using node another
way to load a configuration file is to create a stylelintrc file into the
project folder and the stylelint will automatically detect it
at this point you might wonder if there are any preset rules so you don’t have
to manually turn on each one well the answer is yes there is a stylelint
recommended setting for you on github the link is available on the stylelint
documentation page just head there and copy the setting in index.js and paste
it on yours so that’s it hope you guys enjoyed this
video like subscribe or follow us on Facebook to stay tuned for the next
upload thanks for watching and see you next time bye

Add a Comment

Your email address will not be published. Required fields are marked *