Linting code using plugins

It goes without saying that linting code should be part of any developer's workflow. There are lots of different ways to achieve this, depending on the tools you use. The beauty of PostCSS is that we can easily add a suitable linting capability to our processor, using the stylelint plugin for PostCSS (available from http://stylelint.io/).

Why would we do this? Easy: we can get a single consistent result throughout. This becomes essential if you work as part of a team; instead as different team members using inconsistent settings, we can set up a central point for processing, to retain a consistent output. Moving the linting process to our central workflow means the server can do the grunt work for us, and provide a consistent result anytime for anyone running the process.

With this in mind, let's take a look at how we can set up our linting capability:

1. We start as always by installing our plugin. For this, fire up a Node.js command prompt, then change to the root of our project area.
2. At the command prompt, enter this command, followed by Enter:

   npm install stylelint
   

   If all is well, we should see this appear at the prompt:

   
3. Next up, we need to install a second plugin—there is a reporter function within stylelint that posts any messages to console (or in this case, screen). The plugin is postcss-reporter, and is available at https://github.com/postcss/postcss-reporter. We can install it thus:
   
4. With the plugins installed, we need to update our gulp file; add the following lines immediately below the last var line shown:

   var cssnano = require('cssnano');
   var stylelint = require('stylelint');
   var reporter = require('postcss-reporter');
   

5. Immediately, below the rename task in the Gulp file, add this task—this takes care of linting our code, and flagging any errors on-screen:

   gulp.task("lint-styles", function() {
     return gulp.src("src/*.css")
       .pipe(postcss([ stylelint({ 
         "rules": {
           "color-no-invalid-hex": 2,
           "declaration-colon-space-before": [2, "never"],
           "indentation": [2, 2],
           "number-leading-zero": [2, "always"]
         }
       }),
       reporter({
         clearMessages: true,
       })
     ]))
   });

6. Open a copy of example.css from the root area of our project folder and change the color to #fff1az.
7. Back in the Node.js command prompt, enter this command and press Enter:

   gulp
   

8. Gulp will begin to process our code; if all is well, it should flag a warning:
   

It shouldn't take much effort to spot that #fff1az is clearly not a valid number! Stylelint has correctly identified it, using the highlighted rule from our configuration:

    .pipe(postcss([ stylelint({ 
        "rules": {
          "color-no-invalid-hex": true,
          …
        }
      }),

Let's explore how this plugin works for a moment—the great thing about it is that there are simply dozens of rules available (which you can see at https://cdn.rawgit.com/stylelint/stylelint/1.0.0/docs/rules.md). It works by concatenating together what is being checked (in this case, color) and the check being run against it (in our case, -no-invalid-hex, or checking for invalid hex numbers). We can apply any number of rules in our configuration object, to ensure that the output is consistent for all projects.

Tip

If you would like to get a feel for how the rules can be put together, then check out the user guide at https://cdn.rawgit.com/stylelint/stylelint/1.0.0/docs/user-guide.md, with more examples of rules available at https://cdn.rawgit.com/stylelint/stylelint/1.0.0/docs/rules.md.

Okay, let's move on: we will begin to look at compiling code in more detail from the next chapter, but for now, let's take a look at how PostCSS works in more detail, and how we can begin to make the move from our existing processor to PostCSS.