Adding a Custom Rule to Your Appsmith ESLint Plugin

Welcome to the guide for adding a custom rule to your Appsmith ESLint plugin. Follow these steps to create and integrate a new rule into your Appsmith ESLint plugin.

You can create one by following the official ESLint custom rule.

Step 1: Create the Custom Rule File

Navigate to your Appsmith ESLint plugin directory i.e. app/client/packages/eslint-plugin.
Create a new directory for your custom rule in the root of app/client/packages/eslint-plugin directory. For example, src/custom-rule/rule.ts.
```
mkdir src/custom-rule
touch src/custom-rule/rule.ts
touch src/custom-rule/rule.test.ts
```

Open src/custom-rule/rule.ts and define your rule. Here's a basic template to get you started:

import type { TSESLint } from "@typescript-eslint/utils";

export const customRule: TSESLint.RuleModule<"useObjectKeys"> = {
  defaultOptions: [],
  meta: {
    type: "problem", // or "suggestion" or "layout"
    docs: {
      description: "A description of what the rule does",
      category: "Best Practices",
      recommended: false,
    },
    fixable: null, // or "code" if the rule can fix issues automatically
    schema: [], // JSON Schema for rule options
  },
  create(context) {
    return {
      // Define the rule's behavior here
      // e.g., "Identifier": (node) => { /* logic */ }
    };
  },
};

Step 2: Update the Plugin Index File

Open the src/index.ts file inside eslint-plugin directory.

Import your custom rule and add it to the rules object in index.ts. For example:

import { customRule } from "./custom-rule/rule";

const plugin = {
  rules: {
    "custom-rule": customRule,
  },
  configs: {
    recommended: {
      rules: {
        "@appsmith/custom-rule": "warn", // Add this in recommended if you want to add this rule by default to the repository as a recommended rule.
      },
    },
  },
};

module.exports = plugin;

Step 3: Add Tests for Your Custom Rule

Open src/custom-rule/rule.test.ts and write tests using a testing framework like Jest. Here's a basic example using ESLint's RuleTester:

import { TSESLint } from "@typescript-eslint/utils";
import { customRule } from "./rule";

const ruleTester = new TSESLint.RuleTester();

ruleTester.run("custom-rule", customRule, {
  valid: [
    // Examples of valid code
  ],
  invalid: [
    {
      code: "const foo = 1;",
      errors: [{ message: "Your custom error message" }],
    },
  ],
});

Run your tests to ensure your rule works as expected:
```
yarn run test:unit
```

Step 4: Steps to add it to client

Go to app/client/.eslintrc.base.json
Add your custom-rule entry to the rules object or if the recommended rule is present its already added in the config. e.g.
```
 "@appsmith/custom-rule": "warn"
```

Additional Resources

Happy linting!

3.3 KiB Raw Blame History