Adding ESLint with gulp.js

By  on  

I've noticed that I am a loose coder on my personal projects but want some level of decorum on Mozilla and other open source projects.  The more developers you have contributing to a project, the tighter the ship you must keep.  The easiest way to do that is requiring contributions to meet a certain code convention criteria via a tool like ESLint.  Since I like to use gulp.js for my build process, I thought I'd share a very basic use of ESLint for your project.

You start by adding ESLint to your package.json file or installing via NPM manually:

npm install gulp-eslint

With ESLint available somewhere within the node path, you can set up a lint task within your gulpfile.js:

gulp.task('lint', function() {
  return gulp.src('lib/**').pipe(eslint({
    'rules':{
        'quotes': [1, 'single'],
        'semi': [1, 'always']
    }
  }))
  .pipe(eslint.format())
  // Brick on failure to be super strict
  .pipe(eslint.failOnError());
});

You can get a full list of rules and possible values here.  How strict you want to be depends on your general philosophy within JavaScript.  Many people make lint a part of their test task as well so that travis-ci can reject code that isn't up to snuff.

Now that I've written this post, I'll probably take the time to add ESLint to my personal projects so that I can get in the habit of always coding to a certain standard.  Practice makes perfect!

Recent Features

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3

    Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy. The XHTML A normal table. The cells...

  • By
    Multiple Background CSS Animations

    CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements.  I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes...with...

Discussion

  1. Bradley

    One thing you’d likely want to handle differently is putting your linting rules in the root directory of your project in a file named .eslintrc. Then it’s won’t bloat up your gulpfile if you have lots of rules, stays in your git repos, etc.

    There’s also a .eslintignore to specify directories and files to avoid for linting, for node_modules for example.

  2. I can recommend using lints as Editor/Ide plugins.
    It may be annoying (errors and warning pop up while you write) but on the other hand it helps to learn the style.

    Atom has quite collection of various lints: https://atom.io/users/AtomLinter

  3. nathan

    gulp-eslint has not been updated for a while and still uses ESLint 6 instead of ESLint 8, missing a lot of new features. I would recommend using an alternative that is actively maintained like gulp-eslint-new, or simply running ESLint as an npm task.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!