8,222 reads

Set up CSS stylelint on Visual Studio Code [Tutorial]

by David MartínezOctober 20th, 2019

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

featured image - Set up CSS stylelint on Visual Studio Code [Tutorial]

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
      }
  }