eslint-config-js

@kael89/eslint-config-js

ESLint configuration for JavaScript projects

This the base ESLint configuration I use in personal JavaScript projects:

• ✔ Extends the popular Airbnb Style Guide
• ✔ Uses Prettier for code formatting
• ✔ Provides additional linting for React

Installation

1. Install the package and its peer dependencies:

yarn add -D @kael89/eslint-config-js eslint prettier

2. Extend this package in your ESLint configuration:

{
  "eslintConfig": {
    "extends": "@kael89/js"
  }
}

Gotchas

React >= 17

If you are using the new JSX transform from React 17, extend react/jsx-runtime in your eslint config (add "plugin:react/jsx-runtime" to "extends") to disable the relevant rules. See eslint-plugin-react for more information.

Extraneous dependencies in tests

import/no-extraneous-dependencies will complain if dependencies used in tests are specified as devDependencies. This is a false positive, and we can use the following configuration to avoid it:

{
  "rules": {
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": ["**/__tests__/**"],
        "packageDir": [".", "../../"] // can skip if project is not a monorepo
      }
    ]
  }
}

• devDependencies: a pattern that matches our test files
• packageDir: a list of paths where package.json files will be loaded from (optional)

The exact configuration will depend on your setup.

Tip: If you are using VSCode to open a monorepo, you may get better linting results for rules that need to scan the project upwards if you load it as a multi-root workspace. You can then use "packageDir": [".", "../../"] in your eslint config to load dependencies from both the current workspace and the root package.json.