ESLint Template Visitor

Simplify eslint rules by visiting templates

Install

npm install eslint-template-visitor

# or

yarn add eslint-template-visitor

Showcase

+const eslintTemplateVisitor = require('eslint-template-visitor');
+
+const templates = eslintTemplateVisitor();
+
+const objectVariable = templates.variable();
+const argumentsVariable = templates.spreadVariable();
+
+const substrCallTemplate = templates.template`${objectVariable}.substr(${argumentsVariable})`;

 const create = context => {
     const sourceCode = context.getSourceCode();

-	return {
-		CallExpression(node) {
-			if (node.callee.type !== 'MemberExpression'
-				|| node.callee.property.type !== 'Identifier'
-				|| node.callee.property.name !== 'substr'
-			) {
-				return;
-			}
-
-			const objectNode = node.callee.object;
+	return templates.visitor({
+		[substrCallTemplate](node) {
+			const objectNode = substrCallTemplate.context.getMatch(objectVariable);
+			const argumentNodes = substrCallTemplate.context.getMatch(argumentsVariable);

             const problem = {
                 node,
                 message: 'Prefer `String#slice()` over `String#substr()`.',
             };

-			const canFix = node.arguments.length === 0;
+			const canFix = argumentNodes.length === 0;

             if (canFix) {
                 problem.fix = fixer => fixer.replaceText(node, sourceCode.getText(objectNode) + '.slice()');
             }

             context.report(problem);
         },
-	};
+	});
 };

See examples for more.

API

eslintTemplateVisitor(options?)

Craete a template visitor.

Example:

const eslintTemplateVisitor = require('eslint-template-visitor');

const templates = eslintTemplateVisitor();

options

Type: object

parserOptions

Options for the template parser. Passed down to @babel/eslint-parser.

Example:

const templates = eslintTemplateVisitor({
    parserOptions: {
        ecmaVersion: 2018,
    },
});

templates.variable()

Create a variable to be used in a template. Such a variable can match exactly one AST node.

templates.spreadVariable()

Create a spread variable. Spread variable can match an array of AST nodes.

This is useful for matching a number of arguments in a call or a number of statements in a block.

templates.variableDeclarationVariable()

Create a variable declaration variable. Variable declaration variable can match any type of variable declaration node.

This is useful for matching any variable declaration, be it const, let or var.

Use it in place of a variable declaration keyword:

const variableDeclarationVariable = templates.variableDeclarationVariable();

const template = templates.template`() => {
    ${variableDeclarationVariable} x = y;
}`;

templates.template tag

Creates a template possibly containing variables.

Example:

const objectVariable = templates.variable();
const argumentsVariable = templates.spreadVariable();

const substrCallTemplate = templates.template`${objectVariable}.substr(${argumentsVariable})`;

const create = () => templates.visitor({
    [substrCallTemplate](node) {
        // `node` here is the matching `.substr` call (i.e. `CallExpression`)
    }
});

templates.visitor({ /* visitors */ })

Used to merge template visitors with common ESLint visitors.

Example:

const create = () => templates.visitor({
    [substrCallTemplate](node) {
        // Template visitor
    },

    FunctionDeclaration(node) {
        // Simple node type visitor
    },

    'IfStatement > BlockStatement'(node) {
        // ESLint selector visitor
    },
});

template.context

A template match context. This property is defined only within a visitor call (in other words, only when working on a matching node).

Example:

const create = () => templates.visitor({
    [substrCallTemplate](node) {
        // `substrCallTemplate.context` can be used here
    },

    FunctionDeclaration(node) {
        // `substrCallTemplate.context` is not defined here, and it does not make sense to use it here,
        // since we `substrCallTemplate` did not match an AST node.
    },
});

template.context.getMatch(variable)

Used to get a match for a variable.

Example:

const objectVariable = templates.variable();
const argumentsVariable = templates.spreadVariable();

const substrCallTemplate = templates.template`${objectVariable}.substr(${argumentsVariable})`;

const create = () => templates.visitor({
    [substrCallTemplate](node) {
        const objectNode = substrCallTemplate.context.getMatch(objectVariable);

        // For example, let's check if `objectNode` is an `Identifier`: `objectNode.type === 'Identifier'`

        const argumentNodes = substrCallTemplate.context.getMatch(argumentsVariable);

        // `Array.isArray(argumentNodes) === true`
    },
});

template.narrow(selector, targetMatchIndex = 0)

Narrow the template to a part of the AST matching the selector.

Sometimes you can not define a wanted template at the top level due to JS syntax limitations. For example, you can't have await or yield at the top level of a script.

Use a wrapper function in the template and then narrow it to a wanted AST node:

const template = templates.template`
    async () => { await 1; }
`.narrow('BlockStatement > :has(AwaitExpression)');

The template above is equivalent to this:

const template = templates.template`await 1`;

Except the latter can not be defined directly due to espree limitations.