How to Write Custom ESLint Rules for Your Project

Summary: This post explains how you can write custom ESLint rules for your project. The example included is a few custom rules for ExtJS framework based code.

While researching for a better (I was using JSHint before) and customizable JavaScript Code linting tool, I found ESLint and ever since have never looked back. ESList is modern, fast, customizable and cross-platform Node.js based static code analyser that looks for bad and problematic patterns in your JavaScript code.

Things that I love about ESLint tool:

When do you need to write a custom rule

Your project requires some custom rules that is very specific to your project annd is not covered by ESLint’s standard set of rules (259 rules currently).

Getting started with a custom rule

Writing your own rule involves the following steps: 1.

Eslint AstExplorer Image

/*
 * Enforce using view.up() or view.down() methods instead of the expensive Ext.ComponentQuery.query() method 
*/
"no-hms-ext-componentquery": {
    create: function(context) {
        return {
            CallExpression(node) {
                if (node.callee && node.callee.object && 
                        node.callee.object.object &&
                        node.callee.object.object.type === "Identifier" && 
                        node.callee.object.object.name === "Ext" &&
                        node.callee.object.property && 
                        node.callee.object.property.type === "Identifier" &&
                        node.callee.object.property.name === "ComponentQuery" &&
                        node.callee.property && 
                        node.callee.property.type === "Identifier" &&
                        node.callee.property.name === "query") {
                    context.report(node, 'Avoid using Ext.ComponentQuery.query method, use view.down or popup.down method instead.');
                }
            }
        }
    }
}

See Also