Stylelint + VSCode = Your Code's Best Friend | CSS Linting | Streamlining Your CSS & SCSS Workflow

hey there amazing developers welcome back to our channel in our previous videos we have explored some Fantastic Tools like es lint prettier Husky and lint State all of which help us write cleaner and more organized code today we are adding another incredible tool to our web development toolkit and that is sty lint just like our previous tools sty lint is here to make our CSS Journey smoother cleaner and more enjoyable if you are ready to level up your CSS game stick around because stylent is about to become your new best friend so let's dive [Music] [Music] in so first off what is stent it is a tool that checks your CSS code for mistake and ensure you follow best practices it's like having a friendly CSS inspector that Sports errors and helps you write better more consistent CSS let me show you some common mistakes developers makes during writing CSS code so first in the source directory here I'll create new CSS file let's say file name is style. CSS now here let's add some style to div so div now let's say here we have padding left and let's say padding is 20 PX after writing some more CSS properties maybe margin Auto and then and then you add again padding 10 PX here you can clearly see that this padding property going to override this padding left left so this property doesn't make sense here sometime we accidentally add UT blogs for example we add some selector let's say test but forget to add CSS properties sometimes we add duplicate selectors for example let's say here we have added the selector paragraph tag and after writing some more Styles here we added again paragraph tag here you can see we have added this paragraph selector twice with different CSS property that doesn't look good similar like that sometimes we add CSS property twice in the same blocks for example let's say in the example selector here we add color let's say black after some more properties like font weight 500 and then again we added color let's say red see here we have added color property twice and this red going to override this black color these are the very common mistakes styl in is a wonderful tool to help us to avoid these issues so let's see how we going to use this so in the browser this is the official website of sty in and here let's click on this user guide in this user guides let's click on this get started link this page provide us with the installation instruction for styland we can initiate it in our project by running this command npm in it silent so let's run this npm init style length it is going to install this dependency so press y to install it now in the editor package.json we can see it has automatically installed style link and style link config standard and it has also created a DOT style link rc. Json configuration file and in this configuration file it extends style lint config standard this is the plug-in for style lint coming from this package which has contained recommended rules for CSS now style link installation is complete and it is ready to use in our project now let's scan and validate CSS files so in terminal we will run npx style lint and then in double codes we will provide the path where it should scan the CSS files so here I will say in the SRC directory and Then star star to scan all the files in this SRC directory and then we will say star. CSS to scan only CSS files now hit enter now here you can see it has detected these many errors in the style. CSS instead of running this command directly on Terminal I recommend adding this in the scripts section of package.json so let's add this so let's open the package.json and here in the script section you can see in the previous videos we have added these many commands now now next here I'll add style lint and then here I'll say style lint and in this single code let's provide path SRC star star to track all the files and Then star do CSS to scan only CSS files if you want to validate multiple extensions so here we can say in curly brackets CSS comma let's say SC CSS so now it going to validate all the CSS and scss files I will also add one more command want to autofix stylent errors so let's duplicate this and here I'll say stylent fix and next here I'll pass dash dash fix this command going to fix autoc correctable errors in the CSS files so let's test this so in terminal npm run style link here you can see it has four errors in the style. CSS now if I run npm run style length fix and this time we have three errors one error was autoc correctable so this command has fixed it and we have to fix these errors manually currently these errors can only be seen when running the command on Terminal in the editor we cannot see any error Flags so it would be beneficial to have error displayed within the editor for that we need to install the style link extension in vs code so here I'll click this extension icon and search for style length and we are looking for this extension which is officially by style lint so let's install this now it is installed so let's close this and navigate to style. CSS and here you will see the errors that styl L has detected the red underline on this padding unexpected shorthand padding after padding left which is coming from style lint similarly if we scroll down here we have two errors this yellow warning flag is by CSS rule set of vs code editor and the red flag error is by style lint unexpected UT block because here we are using style lint so if you want you can disable CSS validator of PS code editor for that let's open the settings so contrl comma I do not want to disable it globally so here I'll select workspace and then click this icon to open settings. Json and then here I'll say css. validate and here I'll set it false similarly we can also disable it for less and SS like this now if you go to style. CSS and you can see the yellow warning sign is gone we have one error unexpected UT block from style length similar like that here on this paragraph tag unexpected duplicate selector P first used at line S this one and right here we have added the duplicate CSS property which is auto corrected by the sty lint fix command for now let's set it again let's say color black and immediately here we get red flag unexpected duplicate color now let's close this now we have style link reporting errors in the file let's set up automatic error fixing so for that let's open vs code settings so control comma and workspace settings. Json we have disable the CSS validate and if we scroll up in the previous video on on ES link and prier tutorial we have added this configuration where on save file it is going to automatically fix es link errors similar like that in this block I will add one more configuration Source do fix all do style link and I'll set this Trio like this now go back to style. CSS and look at this here we have duplicate property color so this red color going to override this black so on save file it should remove this property so crl s and here we go the color black is removed automatically it was autoc correctable so it is resolved but other issues like this one we have to fix it manually let's fix this so here remove this we we should move this property from here to here like this and now remove this and to fix this we have to remove one of them so let's remove this one and now we do not have any errors in the style length documentation here let's click this rules link and you can see here we have this large list of rules the rules with this check signs are by default included in the sty lint config standard that we have used here sty lint config standard and the rules with this range sign are autof fixable in the styl in configuration file we can override or add more rules according to our project need for example many developers do not like to use important keyword on a CSS property because its overuse can lead to messy and hard to maintain code Stylin helps you avoid such situations so let's add a rule in the sty and configuration file to disallow the use of important keyword on a CSS property so for that here I will use the rule declaration no important this one this allow important within declarations so let's copy this Rule and in the Eder first let me format this now here I'll add rules object and here I'll add rule declaration no important and its value is going to be true now any usage of important within our CSS will trigger an error message let's see so in style. CSS let's add here important and you will see a red flag unexpected important error reported by style lint so if I remove this rule you can see error flag gone and let's add it again and now here we have error unexpected important great how cool is that let's suppose in your project you are using SAS in that case let's go to documentation get started page so for SAS you need to install sty lint config standard SS plugin for sty lint using this command and then in the configuration file you need to extend the rule by styl lint config standard says after that it will able to scan and validate SAS files you using this command similar like that if you are using Tailwind CSS in that case we need to install stylent config Tailwind CSS and then in the Stylin configuration file we need to extend stylent config Tailwind CSS and then we are ready to use the silent with Tailwind CSS so that's the end of the video I hope you enjoyed it if you found this tutorial helpful please give it a a thumbs up subscribe to our Channel and don't forget to hit the notification Bell for more coding tips and tutorials thanks for watching happy [Music] coding

Channel: QiroLab

Views: 893

Keywords: Stylelint, VSCode, CSS linting, SCSS linting, How to set up Stylelint in VSCode, Essential Stylelint rules for CSS, Best practices for CSS linting, Integrating Stylelint with other tools, Streamlining CSS workflow with VSCode, Writing clean and maintainable SCSS, frontend development, web design, CSS productivity, CSS tips and tricks

Id: 8RQfhZgmDu4

Length: 15min 51sec (951 seconds)

Published: Sat Jan 27 2024