Custom Neutrino Linting

By  on  
Neutrino

Last week my friend Eli Perelman shared Modern JavaScript Apps with Neutrino, an awesome new Node.js tool for creating amazing apps with minimal fuss.  No need to learn webpack, scour babel plugins, or search for what exactly is required to get a React.js app up and running -- just install Neutrino and go!  I've been super impressed with Eli's work and the ease of development for customization.

One important customization for me was the ability to modify default linting rules and running the lint routine from command line when I wanted to.  Neutrino does provide a default ESLint rule set, and does lint while you modify your code, but testing if linting passes within CI is also important.  Let's look at how we can create custom linting rules with our own custom preset!

Step 1:  Creating a Preset

Presets allow you to customize elements of your Neutrino app, like ESLint rules, Babel plugins, pathing, and other app-wide global configuration.  Let me first show you the code for custom linting rules and then I'll explain what's going on:

const lint = require('neutrino-lint-base');
const merge = require('deepmerge');

module.exports = neutrino => {
  // Implement custom linting
  lint(neutrino);
  neutrino.config.module
    .rule('lint')
    .loader('eslint', props => merge(props, {
      options: {
        globals: ['describe', 'expect', 'jest', 'test', 'document', 'window', 'fetch'],
        rules: {
          // Don't require () for single argument arrow functions
          'arrow-parens': 'off',
          // Don't require trailing commas
          'comma-dangle': 'off',
          // Don't require file extensions on imports
          'import/extensions': 'off',
          // Don't mark as unresolved without extensions
          'import/no-unresolved': 'off',
          // Don't let ESLint tell us how to use whitespace for imports
          'padded-blocks': 'off',
          // Hold off on propTypes for now
          'react/prop-types': 'off'
        },
        baseConfig: {
          extends: ['airbnb-base', 'plugin:react/recommended']
        }
      }
    }))
};

Sending neutrino into lint preps the Neutrino app for linting.  Next we use merge to deep merge the custom linting config with our own rules:

  1. Extend airbnb-base linting rules with are a very popular set of ES6 guidelines
  2. Extend recommended React.js linting guidelines
  3. Specify which globals we'll allow when linting
  4. Set values for very specific ESLint rules we do or don't want to enforce

Of course the rules I've customized above are completely my preference; you don't need to extend any existing ESLint libraries (like I did with airbnb and React) and you can enforce whichever rules you'd like.

Step 2:  .eslintrc.js

If you want to run linting from the command line at any time (in the case of CI or a post-commit hook, for example), you will need to create a .eslintrc.js file to kick off the linting:

const Neutrino = require('neutrino');
const pkg = require('./package.json');
const api = new Neutrino(pkg.config.presets);

module.exports = api.custom.eslintrc();

.eslintrc.js creates a Neutrino instance with presets defined in package.json (we'll get to that in the next section) and exposes a eslintrc() function that runs the lint routine.

Step 3:  Modify package.json

With the preset created with your custom linting rules in mind, a few changes to package.json must be made.  The first is adding this custom preset file to the config.presets array:

"config": {
  "presets": [
    "neutrino-preset-react",
    "conduit-preset.js"
  ]
},

Next we'll need to add Neutrino's airbnb preset to our dependency list:

yarn add neutrino-preset-airbnb-base -dev

Lastly we'll add a lint key to scripts so that we can run linting from command line:

"scripts": {
  "lint": "./node_modules/eslint/bin/eslint.js --ext .js,.jsx src/ test/",
}

Now we can run the following from command line:

yarn lint

Also note that the custom linting rule are applied to both the manual lint command as well as during webpack's live reload and linting routine!

I love Neutrino because it requires minimal configuration to get up and running but custom configuration is easy when you need to.  Keep an eye on Neutrino moving forward because development is shipping quickly and the community is rallying behind this amazing project!

Recent Features

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Sliding Labels Using MooTools

    A week back I saw a great effect created by CSSKarma: input labels being animated horizontally. The idea is everything positive: elegant, practical, unobtrusive, and requires very little jQuery code. Luckily the effect doesn't require much MooTools code either! The HTML A...

Discussion

  1. Peter Galiba

    Why do you need deepmerge in Step 1?

    • deepmerge merges the existing config with your new config.

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