Skip to content

Eslint Documentation

Index

⬅️ Back to Table of Contents

📄 `Explainers`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	1
📦 Imports	7
📊 Variables & Constants	1
💠 JSX Elements	17

📚 Table of Contents¶

Imports
Variables & Constants
JSX Elements
Functions

🛠️ File Location:¶

📂 packages/website/src/components/home/Explainers/index.tsx

📦 Imports¶

Name	Source
`Link`	`@docusaurus/Link`
`useBaseUrl`	`@docusaurus/useBaseUrl`
`Heading`	`@theme/Heading`
`clsx`	`clsx`
`React`	`react`
`ExplainerSpotlight`	`../ExplainerSpotlight`
`styles`	`./styles.module.css`

Variables & Constants¶

Name	Type	Kind	Value	Exported
`explanations`	`{ children: string; emoji: string; he...`	const	`[ { children: 'The parser and services for linting TypeScript code with ESLin...`	✗

JSX Elements¶

Component	Type	Props	Children
`section`	element	className={clsx('padding-vert--lg', styles.explainers)}	, , ,
`Heading`	component	as="h2", className="col col--12 text--center"	, text: "enables ESLint, Prettier, and more to support TypeScript code."
`strong`	element	none	text: "typescript-eslint"
`ul`	element	className={clsx('col col--10', styles.explainerSpotlights)}	{explanations.map(({ header, ...rest }) => ( <ExplainerSpotlight header={head...
`ExplainerSpotlight`	component	header={header}, key={header}	none
`div`	element	className={styles.explainerTexts}	, ,
`p`	element	none	, text: "is a linter. It runs a set of rules to find likely problems ...
`strong`	element	none	text: "ESLint"
`p`	element	none	, text: "is a language and a type checker. The language adds syntax f...
`strong`	element	none	text: "TypeScript"
`br`	element	none	none
`p`	element	none	, text: "is necessary for JavaScript tools such as ESLint to work wit...
`strong`	element	none	text: "typescript-eslint"
`br`	element	none	none
`div`	element	className={styles.buttons}	,
`Link`	component	className="button button--primary", to={useBaseUrl('getting-started')}	text: "Learn More"
`Link`	component	className="button button--primary button--outline", to={useBaseUrl('rules')}	text: "See the Rules"

Functions¶

`Explainers(): React.JSX.Element`¶

Returns: React.JSX.Element

Calls:

clsx (from clsx)
explanations.map
useBaseUrl (from @docusaurus/useBaseUrl)

Code

export function Explainers(): React.JSX.Element {
  return (
    <section className={clsx('padding-vert--lg', styles.explainers)}>
      <Heading as="h2" className="col col--12 text--center">
        <strong>typescript-eslint</strong> enables ESLint, Prettier, and more to
        support TypeScript code.
      </Heading>
      <ul className={clsx('col col--10', styles.explainerSpotlights)}>
        {explanations.map(({ header, ...rest }) => (
          <ExplainerSpotlight header={header} key={header} {...rest} />
        ))}
      </ul>
      <div className={styles.explainerTexts}>
        <p>
          <strong>ESLint</strong> is a linter. It runs a set of rules to find
          likely problems and suggested fixes to improve your code.
        </p>
        <p>
          <strong>TypeScript</strong> is a language and a type checker. The
          language adds syntax for types to JavaScript.
          <br />
          The type checker analyzes code to find mismatches between uses of
          values and types.
        </p>
        <p>
          <strong>typescript-eslint</strong> is necessary for JavaScript tools
          such as ESLint to work with TypeScript's new syntax.
          <br />
          It also adds lint rules for TypeScript, including many that use the
          power of types to better analyze code.
        </p>
      </div>

      <div className={styles.buttons}>
        <Link
          className="button button--primary"
          to={useBaseUrl('getting-started')}
        >
          Learn More
        </Link>
        <Link
          className="button button--primary button--outline"
          to={useBaseUrl('rules')}
        >
          See the Rules
        </Link>
      </div>
    </section>
  );
}

Generated by Syntax Scribe