Skip to content

⬅️ Back to Table of Contents

📄 RuleAttributes

📊 Analysis Summary

Metric Count
🔧 Functions 5
📦 Imports 14
📊 Variables & Constants 1
💠 JSX Elements 17
📑 Type Aliases 2

📚 Table of Contents

🛠️ File Location:

📂 packages/website/src/theme/MDXComponents/RuleAttributes.tsx

📦 Imports

Name Source
ESLintPluginDocs @typescript-eslint/eslint-plugin/use-at-your-own-risk/rules
RuleRecommendation @typescript-eslint/utils/ts-eslint
RuleRecommendationAcrossConfigs @typescript-eslint/utils/ts-eslint
Link @docusaurus/Link
useRulesMeta @site/src/hooks/useRulesMeta
React react
FeatureProps ./Feature
FIXABLE_EMOJI ../../components/constants
RECOMMENDED_CONFIG_EMOJI ../../components/constants
STRICT_CONFIG_EMOJI ../../components/constants
STYLISTIC_CONFIG_EMOJI ../../components/constants
SUGGESTIONS_EMOJI ../../components/constants
Feature ./Feature
styles ./RuleAttributes.module.css

Variables & Constants

Name Type Kind Value Exported
recommendations Record< RuleRecommendation, [string, ... const { recommended: [RECOMMENDED_CONFIG_EMOJI, 'recommended'], strict: [STRICT_CON... ✗

JSX Elements

Component Type Props Children
Fragment fragment none text: "Extending", , text: "in an", , text: "enables this rule."
Link component to={/users/configs#${recommendation}}, target="_blank"
code element className={styles.code} text: ""plugin:@typescript-eslint/", {recommendation}, text: """
Link component href="https://eslint.org/docs/latest/user-guide/configuring/configuration-fil... text: "ESLint configuration"
Fragment fragment none text: "Some problems reported by this rule are automatically fixable by the",...
Link component href="https://eslint.org/docs/latest/user-guide/command-line-interface#--fix" , text: "ESLint command line option"
code element none text: "--fix"
Fragment fragment none text: "Some problems reported by this rule are manually fixable by editor", <...
Link component href="https://eslint.org/docs/latest/developer-guide/working-with-rules#provi... text: "suggestions"
Fragment fragment none text: "This rule requires", , text: "to run, which comes with performan...
Link component href="/getting-started/typed-linting", target="_blank" text: "type information"
Fragment fragment none text: "This is an "extension" rule that replaces a core ESLint rule to work w...
Link component href="/rules#extension-rules" text: "Rules > Extension Rules"
Fragment fragment none text: "This rule is currently", , text: "and is not accepting feature r...
Link component href="/rules#frozen-rules" text: "frozen"
div element className={styles.features} {features.map(feature => ( ))}
Feature component key={feature.emoji} none

Functions

getRecommendationWithEmoji(recommended: RecommendedRuleMetaDataDocs['recommende…): [string, RuleRecommendation]

Parameters:

  • recommended RecommendedRuleMetaDataDocs['recommended']

Returns: [string, RuleRecommendation]

Calls:

  • resolveRecommendation
Code 
export function getRecommendationWithEmoji(
  recommended: RecommendedRuleMetaDataDocs['recommended'],
): [string, RuleRecommendation] {
  const recommendationKey =
    typeof recommended === 'object'
      ? resolveRecommendation(recommended)
      : recommended;
  return recommendations[recommendationKey];
}

RuleAttributes({ name }: { name: string }): React.ReactNode

Parameters:

  • { name } { name: string }

Returns: React.ReactNode

Calls:

  • useRulesMeta (from @site/src/hooks/useRulesMeta)
  • rules.find
  • isRecommendedDocs
  • getRecommendation
  • features.push
  • features.map
Code 
export function RuleAttributes({ name }: { name: string }): React.ReactNode {
  const rules = useRulesMeta();
  const rule = rules.find(rule => rule.name === name);
  if (!rule?.docs) {
    return null;
  }

  const features: FeatureProps[] = [];

  if (isRecommendedDocs(rule.docs)) {
    const [emoji, recommendation] = getRecommendation(rule.docs);
    features.push({
      children: (
        <>
          Extending{' '}
          <Link to={`/users/configs#${recommendation}`} target="_blank">
            <code className={styles.code}>
              "plugin:@typescript-eslint/{recommendation}"
            </code>
          </Link>{' '}
          in an{' '}
          <Link href="https://eslint.org/docs/latest/user-guide/configuring/configuration-files#extending-configuration-files">
            ESLint configuration
          </Link>{' '}
          enables this rule.
        </>
      ),
      emoji,
    });
  }

  if (rule.fixable) {
    features.push({
      children: (
        <>
          Some problems reported by this rule are automatically fixable by the{' '}
          <Link href="https://eslint.org/docs/latest/user-guide/command-line-interface#--fix">
            <code>--fix</code> ESLint command line option
          </Link>
          .
        </>
      ),
      emoji: FIXABLE_EMOJI,
    });
  }

  if (rule.hasSuggestions) {
    features.push({
      children: (
        <>
          Some problems reported by this rule are manually fixable by editor{' '}
          <Link href="https://eslint.org/docs/latest/developer-guide/working-with-rules#providing-suggestions">
            suggestions
          </Link>
          .
        </>
      ),
      emoji: SUGGESTIONS_EMOJI,
    });
  }

  if (rule.docs.requiresTypeChecking) {
    features.push({
      children: (
        <>
          This rule requires{' '}
          <Link href="/getting-started/typed-linting" target="_blank">
            type information
          </Link>{' '}
          to run, which comes with performance tradeoffs.
        </>
      ),
      emoji: '💭',
    });
  }

  if (rule.docs.extendsBaseRule) {
    features.push({
      children: (
        <>
          {' '}
          This is an "extension" rule that replaces a core ESLint rule to work
          with TypeScript. See{' '}
          <Link href="/rules#extension-rules">Rules &gt; Extension Rules</Link>.
        </>
      ),
      emoji: '🧱',
    });
  }

  if (rule.docs.frozen) {
    features.push({
      children: (
        <>
          This rule is currently <Link href="/rules#frozen-rules">frozen</Link>{' '}
          and is not accepting feature requests.
        </>
      ),
      emoji: '❄️',
    });
  }

  return (
    <div className={styles.features}>
      {features.map(feature => (
        <Feature {...feature} key={feature.emoji} />
      ))}
    </div>
  );
}

isRecommendedDocs(docs: ESLintPluginDocs): docs is RecommendedRuleMetaDataDocs

Parameters:

  • docs ESLintPluginDocs

Returns: docs is RecommendedRuleMetaDataDocs

Code 
(
  docs: ESLintPluginDocs,
): docs is RecommendedRuleMetaDataDocs => !!docs.recommended

resolveRecommendation(recommended: RuleRecommendationAcrossConfigs<unknown…): RuleRecommendation

Parameters:

  • recommended RuleRecommendationAcrossConfigs<unknown[]>

Returns: RuleRecommendation

Code 
(
  recommended: RuleRecommendationAcrossConfigs<unknown[]>,
): RuleRecommendation => {
  return recommended.recommended === true ? 'recommended' : 'strict';
}

getRecommendation(docs: RecommendedRuleMetaDataDocs): string[]

Parameters:

  • docs RecommendedRuleMetaDataDocs

Returns: string[]

Calls:

  • getRecommendationWithEmoji
Code 
(docs: RecommendedRuleMetaDataDocs): string[] => {
  const recommendation = getRecommendationWithEmoji(docs.recommended);

  return docs.requiresTypeChecking
    ? [recommendation[0], `${recommendation[1]}-type-checked`]
    : recommendation;
}

Type Aliases

MakeRequired<Base, Key extends keyof Base>

type MakeRequired<Base, Key extends keyof Base> = Omit<Base, Key> &
  Required<Record<Key, NonNullable<Base[Key]>>>;

RecommendedRuleMetaDataDocs

type RecommendedRuleMetaDataDocs = MakeRequired<
  ESLintPluginDocs,
  'recommended'
>;

Generated by Syntax Scribe