Adding a new lint rule

Resources

Intro

The best way to do this is to jump onto AST Explorer and set babel-eslint for the Parser and use ESLint for the transform.

Add the following in:

import AnotherPackage from 'ratchet';
import _ from 'lodash';
import LastPackage from 'last-package';
const _ = require('lodash');
copy

The replace function

With the above code, let's block Lodash from being used:

export default function(context) {
  return {
    ImportDeclaration(node) {
      if (node.source.value === 'lodash') {
        context.report({
          node,
          message: 'Do not use Lodash',
          fix: function(fixer) {
            return fixer.replaceText(node, '');
          },
        });
      }
    },
    CallExpression(node) {
      if (
        node.callee.name === 'require' &&
        node.arguments.some(arg => arg.value === 'lodash')
      ) {
        context.report({
          node,
          message: 'Do not use Lodash',
          fix: function(fixer) {
            // node.parent.parent to replace the entire line
            return fixer.replaceText(node.parent.parent, '');
          },
        });
      }
    },
  };
}
copy

Within the actual rule package

mkdir eslint-plugin-no-lodash
cd eslint-plugin-no-lodash
yarn init -y
mkdir lib lib/rules
touch index.js lib/rules/no-lodash.js
copy

Make sure package.json has the following:

{
  "name": "eslint-plugin-no-lodash",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
copy

Inside of index.js:

const noLodash = require('./lib/rules/no-lodash');

module.exports = {
  rules: {
    'no-lodash': noLodash,
  },
};
copy

Inside of lib/rules/no-lodash.js:

/**
 * @fileoverview Rule to disallow Lodash
 * @author Dennis O'Keeffe
 */

'use strict';

//------------------------------------------------------------------------------
// Rule Definition
//------------------------------------------------------------------------------

module.exports = {
  meta: {
    type: 'suggestion',

    docs: {
      description: 'disallow Lodash',
      category: 'Possible Errors',
      recommended: true,
    },
    fixable: 'code',
    schema: [], // no options
  },
  create: function(context) {
    return {
      ImportDeclaration(node) {
        if (node.source.value === 'lodash') {
          context.report({
            node,
            message: 'Do not use Lodash',
            fix: function(fixer) {
              return fixer.replaceText(node, '');
            },
          });
        }
      },
      CallExpression(node) {
        if (
          node.callee.name === 'require' &&
          node.arguments.some(arg => arg.value === 'lodash')
        ) {
          context.report({
            node,
            message: 'Do not use Lodash',
            fix: function(fixer) {
              // node.parent.parent to replace the entire line
              return fixer.replaceText(node.parent.parent, '');
            },
          });
        }
      },
    };
  },
};
copy

Adding to CRA

In a CRA app, add .eslintrc and add the following:

{
  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "no-lodash/no-lodash": "warn"
    },
    "plugins": ["no-lodash"]
  }
}
copy

Finally, to test the rule add import _ from 'lodash' into src/app.jsx.

Run EXTEND_ESLINT=true yarn start.