@chanzuckerberg/eslint-plugin-eds

Shared React ESLint plugin and config for CZI's Education Design System.

Prerequisites

1. EDS is in use
2. Install ESLint
3. Run ESLint on CI (e.g. npx eslint .)
4. Consider running ESLint in your editor(s).

Installation

Install by running

yarn add --dev @chanzuckerberg/eslint-plugin-eds

Usage

Add this package as a plugin in your eslint configuration file.

// .eslintrc.json
{
  "plugins": ["@chanzuckerberg/eds"]
}

Then extend the recommended config.

// .eslintrc
{
  "extends": [
    "plugin:@chanzuckerberg/eslint-plugin-eds/recommended"
  ]
}

Custom rules

no-h-tags

Don't allow <h1> - <h6> tags in components in favor of EDS <Heading> component.

<h1>Bad Heading</h1> // <- Violation
<Heading size="h1">EDS Heading</Heading> // <- Good

no-p-tags

Don't allow <p> tags in components in favor of EDS <Text> component.

<p>Bad block text</p> // <- Violation
<Text>EDS Text</Text> // <- Good