Configuration
Configure Project Rules
Configure Project Rules using @eslint-react/kit.
This utility module is for advanced use cases where you need to build custom ESLint rules tailored to your project's specific requirements. For full documentation on the kit module, including API reference and examples, see the Kit README.
Installation
npm install --save-dev @eslint-react/kitQuick Start
Define custom rules directly in your eslint.config.ts:
import eslintJs from "@eslint/js";
import eslintReact from "@eslint-react/eslint-plugin";
import eslintReactKit, { merge } from "@eslint-react/kit";
import type { RuleDefinition } from "@eslint-react/kit";
import { defineConfig } from "eslint/config";
import tseslint from "typescript-eslint";
/** Enforce function declarations for function components. */
function functionComponentDefinition(): RuleDefinition {
return (context, { collect }) => {
const { query, visitor } = collect.components(context);
return merge(
visitor,
{
"Program:exit"(program) {
for (const { node } of query.all(program)) {
if (node.type === "FunctionDeclaration") continue;
context.report({
node,
message: "Function components must be defined with function declarations.",
});
}
},
},
);
};
}
export default defineConfig(
{
files: ["**/*.{ts,tsx}"],
extends: [
eslintJs.configs.recommended,
tseslint.configs.recommended,
eslintReact.configs["recommended-typescript"],
eslintReactKit()
.use(functionComponentDefinition)
.getConfig(),
],
},
);The rule name is derived automatically from the function name (functionComponentDefinition → function-component-definition), and registered as @eslint-react/kit/function-component-definition at "error" severity.
Resources
- AST Explorer - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing ESLint rules.
- ESLint Developer Guide - Official ESLint documentation for creating custom rules.
- Using the TypeScript Compiler API - TypeScript compiler API documentation for working with type information in custom rules.