@zendeskgarden/eslint-config NPM

Garden ESLint Config

:seedling: Garden is the design system by Zendesk

This package exposes a shareable ESLint config and a selection of associated plugins.

Installation

npm install eslint @zendeskgarden/eslint-config

Usage

Add a eslint.config.mjs to your project like this:

import config from '@zendeskgarden/eslint-config';

export default config;

Now Garden linting rules will apply to your project. See the ESLint Documentation for more details on using shareable configuration files.

Plugins

The following shared plugins are also available.

Jest

Install the following dependency in addition to those listed above.

npm install jest

Update the default configuration.

import config from '@zendeskgarden/eslint-config';
import jestPlugin from '@zendeskgarden/eslint-config/plugins/jest.js';

export default [...config, jestPlugin];

In some cases, it may be useful to limit the scope of the Jest rules via files.

export default [
  ...config,
  {
    files: ['**/*.spec.*'],
    ...jestPlugin
  }
];

React

The React plugin bundles rules for React, React Hooks, and JSX accessibility. Install the following dependency in addition to those listed above.

npm install react

Update the default configuration.

import config from '@zendeskgarden/eslint-config';
import reactPlugin from '@zendeskgarden/eslint-config/plugins/react.js';

export default [...config, reactPlugin];

TypeScript

Install the following dependency in addition to those listed above.

npm install typescript

Update the default configuration.

import config from '@zendeskgarden/eslint-config';
import typescriptPlugin from '@zendeskgarden/eslint-config/plugins/typescript.js';

export default [...config, typescriptPlugin];

For mixed JS and TS codebases, it may be useful to limit the scope of the TypeScript rules via files.

export default [
  ...config,
  {
    files: ['**/*.{ts, tsx}'],
    ...typescriptPlugin
  }
];

The typescript plugin covers rules for syntax checking. An additional typescript-type-checked plugin provides rules based on semantics. The typescript-type-checked plugin requires type information in order to execute. Set languageOptions.parserOptions.project to a valid TSConfig for the project. See typescript-eslint documentation for details.

export default [
  ...config,
  typescriptPlugin,
  typescriptTypeCheckedPlugin,
  {
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.json'],
        requireConfigFile: false
      }
    }
  }
];