paint-brush
Set up CSS stylelint on Visual Studio Code [Tutorial]by@davidmrtzdev
8,164 reads
8,164 reads

Set up CSS stylelint on Visual Studio Code [Tutorial]

by David MartínezOctober 20th, 2019
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Set up CSS stylelint on Visual Studio Code [Tutorial] # # # 4,333 reads: David Martínez, @ davomartinez-dev. Set up and run CSS style lint in our VSC IDE to improve our code. We will use the recommended JSON file of the official site to set up our lint. We are going to use the stylint extension in VSC and we will configure it using the recommended. JSON file. You can also enable the Stickler in your GitHub repo and do a check every time a push is done.

Coin Mentioned

Mention Thumbnail
featured image - Set up CSS stylelint on Visual Studio Code [Tutorial]
David Martínez HackerNoon profile picture

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. :)