eslint-config-aiven

Our internal ESLint and prettier configuration. We want to autoformat code like prettier does, but also do more static checks that eslint does. To do both, we use eslint-plugin-prettier and eslint acts as the frontend to check and autofix style and other issues.

The configuration is split into:

• @aivenio/eslint-config-aiven
  • Recommended base configuration for TypeScript.
• @aivenio/eslint-config-aiven/react
  • Base + React additions.
• @aivenio/eslint-config-aiven/typescript-type-checked
  • Base + TS rules that require typed linting

Install recommended base

1. npm install @aivenio/eslint-config-aiven

2. Create an .eslintrc file to your repository root and select which configuration to use:

{
  "extends": ["@aivenio/eslint-config-aiven"]
  // "extends": ["@aivenio/eslint-config-aiven/react", "@aivenio/eslint-config-aiven/typescript-type-checked"]
}

When using eslint-config-aiven/react, install the required peer dependencies: eslint-plugin-react, eslint-plugin-react-hooks and eslint-plugin-jsx-a11y.

3. Setup npm scripts in package.json

  "eslint:fix": "eslint --config .eslintrc --fix \"src/**/*.{ts,tsx}\"",
  "eslint:check": "eslint --config .eslintrc \"src/**/*.{ts,tsx}\"",

4. Remember to setup a CI task to lint source code. See .github/workflows/test.yml for a GH action example.

Install for React

1. Follow all steps in "Install recommended base" first

2. Install additional peer dependencies

npm i --save-dev eslint-plugin-jsx-a11y
npm i --save-dev eslint-plugin-react

3. Change the .eslintrc in your repository to have the following contents:

{
  "extends": ["@aivenio/eslint-config-aiven/react"]
}