‘onelineperfile’: a custom formatter for ESLint

‘onelineperfile’ is a new custom formatter for ESLint that, unsurprisingly, displays one line per file. Linting details are displayed whether the file passed linting or not.

 
If you use ESLint you probably already know that it comes with six formatters (a.k.a. reporters) that allow you to change the way that messages output by ESLint are reported.
Briefly, the six styles are:

Stylish (the default formatter)

eslint_stylish

Checkstyle

eslint-checkstyle

Compact

eslint_compact

JSLint-XML

eslint-jslint-xml

JUnit

eslint-junit

Tap

eslint-tap

Each of these are good for what they do but none of them are exactly what I need, which is output with:

  • One line for each file processed
  • Each line to indicate the status of the linting; success, error or warning
  • Each line to indicate the number of errors / warnings, if any
  • No error details to be displayed, I can check and fix that in the editor if needed
  • A summary line showing the total number of files processed, the number which passed linting and the number with warnings or errors

The reason for these requirements is to allow the output to be used in an audit trail, for example as the result of running a Git pre-receive hook; I should easily be able to check that a particular file was linted and it’s status.

Luckily, ESLint is very extensible so I created a new formatter — onelineperfile — which meets all of my criteria.

Here’s sample output:

eslint_onelineperfile

The easiest way to add it to your project is using NPM:


npm install --save-dev eslint-onelineperfile

You can then run it directly from the command line:


eslint --format node_modules/eslint-onelineperfile/onelineperfile.js <span class="keyword operator shell">*</span>.js

If you prefer to automate ESLint you can do so using Grunt ESLint:

  grunt.initConfig({
    eslint: {
      options: {
        format: require('eslint-onelineperfile')
      },
      target: ['*.js']
    }
});

grunt.loadNpmTasks('grunt-eslint');
grunt.registerTask('default', ['eslint']);



More:

The four Brackets extensions I use most often

 
When it comes to writing code I have no interest in using a bloated IDE or some “I do everything, but none of it particularly well” editor. I work mostly with HTML, Javascript, Node.js and need a text editor that does that job and does it without getting in my way. If I need FTP, or SSH or one of the many other tools that are useful to developers then I’d rather use the inevitably superior standalone versions, not have them cluttering up and complicating the editor. That isn’t to say that there aren’t some non-editing functions that can benefit from being integrated with the editor, just that I’d rather choose what those features are.

Unfortunately, Sublime Text is limping ever closer to an early grave, Atom is no closer to being usable (unless you enjoy swimming in a half empty swimming pool filled with treacle). End result; I switched to using Brackets as my day-to-day editor. By now, Brackets is well enough known that there’s no point in me singing it’s praises. If you still haven’t tried it then you should. Unlike the competition, it’s free, open source, multi-platform, expandable, modern and has a very low learning curve.

The beauty of Brackets is that the editor itself is written using web technologies — HTML, CSS, Javascript. This also means that anyone who knows these technologies can extend the editor with extensions. In January 2015 (the last date I can find stats for) there were 616 extensions from 371 different authors. Of course, not all of these extensions are going to be useful but many are. In no particular order, here are four extensions that I use every day:

 

Brackets Git
by Martin Zagora

This extension is both incredibly powerful and easy to use. An instantly accessible dialog gives access to most of the Git functions you’ll need day-to-day; Pull, Push, Stage, Commit and many more. The interface is clean, intuitive and unobtrusive but if you find the built-in commands aren’t enough there is one click access to a Terminal/Command window opened in the projects folder.

All of the available commands can be accessed from here.
All of the available commands can be accessed from the bottom panel
Git Diffs of changes are displayed in an editor dialog
Git Diffs of changes are displayed in an editor dialog

A particularly useful feature is that changes made since the last commit are highlighted by a coloured block in the editor gutter. Clicking this block reveals the changes and gives us the option to revert it with just one click.

Changes made since the last commit can be viewed and reverted if necessary
Changes made since the last commit can be viewed and reverted if necessary

 

Brackets ESLint
by Andrée Hansson

ESLint is by far the most most configurable and most useful Javascript linter. Install this extension and your code can be validated for adherence to your coding standards and style guidelines on each save.

Code is linted on save
Code is linted on save

 

Show Whitespace
by Dennis Kehrig

Does what it says on the label.

Whitespace Off
Whitespace Off
Whitespace On
Whitespace On

 

White Space Sanitizer
by Miguel Castillo

If you’ve recently started using JSHint, JSLintESLint or some other, lesser-known, linting tool, the chances are (depending on the strictness of the settings) that you were shocked by the number of errors or warnings your code generated. Many of these alerts will likely be the result of your excessive or perverse use of whitespace. Lines with trailing spaces or containing only spaces, mixed tabs and spaces — all common mistakes. Install White Space Sanitizer and those problems will soon be a distant memory. On every save (but before linting) your white space will be cleaned up automatically.

 

All of these extensions and many, many more can be installed directly from within Brackets using the Extension Manager or from their respective GitHub repos.


More:

Get Grunting

Grunt Logo

For many web developers, Grunt (a.k.a. “Gruntjs”) – “The Javascript Task Runner” – is an essential part of the development workflow. Through automation, tasks such as linting, minifying and unit testing become automatic and part of the edit-save-edit cycle and not chores carried out after code changes are complete.  With its huge collection of plugins, Grunt can significantly cut the time and effort required to build and maintain quality code.

Unfortunately, as the Grunt website itself points out, “While installing grunt is simple, it’s slightly more involved to get it running on your project”. Having spent numerous hours getting my first Grunt task to work, only to think “is that really all that I needed to do?”, I can certainly vouch for the accuracy of that statement. While the official documentation is constantly being improved it still suffers from taking a “too much too soon” approach, leaving the beginner confused and frustrated as he or she wades through the seemingly endless configuration options.

A simple Grunt run: This job runs in the background each time I save a change, linting, minifying and unit testing.
A typical Grunt run: This job runs in the background each time I save a change and lints, minifies and unit tests.

Thankfully there are a number of great articles out there that strip away the complexity and explain just enough to get the new Grunt-er on the right path. Below I’ve listed six tutorials that I found especially useful when getting started with Grunt. Naturally, there is some overlap in their content but they are all concise enough to read and assimilate quickly and each contributes something valuable.

As you’d expect, these are introductory tutorials and don’t cover all aspects of Grunt. As I was specifically interested in using Grunt to run jsLint, UglifyJS for minification and Karma/Jasmine for testing they tend to reflect that.

More: