While you’re coding it’s of great importance to know what does each line of our code and which elements are being affected by it but it is also important to follow good practices, and over time this can benefit us.
When you start to learn a new programming language it’s very common to do bad practices (even if you’re not a beginner), one way to avoid that its to use a lint.
Imagine you are doing cool stuff whit CSS and while your project grows also your CSS grows and there’s more probability you can get syntax errors, duplicates, and can be a headache to find a bug.
Fortunately, there are the lints to help us!
Let’s learn how to set up and run our CSS stylelint in our VSC IDE to improve our code. Now we can forget about having to copy and paste our code on a web validator.
1. Installing stylint extension.
In this tutorial, we are going to use stylelint and we will configure it using the recommended JSON file of the official site.
Assuming you already have installed VSC (if not, install it), we are going to install the stylint extension, just search for it in VSC extensions.
2. Setup the JSON configuration file.
There are many ways to set up our lint into VSC. We are going to use the JSON configuration file. Also, you can enable the Stickler in your GitHub repo and do a check every time a push is done. You will see many lints for different lenguages are supported by stickler, there's the CSS lint documentation. :)
For this tutorial, we cover only the implementation in VSC.
So let's go ahead, I'm going to add the file in my source project folder, in this case, is a copy of the next web clone, here’s the live version and the repo.
As I say before we have many ways to set up our lint in VSC for our purposes we want to get it to work quickly, so here’s the configuration that works for me:
{
"rules": {
"at-rule-empty-line-before": [ "always", {
"except": [
"blockless-after-same-name-blockless",
"first-nested"
],
"ignore": ["after-comment"]
} ],
"at-rule-name-case": "lower",
"at-rule-name-space-after": "always-single-line",
"at-rule-semicolon-newline-after": "always",
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-newline-after": "always",
"block-closing-brace-newline-before": "always-multi-line",
"block-closing-brace-space-before": "always-single-line",
"block-opening-brace-newline-after": "always-multi-line",
"block-opening-brace-space-after": "always-single-line",
"block-opening-brace-space-before": "always",
"color-hex-case": "lower",
"color-hex-length": "short",
"comment-empty-line-before": [ "always", {
"except": ["first-nested"],
"ignore": ["stylelint-commands"]
} ],
"comment-whitespace-inside": "always",
"custom-property-empty-line-before": [ "always", {
"except": [
"after-custom-property",
"first-nested"
],
"ignore": [
"after-comment",
"inside-single-line-block"
]
} ],
"declaration-bang-space-after": "never",
"declaration-bang-space-before": "always",
"declaration-block-semicolon-newline-after": "always-multi-line",
"declaration-block-semicolon-space-after": "always-single-line",
"declaration-block-semicolon-space-before": "never",
"declaration-block-single-line-max-declarations": 1,
"declaration-block-trailing-semicolon": "always",
"declaration-colon-newline-after": "always-multi-line",
"declaration-colon-space-after": "always-single-line",
"declaration-colon-space-before": "never",
"declaration-empty-line-before": [ "always", {
"except": [
"after-declaration",
"first-nested"
],
"ignore": [
"after-comment",
"inside-single-line-block"
]
} ],
"function-comma-newline-after": "always-multi-line",
"function-comma-space-after": "always-single-line",
"function-comma-space-before": "never",
"function-max-empty-lines": 0,
"function-name-case": "lower",
"function-parentheses-newline-inside": "always-multi-line",
"function-parentheses-space-inside": "never-single-line",
"function-whitespace-after": "always",
"indentation": 2,
"length-zero-no-unit": true,
"max-empty-lines": 1,
"media-feature-colon-space-after": "always",
"media-feature-colon-space-before": "never",
"media-feature-name-case": "lower",
"media-feature-parentheses-space-inside": "never",
"media-feature-range-operator-space-after": "always",
"media-feature-range-operator-space-before": "always",
"media-query-list-comma-newline-after": "always-multi-line",
"media-query-list-comma-space-after": "always-single-line",
"media-query-list-comma-space-before": "never",
"no-eol-whitespace": true,
"no-missing-end-of-source-newline": true,
"number-leading-zero": "always",
"number-no-trailing-zeros": true,
"property-case": "lower",
"rule-empty-line-before": [ "always-multi-line", {
"except": ["first-nested"],
"ignore": ["after-comment"]
} ],
"selector-attribute-brackets-space-inside": "never",
"selector-attribute-operator-space-after": "never",
"selector-attribute-operator-space-before": "never",
"selector-combinator-space-after": "always",
"selector-combinator-space-before": "always",
"selector-descendant-combinator-no-non-space": true,
"selector-list-comma-newline-after": "always",
"selector-list-comma-space-before": "never",
"selector-max-empty-lines": 0,
"selector-pseudo-class-case": "lower",
"selector-pseudo-class-parentheses-space-inside": "never",
"selector-pseudo-element-case": "lower",
"selector-pseudo-element-colon-notation": "double",
"selector-type-case": "lower",
"unit-case": "lower",
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-space-after": "always-single-line",
"value-list-comma-space-before": "never",
"value-list-max-empty-lines": 0
}
}If you want to know more about the rules and the configuration you can check it here.
Ok so let's add a file “.stylelintrc.json” into your project folder and save it.
Now you can restart your VSC and when you write your CSS code you can see the warnings in the console :D
It's important to have the JSON file into the project folder.
So we have already CSS lint working in live on our VSC. As you can notice we have a couple of files in our directory related to CSS lint.
These files are useful to use our stickler stylint into your GitHub. I will write about how to do that soon.
Well, we are done, I hope this tutorial helps us.
Please share and comment if this was helpful for you. :)