zendeskgardenGarden 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-configUsage
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 jestUpdate 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 reactUpdate 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 typescriptUpdate 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
}
}
}
];Resources
Shout-outs for a mostly reasonable set of lint rules go to:
- AirBnB's JavaScript Style Guide
- Elie Rotenberg's ES6 Coding Style
Contribution
Thanks for your interest in Garden! Community involvement helps make our design system fresh and tasty for everyone.
Got issues with what you find here? Please feel free to create an issue.
If you'd like to take a crack at making some changes, please follow our contributing documentation for details needed to submit a PR.
Community behavior is benevolently ruled by a code of conduct. Please participate accordingly.
License
Copyright 2024 Zendesk
Licensed under the Apache License, Version 2.0