@adyen/eslint-plugin-bento 2.14.0 → 2.16.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 2.16.0 (2026-06-09)
+
+### Features
+
+- added eslint rule readme to mcp `get-deprecations` tool ([44b9ce380](https://github.com/Adyen/bento/commit/44b9ce380))
+
+### ❤️ Thank You
+
+- erice
+
+
+## 2.15.0 (2026-06-03)
+
+### Bug Fixes
+
+- fixed `deprecation-components-input-emit` error message wording ([5a22428fa](https://github.com/Adyen/bento/commit/5a22428fa))
+- updated `deprecation-components-error-prop` rule from fix to suggest ([edcf472fd](https://github.com/Adyen/bento/commit/edcf472fd))
+- updated `deprecation-components-has-error-prop` rule from fix to suggest ([f573b3643](https://github.com/Adyen/bento/commit/f573b3643))
+- updated `deprecation-bento-timeline-item-variant-prop` to replace values correctly ([989c92838](https://github.com/Adyen/bento/commit/989c92838))
+
+### Code Refactoring
+
+- extended `deprecation-components-input-emit` error message with race conditions example ([4030de20f](https://github.com/Adyen/bento/commit/4030de20f))
+
+### ❤️ Thank You
+
+- daver
+- erice
+- gerald
+
+
 ## 2.14.0 (2026-05-27)
 
 This was a version bump only for eslint to align it with other projects, there were no code changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/eslint-plugin-bento",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "description": "Adyen Bento ESLint rules",
   "main": "index.js",
   "files": [

package/rules/deprecation-bento-timeline-item-variant-prop/README.md

@@ -2,20 +2,28 @@
 
 ## Description
 
-The `variant` prop in the following components is deprecated:
+The `variant` prop in `bento-timeline-item` is deprecated. Use `status` instead.
 
-- `bento-timeline-item`
+The `variant` prop accepted `BentoTimelineItemVariant` enum values (icon names), while `status` accepts color strings.
+The autofix remaps values automatically:
 
-Please use `status` instead.
+| `variant` value                 | `status` value |
+| ------------------------------- | -------------- |
+| `SquareSmallIcon` / `DEFAULT`   | `black`        |
+| `CheckedCircleIcon` / `SUCCESS` | `green`        |
+| `CrossCircleIcon` / `CRITICAL`  | `red`          |
+
+> **Note:** If the variant value cannot be statically resolved (e.g. a variable reference), the autofix is skipped and
+> only the deprecation warning is reported.
 
 ## Rule Details
 
-This rule reports usages of the deprecated item.
+This rule reports usages of the deprecated `variant` prop and autofixes it to `status` with the correct color value.
 
 ### ❌ Incorrect
 
 ```html
-<bento-timeline-item variant="SUCCESS" /> <bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" />
+<bento-timeline-item variant="CheckedCircleIcon" /> <bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" />
 ```
 
 ### ✅ Correct

package/rules/deprecation-bento-timeline-item-variant-prop/__tests__/deprecation-bento-timeline-item-variant-prop.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
-        <bento-timeline-item variant="SUCCESS" />
+        <bento-timeline-item variant="CheckedCircleIcon" />
         <bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" />
-        <bento-timeline-item :variant="BentoTimelineItemVariant.SUCCESS" />
+        <bento-timeline-item :variant="BentoTimelineItemVariant.DEFAULT" />
     </div>
 </template>
 

package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.integration.test.ts

@@ -8,8 +8,12 @@ describe('@adyen/bento/deprecation-bento-timeline-item-variant-prop', () => {
         // Load the test file generated alongside this one
         const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-bento-timeline-item-variant-prop.vue');
 
+        // Strip any non-JSON preamble (e.g. pnpm warnings)
+        const rawOutput = execFileSyncEslintVueFiles(eslintrc, vueFile);
+        const jsonStart = rawOutput.indexOf('[');
+
         // Execute the linter
-        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+        const result = JSON.parse(jsonStart >= 0 ? rawOutput.slice(jsonStart) : rawOutput);
 
         // 3 examples: static, shorthand, longhand
         expect(result[0].warningCount).toBe(3);
@@ -24,7 +28,7 @@ describe('@adyen/bento/deprecation-bento-timeline-item-variant-prop', () => {
             message: `The "variant" prop is deprecated. Please use "status" instead.`,
 
             fix: expect.objectContaining({
-                text: expect.stringContaining('status'),
+                text: expect.stringContaining('status='),
             }),
         });
     });

package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.js

@@ -7,6 +7,47 @@
 
 const VueUtils = require('eslint-plugin-vue/lib/utils');
 
+// Maps BentoTimelineItemVariant enum values (runtime strings) to status colors
+const VARIANT_VALUE_TO_STATUS = {
+    SquareSmallIcon: 'black',
+    CheckedCircleIcon: 'green',
+    CrossCircleIcon: 'red',
+};
+
+// Maps BentoTimelineItemVariant enum member names to status colors
+const VARIANT_ENUM_KEY_TO_STATUS = {
+    DEFAULT: 'black',
+    SUCCESS: 'green',
+    CRITICAL: 'red',
+};
+
+/**
+ * Resolves a dynamic expression to a status color string.
+ * Returns null if the expression cannot be statically resolved.
+ */
+function resolveExpressionToStatus(expression) {
+    if (!expression) {
+        return null;
+    }
+
+    // String literal: :variant="'CheckedCircleIcon'"
+    if (expression.type === 'Literal' && typeof expression.value === 'string') {
+        return VARIANT_VALUE_TO_STATUS[expression.value] ?? null;
+    }
+
+    // Enum member: :variant="BentoTimelineItemVariant.SUCCESS"
+    if (
+        expression.type === 'MemberExpression' &&
+        expression.object?.type === 'Identifier' &&
+        expression.object.name === 'BentoTimelineItemVariant' &&
+        expression.property?.type === 'Identifier'
+    ) {
+        return VARIANT_ENUM_KEY_TO_STATUS[expression.property.name] ?? null;
+    }
+
+    return null;
+}
+
 /** @type {RuleModule} */
 module.exports = {
     meta: {
@@ -44,33 +85,41 @@ module.exports = {
         /* PROP DEPRECATION                                 */
         /* ------------------------------------------------ */
         return VueUtils.defineTemplateBodyVisitor(context, {
-            // 1. STATIC: value="foo"
+            // 1. STATIC: variant="CheckedCircleIcon"
             [`VElement:matches([name="bento-timeline-item"], [name="BentoTimelineItem"]) > VStartTag > VAttribute[directive=false][key.name="variant"]`](
                 node
             ) {
+                const staticValue = node.value?.value;
+                const mappedStatus = staticValue ? VARIANT_VALUE_TO_STATUS[staticValue] : null;
+
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    ...(autofix && {
-                        fix(fixer) {
-                            return fixer.replaceText(node.key, 'status');
-                        },
-                    }),
+                    ...(autofix &&
+                        mappedStatus && {
+                            fix(fixer) {
+                                return fixer.replaceText(node, `status="${mappedStatus}"`);
+                            },
+                        }),
                 });
             },
 
-            // 2. DYNAMIC: :value="foo" or v-bind:value="foo"
+            // 2. DYNAMIC: :variant="BentoTimelineItemVariant.SUCCESS" or v-bind:variant="..."
             [`VElement:matches([name="bento-timeline-item"], [name="BentoTimelineItem"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="variant"]`](
                 node
             ) {
+                const expression = node.value?.expression;
+                const mappedStatus = resolveExpressionToStatus(expression);
+
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    ...(autofix && {
-                        fix(fixer) {
-                            return fixer.replaceText(node.key.argument, 'status');
-                        },
-                    }),
+                    ...(autofix &&
+                        mappedStatus && {
+                            fix(fixer) {
+                                return fixer.replaceText(node, `status="${mappedStatus}"`);
+                            },
+                        }),
                 });
             },
         });

package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.test.ts

@@ -18,20 +18,21 @@ describe('@adyen/bento/deprecation-bento-timeline-item-variant-prop', () => {
     ruleTester.run('deprecation-bento-timeline-item-variant-prop', deprecationBentoTimelineItemVariantProp, {
         valid: [
             {
-                name: 'Valid usage for bento-timeline-item',
+                name: 'Valid usage with status prop',
                 filename: 'test.vue',
                 code: `
                 <template>
-                    <bento-timeline-item status="val" />
+                    <bento-timeline-item status="green" />
                 </template>
                 `,
             },
         ],
         invalid: [
+            // No autofix when disabled
             {
                 name: 'Invalid: autofix disabled (explicit false)',
                 filename: 'test.vue',
-                code: `<template><bento-timeline-item variant="val" /></template>`,
+                code: `<template><bento-timeline-item variant="CheckedCircleIcon" /></template>`,
                 output: null,
                 options: [{ autofix: false }],
                 errors: [{ messageId: 'deprecation' }],
@@ -39,25 +40,99 @@ describe('@adyen/bento/deprecation-bento-timeline-item-variant-prop', () => {
             {
                 name: 'Invalid: autofix disabled (no options)',
                 filename: 'test.vue',
-                code: `<template><bento-timeline-item :variant="val" /></template>`,
+                code: `<template><bento-timeline-item :variant="BentoTimelineItemVariant.SUCCESS" /></template>`,
                 output: null,
                 errors: [{ messageId: 'deprecation' }],
             },
-            // bento-timeline-item: Static
+
+            // Static values — remaps enum value strings to colors
             {
-                name: 'Invalid: Static prop on bento-timeline-item',
+                name: 'Invalid: Static variant="SquareSmallIcon" → status="black"',
                 filename: 'test.vue',
-                code: `<template><bento-timeline-item variant="val" /></template>`,
-                output: `<template><bento-timeline-item status="val" /></template>`,
+                code: `<template><bento-timeline-item variant="SquareSmallIcon" /></template>`,
+                output: `<template><bento-timeline-item status="black" /></template>`,
                 options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },
-            // bento-timeline-item: Shorthand
             {
-                name: 'Invalid: Dynamic prop on bento-timeline-item',
+                name: 'Invalid: Static variant="CheckedCircleIcon" → status="green"',
                 filename: 'test.vue',
-                code: `<template><bento-timeline-item :variant="val" /></template>`,
-                output: `<template><bento-timeline-item :status="val" /></template>`,
+                code: `<template><bento-timeline-item variant="CheckedCircleIcon" /></template>`,
+                output: `<template><bento-timeline-item status="green" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Static variant="CrossCircleIcon" → status="red"',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item variant="CrossCircleIcon" /></template>`,
+                output: `<template><bento-timeline-item status="red" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+
+            // Static with unknown value — no fix applied
+            {
+                name: 'Invalid: Static variant with unknown value does not autofix',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item variant="unknownValue" /></template>`,
+                output: null,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+
+            // Dynamic with enum member expression — remaps enum key to color
+            {
+                name: 'Invalid: Dynamic :variant="BentoTimelineItemVariant.DEFAULT" → status="black"',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="BentoTimelineItemVariant.DEFAULT" /></template>`,
+                output: `<template><bento-timeline-item status="black" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Dynamic :variant="BentoTimelineItemVariant.SUCCESS" → status="green"',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="BentoTimelineItemVariant.SUCCESS" /></template>`,
+                output: `<template><bento-timeline-item status="green" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Dynamic :variant="BentoTimelineItemVariant.CRITICAL" → status="red"',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" /></template>`,
+                output: `<template><bento-timeline-item status="red" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+
+            // Dynamic with string literal — remaps value to color
+            {
+                name: 'Invalid: Dynamic :variant="\'CheckedCircleIcon\'" → status="green"',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="'CheckedCircleIcon'" /></template>`,
+                output: `<template><bento-timeline-item status="green" /></template>`,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+
+            // Dynamic with unknown expression — no fix applied
+            {
+                name: 'Invalid: Dynamic :variant with unknown expression does not autofix',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="computedVariant" /></template>`,
+                output: null,
+                options: [{ autofix: true }],
+                errors: [{ messageId: 'deprecation' }],
+            },
+
+            // Dynamic with non-BentoTimelineItemVariant enum — no fix applied
+            {
+                name: 'Invalid: Dynamic :variant with unrelated enum does not autofix',
+                filename: 'test.vue',
+                code: `<template><bento-timeline-item :variant="customStatus.SUCCESS" /></template>`,
+                output: null,
                 options: [{ autofix: true }],
                 errors: [{ messageId: 'deprecation' }],
             },

package/rules/deprecation-components-error-prop/README.md

@@ -10,34 +10,170 @@ The `error` prop in the following components is deprecated:
 
 Please use `error-message` instead.
 
+> **Note:** The `error` prop is a `boolean` that only toggles error styling, while `error-message` is a `string` that
+> both displays a message and applies error styling. A direct rename is not type-safe — you must also update the bound
+> value from a boolean to an error message string.
+
+| Deprecated prop | Replacement prop | Type change          |
+| --------------- | ---------------- | -------------------- |
+| `error`         | `error-message`  | `boolean` → `string` |
+
 ## Rule Details
 
-This rule reports usages of the deprecated item.
+This rule reports usages of the deprecated `error` prop and provides an IDE suggestion (not an autofix) to rename it.
 
 ### ❌ Incorrect
 
 ```html
-<bento-dropdown error="value" /> <bento-dropdown :error="value" />
+<!-- Static boolean -->
+<bento-dropdown :error="true" :items="items" label="Country" />
+
+<!-- Dynamic binding -->
+<bento-dropdown :error="hasError" :items="items" label="Country" />
 ```
 
 ```html
-<bento-input-field error="value" /> <bento-input-field :error="value" />
+<bento-input-field :error="true" label="Email" />
+
+<bento-input-field :error="hasError" label="Email" />
 ```
 
 ```html
-<bento-input-field-phone-number error="value" /> <bento-input-field-phone-number :error="value" />
+<bento-input-field-phone-number :error="true" label="Phone number" />
+
+<bento-input-field-phone-number :error="hasError" label="Phone number" />
 ```
 
 ### ✅ Correct
 
 ```html
-<bento-dropdown error-message="value" />
+<!-- Static error message -->
+<bento-dropdown error-message="Please select a country" :items="items" label="Country" />
+
+<!-- Dynamic error message driven by validation -->
+<bento-dropdown :error-message="errorMessage" :items="items" label="Country" />
+```
+
+```html
+<bento-input-field error-message="Enter a valid email address" label="Email" />
+
+<bento-input-field :error-message="errorMessage" label="Email" />
+```
+
+```html
+<bento-input-field-phone-number error-message="Enter a valid phone number" label="Phone number" />
+
+<bento-input-field-phone-number :error-message="errorMessage" label="Phone number" />
 ```
 
+## Migration Examples
+
+### Before — static boolean on `bento-dropdown`
+
 ```html
-<bento-input-field error-message="value" />
+<template>
+    <bento-dropdown :error="true" :items="items" label="Country" />
+</template>
 ```
 
+### After — static error message on `bento-dropdown`
+
 ```html
-<bento-input-field-phone-number error-message="value" />
+<template>
+    <bento-dropdown error-message="Please select a country" :items="items" label="Country" />
+</template>
+```
+
+### Before — dynamic validation on `bento-input-field`
+
+```html
+<template>
+    <bento-input-field :error="hasError" v-model="email" label="Email" />
+</template>
+
+<script setup lang="ts">
+    const email = ref('');
+    const hasError = ref(false);
+
+    const validate = () => {
+        hasError.value = !email.value.includes('@');
+    };
+</script>
+```
+
+### After — dynamic validation with error message on `bento-input-field`
+
+```html
+<template>
+    <bento-input-field :error-message="errorMessage" v-model="email" label="Email" />
+</template>
+
+<script setup lang="ts">
+    const email = ref('');
+    const errorMessage = ref<string | null>(null);
+
+    const validate = () => {
+        errorMessage.value = !email.value.includes('@') ? 'Enter a valid email address' : null;
+    };
+</script>
+```
+
+### Before — phone number validation
+
+```html
+<template>
+    <bento-input-field-phone-number
+        :error="hasError"
+        v-model="phone"
+        :selected-country="country"
+        label="Phone number"
+        @input:valid="onValid"
+        @blur="validate"
+    />
+</template>
+
+<script setup lang="ts">
+    const phone = ref('');
+    const country = ref('US');
+    const hasError = ref(false);
+    const isValid = ref(false);
+
+    const onValid = (validity: boolean) => {
+        isValid.value = validity;
+    };
+
+    const validate = () => {
+        hasError.value = !isValid.value && !!phone.value;
+    };
+</script>
+```
+
+### After — phone number validation with error message
+
+```html
+<template>
+    <bento-input-field-phone-number
+        :error-message="errorMessage"
+        v-model="phone"
+        :selected-country="country"
+        label="Phone number"
+        @input:valid="onValid"
+        @blur="validate"
+    />
+</template>
+
+<script setup lang="ts">
+    const phone = ref('');
+    const country = ref('US');
+    const errorMessage = ref<string | null>(null);
+    const isValid = ref(false);
+
+    const onValid = (validity: boolean) => {
+        isValid.value = validity;
+    };
+
+    const validate = () => {
+        errorMessage.value = !isValid.value && !!phone.value ? 'Enter a valid phone number' : null;
+    };
+</script>
 ```

package/rules/deprecation-components-error-prop/__tests__/eslint.config.js

@@ -19,7 +19,7 @@ module.exports = defineConfig([
         },
         rules: {
             // Register the specific rule we are testing
-            '@adyen/bento/deprecation-components-error-prop': ['warn', { autofix: true }],
+            '@adyen/bento/deprecation-components-error-prop': 'warn',
         },
         files: ['**/*.vue'],
     },

package/rules/deprecation-components-error-prop/deprecation-components-error-prop.integration.test.ts

@@ -8,8 +8,10 @@ describe('@adyen/bento/deprecation-components-error-prop', () => {
         // Load the test file generated alongside this one
         const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-components-error-prop.vue');
 
-        // Execute the linter
-        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+        // Execute the linter — strip any non-JSON preamble (e.g. pnpm warnings)
+        const rawOutput = execFileSyncEslintVueFiles(eslintrc, vueFile);
+        const jsonStart = rawOutput.indexOf('[{"');
+        const result = JSON.parse(jsonStart >= 0 ? rawOutput.slice(jsonStart) : rawOutput);
 
         /* ------------------------------------------------ */
         /* CASE 2: SINGLE REPLACEMENT                       */
@@ -20,18 +22,20 @@ describe('@adyen/bento/deprecation-components-error-prop', () => {
         const numberOfComponents = 3;
         expect(result[0].warningCount).toBe(numberOfComponents * 3);
 
-        // Verify the message structure on the first error found.
-        // Since the rule is the same for all components, checking the first one confirms the message is correct.
+        // Verify the message structure on the first warning found.
         expect(result[0].messages[0]).toMatchObject({
             ruleId: '@adyen/bento/deprecation-components-error-prop',
             severity: 1,
-
             messageId: 'deprecation',
-            message: `The "error" prop is deprecated. Please use "error-message" instead.`,
-
-            fix: expect.objectContaining({
-                text: expect.stringContaining('error-message'),
-            }),
+            message: `The "error" prop is deprecated. Use "error-message" instead. Note that "error" accepted a boolean, but "error-message" expects a string, so update the value to an error message.`,
+            suggestions: expect.arrayContaining([
+                expect.objectContaining({
+                    messageId: 'suggestReplace',
+                    fix: expect.objectContaining({
+                        text: expect.stringContaining('error-message'),
+                    }),
+                }),
+            ]),
         });
     });
 });

package/rules/deprecation-components-error-prop/deprecation-components-error-prop.js

@@ -19,59 +19,49 @@ module.exports = {
             recommended: true,
         },
         messages: {
-            deprecation: `The "error" prop is deprecated. Please use "error-message" instead.`,
+            deprecation: `The "error" prop is deprecated. Use "error-message" instead. Note that "error" accepted a boolean, but "error-message" expects a string, so update the value to an error message.`,
+            suggestReplace: `Replace "error" with "error-message". Remember to update the value from a boolean to a string error message.`,
         },
-        fixable: 'code',
-        schema: [
-            {
-                type: 'object',
-                properties: {
-                    autofix: {
-                        type: 'boolean',
-                        default: false,
-                    },
-                },
-                additionalProperties: false,
-            },
-        ],
+        hasSuggestions: true,
+        schema: [],
     },
 
     /** @param {RuleContext} context */
     create(context) {
-        const options = context.options[0] || {};
-        const autofix = options.autofix === true;
-
-        /* ------------------------------------------------ */
-        /* CASE 2: PROP DEPRECATION (Multiple Components)   */
-        /* ------------------------------------------------ */
         return VueUtils.defineTemplateBodyVisitor(context, {
-            // 1. STATIC: value="foo"
+            // 1. STATIC: error="foo"
             [`VElement:matches([name="bento-dropdown"], [name="BentoDropdown"], [name="bento-input-field"], [name="BentoInputField"], [name="bento-input-field-phone-number"], [name="BentoInputFieldPhoneNumber"]) > VStartTag > VAttribute[directive=false][key.name="error"]`](
                 node
             ) {
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    ...(autofix && {
-                        fix(fixer) {
-                            return fixer.replaceText(node.key, 'error-message');
+                    suggest: [
+                        {
+                            messageId: 'suggestReplace',
+                            fix(fixer) {
+                                return fixer.replaceText(node.key, 'error-message');
+                            },
                         },
-                    }),
+                    ],
                 });
             },
 
-            // 2. DYNAMIC: :value="foo" or v-bind:value="foo"
+            // 2. DYNAMIC: :error="foo" or v-bind:error="foo"
             [`VElement:matches([name="bento-dropdown"], [name="BentoDropdown"], [name="bento-input-field"], [name="BentoInputField"], [name="bento-input-field-phone-number"], [name="BentoInputFieldPhoneNumber"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="error"]`](
                 node
             ) {
                 context.report({
                     node,
                     messageId: 'deprecation',
-                    ...(autofix && {
-                        fix(fixer) {
-                            return fixer.replaceText(node.key.argument, 'error-message');
+                    suggest: [
+                        {
+                            messageId: 'suggestReplace',
+                            fix(fixer) {
+                                return fixer.replaceText(node.key.argument, 'error-message');
+                            },
                         },
-                    }),
+                    ],
                 });
             },
         });