🌱 Garden is the design system by Zendesk
This package exposes a shareable ESLint config and a selection of associated plugins.
npm install eslint @babel/eslint-parser eslint-plugin-node @zendeskgarden/eslint-config
Add a .eslintrc.json
to your project with an extends
property like this:
{
"extends": "@zendeskgarden"
}
Now Garden linting rules will apply to your project. See the ESLint Documentation for more details on extending shareable configuration files.
The following shared plugins are also available.
Install the following dependency in addition to those listed above.
npm install jest eslint-plugin-jest
Extend the base configuration.
{
"extends": ["@zendeskgarden", "@zendeskgarden/eslint-config/plugins/jest"]
}
In some cases, it may be useful to limit the scope of the Jest rules via
overrides
.
{
"extends": "@zendeskgarden",
"overrides": [
{
"files": ["*.spec.*"],
"extends": "@zendeskgarden/eslint-config/plugins/jest"
}
]
}
The React plugin bundles rules for React, React Hooks, and JSX accessibility. Install the following dependencies in addition to those listed above.
npm install eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
Extend the base configuration.
{
"extends": ["@zendeskgarden", "@zendeskgarden/eslint-config/plugins/react"]
}
Install the following dependencies in addition to those listed above.
npm install typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
Extend the base configuration.
{
"extends": [
"@zendeskgarden",
"@zendeskgarden/eslint-config/plugins/typescript"
]
}
For mixed JS and TS codebases, it may be useful to limit the scope of the
TypeScript rules via overrides
.
{
"extends": "@zendeskgarden",
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"extends": "@zendeskgarden/eslint-config/plugins/typescript"
}
]
}
The typescript
plugin covers rules for syntax checking. An additional
typescript-semantics
plugin provides rules based on semantics. The
typescript-semantics
plugin requires type information in order to execute.
Set parserOptions.project
to a valid TSConfig for the project. See
typescript-eslint
documentation
for details.
{
"extends": [
"@zendeskgarden",
"@zendeskgarden/eslint-config/plugins/typescript",
"@zendeskgarden/eslint-config/plugins/typescript-semantics"
],
"parserOptions": {
"project": ["./tsconfig.json"]
}
}
Shout-outs for a mostly reasonable set of lint rules go to:
- AirBnB's JavaScript Style Guide
- Elie Rotenberg's ES6 Coding Style
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.
Copyright 2021 Zendesk
Licensed under the Apache License, Version 2.0