diff --git a/packages/website/plugins/generated-rule-docs/insertions/insertNewRuleReferences.ts b/packages/website/plugins/generated-rule-docs/insertions/insertNewRuleReferences.ts
index 5c934e2f025e..89230d62a2fb 100644
--- a/packages/website/plugins/generated-rule-docs/insertions/insertNewRuleReferences.ts
+++ b/packages/website/plugins/generated-rule-docs/insertions/insertNewRuleReferences.ts
@@ -190,9 +190,13 @@ function getRuleDefaultOptions(page: RuleDocsPage): string {
 
   return typeof recommended === 'object'
     ? [
-        `const defaultOptionsRecommended: Options = ${defaults};`,
-        '',
-        '// These options are merged on top of the recommended defaults',
+        ...(recommended.recommended
+          ? [
+              `const defaultOptionsRecommended: Options = ${defaults};`,
+              '',
+              '// These options are merged on top of the recommended defaults',
+            ]
+          : []),
         `const defaultOptionsStrict: Options = ${JSON.stringify(recommended.strict)};`,
       ].join('\n')
     : `const defaultOptions: Options = ${defaults};`;
diff --git a/packages/website/src/components/RulesTable/index.tsx b/packages/website/src/components/RulesTable/index.tsx
index 1825fefcb02d..6f25e27e951d 100644
--- a/packages/website/src/components/RulesTable/index.tsx
+++ b/packages/website/src/components/RulesTable/index.tsx
@@ -10,6 +10,7 @@ import React, { useMemo } from 'react';
 import type { HistorySelector } from '../../hooks/useHistorySelector';
 
 import { useHistorySelector } from '../../hooks/useHistorySelector';
+import { getRecommendationWithEmoji } from '../../theme/MDXComponents/RuleAttributes';
 import {
   CONFIG_EMOJI,
   DEPRECATED_RULE_EMOJI,
@@ -35,9 +36,9 @@ function interpolateCode(
 
 function getActualRecommended({
   docs,
-}: RulesMeta[number]): RuleRecommendation | undefined {
+}: RulesMeta[number]): ['', ''] | [string, RuleRecommendation] {
   const recommended = docs.recommended;
-  return typeof recommended === 'object' ? 'recommended' : recommended;
+  return recommended ? getRecommendationWithEmoji(recommended) : ['', ''];
 }
 
 function RuleRow({
@@ -50,7 +51,7 @@ function RuleRow({
   }
   const { deprecated, fixable, hasSuggestions } = rule;
   const { extendsBaseRule, requiresTypeChecking } = rule.docs;
-  const actualRecommended = getActualRecommended(rule);
+  const [emoji, actualRecommended] = getActualRecommended(rule);
   return (
     <tr>
       <td>
@@ -61,20 +62,7 @@ function RuleRow({
         {interpolateCode(rule.docs.description)}
       </td>
       <td className={styles.attrCol} title={actualRecommended}>
-        {(() => {
-          switch (actualRecommended) {
-            case 'recommended':
-              return RECOMMENDED_CONFIG_EMOJI;
-            case 'strict':
-              return STRICT_CONFIG_EMOJI;
-            case 'stylistic':
-              return STYLISTIC_CONFIG_EMOJI;
-            default:
-              // for some reason the current version of babel loader won't elide
-              // this correctly recommended satisfies undefined;
-              return '';
-          }
-        })()}
+        {emoji}
       </td>
       <td
         className={styles.attrCol}
@@ -172,7 +160,7 @@ export default function RulesTable(): React.JSX.Element {
   const relevantRules = useMemo(
     () =>
       rules.filter(r => {
-        const actualRecommended = getActualRecommended(r);
+        const actualRecommended = getActualRecommended(r)[1];
         const opinions = [
           match(filters.recommended, actualRecommended === 'recommended'),
           match(
diff --git a/packages/website/src/theme/MDXComponents/RuleAttributes.tsx b/packages/website/src/theme/MDXComponents/RuleAttributes.tsx
index 32e1f91af462..0465e126aaad 100644
--- a/packages/website/src/theme/MDXComponents/RuleAttributes.tsx
+++ b/packages/website/src/theme/MDXComponents/RuleAttributes.tsx
@@ -20,7 +20,10 @@ import {
 import { Feature } from './Feature';
 import styles from './RuleAttributes.module.css';
 
-const recommendations = {
+const recommendations: Record<
+  RuleRecommendation,
+  [string, RuleRecommendation]
+> = {
   recommended: [RECOMMENDED_CONFIG_EMOJI, 'recommended'],
   strict: [STRICT_CONFIG_EMOJI, 'strict'],
   stylistic: [STYLISTIC_CONFIG_EMOJI, 'stylistic'],
@@ -45,19 +48,23 @@ const resolveRecommendation = (
 };
 
 const getRecommendation = (docs: RecommendedRuleMetaDataDocs): string[] => {
-  const recommended = docs.recommended;
-  const recommendation =
-    recommendations[
-      typeof recommended === 'object'
-        ? resolveRecommendation(recommended)
-        : recommended
-    ];
+  const recommendation = getRecommendationWithEmoji(docs.recommended);
 
   return docs.requiresTypeChecking
     ? [recommendation[0], `${recommendation[1]}-type-checked`]
     : recommendation;
 };
 
+export function getRecommendationWithEmoji(
+  recommended: RecommendedRuleMetaDataDocs['recommended'],
+): [string, RuleRecommendation] {
+  const recommendationKey =
+    typeof recommended === 'object'
+      ? resolveRecommendation(recommended)
+      : recommended;
+  return recommendations[recommendationKey];
+}
+
 export function RuleAttributes({ name }: { name: string }): React.ReactNode {
   const rules = useRulesMeta();
   const rule = rules.find(rule => rule.name === name);