eslint-config-aristek

ESLint config based on team guideline and experience for React projects.

• Features
• Usage
  • Basic
  • TypeScript
  • GraphQL
  • CSS Modules
  • Prettier
  • create-react-app
• Rules

Features

• Basic configuration upon airbnb code style for JavaScript and React using import, jsx-a11y, react and react-hooks plugins.
• TypeScript support via @typescript-eslint/parser and @typescript-eslint/eslint-plugin.
• GraphQL support via @graphql-eslint/eslint-plugin.
• CSS Modules support via eslint-plugin-css-modules.
• Prettier support via eslint-config-prettier.
• Absolute imports friendly for node_modules and src.

Usage

There are several possible presets that you can setup using our config.

Basic

Let's start from installing core dependencies with correct versions of each dependency via npm:

npm i -E -D @babel/eslint-parser@7 eslint@7 eslint-config-airbnb@18 eslint-config-aristek@6 eslint-plugin-import@2 eslint-plugin-jsx-a11y@6 eslint-plugin-react@7 eslint-plugin-react-hooks@4

Or via yarn:

yarn add -E -D @babel/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

Then add this lines in your package.json file:

"eslintConfig": {
  "extends": "aristek"
}

This preset should be used for JavaScript only projects.

TypeScript

Install the correct versions of each dependency to add TypeScript support to your project via npm:

npm i -E -D @typescript-eslint/eslint-plugin@4 @typescript-eslint/parser@4

Or via yarn:

yarn add -E -D @typescript-eslint/[email protected] @typescript-eslint/[email protected]

Extend from aristek/typescript in your eslint configuration. This can be looks like:

"eslintConfig": {
  "extends": [
    "aristek",
    "aristek/typescript"
  ]
}

This preset can also be used for mixed codebases.

GraphQL

Install the correct version of dependency to add GraphQL support to your project via npm:

npm i -E -D @graphql-eslint/eslint-plugin@2

Or via yarn:

yarn add -E -D @graphql-eslint/[email protected]

Extend from aristek/graphql in your eslint configuration. This can be looks like:

"eslintConfig": {
  "extends": [
    "aristek",
    "aristek/graphql"
  ]
}

CSS Modules

Install the correct version of dependency to add CSS Modules support to your project via npm:

npm i -E -D eslint-plugin-css-modules@2

Or via yarn:

yarn add -E -D [email protected]

Extend from aristek/css-modules in your eslint configuration. This can be looks like:

"eslintConfig": {
  "extends": [
    "aristek",
    "aristek/css-modules"
  ]
}

Prettier

Install the correct version of dependency to add Prettier support to your project via npm:

npm i -E -D eslint-config-prettier@8

Or via yarn:

yarn add -E -D [email protected]

Extend from aristek/prettier in your eslint configuration. This can be looks like:

"eslintConfig": {
  "extends": [
    "aristek",
    "aristek/typescript"
    "aristek/prettier" // <- Must be the last extend in config.
  ]
}

Pay attention that prettier extend must be the last in your eslint configuration!

create-react-app

In case you are trying to use our config with create-react-app, we recommend you to use @craco/craco to override default config. To do this you should add the following lines in your craco.config.js file:

module.exports = {
  eslint: {
    mode: ESLINT_MODES.file, // Remove default config.
    loaderOptions: { resolvePluginsRelativeTo: process.cwd() }, // Use eslint plugins from your node_modules, not from react-script's ones.
  },
};

There might be issues connected with dependencies versions, installing versions required by create-react-app will resolve them.

Rules

All changes with documentation notes compared to configs and plugins can be found in our config files.