@parcellab/eslint-config

Specific parcelLab configuration for JavaScript and TypeScript projects. It also includes React ecosystem and Jest rules.

The philosophy is to use prettier for auto formatting code syntactically, therefore this configuration extensively uses eslint-config-prettier as defined in prettier's documentation, disabling some eslint rules that could collide with prettier's. Anything else that prettier can't auto format will be linted by eslint.

Features

• Customizable: extend the exported configurations and fine-tune them.
• Composable: add only what your project needs. Increase performance and reduce side-effects.
• Easy: explanatory documentation about the plugins you need for every custom rule.

Install

# npm
$ npm install @parcellab/eslint-config --save-dev
# yarn
$ yarn add --dev @parcellab/eslint-config

Usage

In your package, create a .eslintrc.js file that extends any of the existing configs. If no config is specified, the base typescript config will be used.

For example:

module.exports = {
  extends: [
    "@parcellab", // This installs the typescript configuration
  ],
};

Configurations

Configurations are stored in ./src and their required plugins.

| Config | Files to be linted | Required configs/plugins | | :------------------------------------------------------------ | :-------------------------------- | :--------------------------------------------------------------------------------------------------------------------------- | | base | all | eslint-plugin-promise, eslint-plugin-unicorn | | jest | *.{test,spec}.{j,t}s?(x) | eslint-plugin-jest | | react-testing-library | **/?(*.)+(test).{js,jsx,ts,tsx} | eslint-plugin-testing-library | | react-ts (extends react and typescript) | *.tsx | eslint-config-airbnb-typescript | | react (extends base) | *.jsx | eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, eslint-plugin-react-hooks | | playwright | **/e2e/**/*.test.{js,ts} | eslint-plugin-playwright | | storybook | *.stories.{ts,tsx,mdx} | eslint-plugin-storybook | | typescript (extends base) DEFAULT | *.{ts,tsx} | eslint-plugin-import, eslint-import-resolver-typescript, @typescript-eslint/eslint-plugin, @typescript-eslint/parser |

For instance, to lint TypeScript files (the default), the @parcellab/typescript config has to be used and all the base plugins (eslint-plugin-promise, eslint-plugin-unicorn) and the typescript plugin (@typescript-eslint/eslint-plugin) has to be installed as development dependencies:

# npm
npm install eslint-plugin-import \
            eslint-import-resolver-typescript \
            eslint-plugin-promise \
            eslint-plugin-unicorn \
            @typescript-eslint/eslint-plugin \
            @typescript-eslint/parser \
            --save-dev
# yarn
yarn add eslint-plugin-import \
         eslint-import-resolver-typescript \
         eslint-plugin-promise \
         eslint-plugin-unicorn \
         @typescript-eslint/eslint-plugin \
         @typescript-eslint/parser \
         --dev

To lint a React codebase that uses TypeScript, you need to install all plugins for typescript and react as it depends on these:

# npm
npm install eslint-plugin-import \
            eslint-plugin-promise \
            eslint-plugin-unicorn \
            @typescript-eslint/eslint-plugin \
            @typescript-eslint/parser \
            eslint-config-airbnb \
            eslint-plugin-jsx-a11y \
            eslint-plugin-react \
            eslint-plugin-react-hooks \
            eslint-config-airbnb-typescript \
            --save-dev
# yarn
yarn add eslint-plugin-import \
         eslint-plugin-promise \
         eslint-plugin-unicorn \
         @typescript-eslint/eslint-plugin \
         @typescript-eslint/parser \
         eslint-config-airbnb \
         eslint-plugin-jsx-a11y \
         eslint-plugin-react \
         eslint-plugin-react-hooks \
         eslint-config-airbnb-typescript \
         --dev

Configuration examples

// minimum configuration, e.g. for .js files
module.exports = {
  extends: ["@parcellab/eslint-config/base"],
};

// for .ts and .tsx files (do not forget to add `parseOptions` pointing to the tsconfig file)
module.exports = {
  extends: ["@parcellab/eslint-config/typescript"], // or just "@parcellab"
  parserOptions: {
    project: "./tsconfig.json",
    // Enable tsconfigRootDir if the tsconfig has to be loaded base on folder (e.g. monorepo)
    // tsconfigRootDir: __dirname,
  },
};

// for .jsx files
module.exports = {
  extends: ["@parcellab/eslint-config/react"],
};

// for .tsx files
module.exports = {
  extends: ["@parcellab/eslint-config/react-ts"],
};

// for test files
module.exports = {
  extends: ["@parcellab/eslint-config/jest"],
};

// for e2e tests
module.exports = {
  extends: ["@parcellab/eslint-config/playwright"],
};

// for react testing library tests
module.exports = {
  extends: ["@parcellab/eslint-config/react-testing-library"],
};

// for storybook files
module.exports = {
  extends: ["@parcellab/eslint-config/storybook"],
};

// You can combine multiple extends, like this:
// for typescript files and their tests
module.exports = {
  extends: [
    "@parcellab/eslint-config/typescript",
    "@parcellab/eslint-config/jest",
  ],
  parserOptions: {
    project: "./tsconfig.json",
  },
};

Troubleshooting

I get this error when running ESLint: "The file must be included in at least one of the projects provided"

This means you are attempting to lint a file that tsconfig.json doesn't include, when running the parcellab/typescript config.

A common fix is to create a tsconfig.eslint.json file, which extends your tsconfig.json file and includes all files you are linting.

{
  "extends": "./tsconfig.json",
  "include": ["src/**/*.ts", "src/**/*.js", "test/**/*.ts"]
}

Update your ESLint config file:

// .eslintrc.js
parserOptions: {
-  project: './tsconfig.json',
+  project: './tsconfig.eslint.json',
}

ESLint couldn't find the config "X" to extend from. Please check that the name of the config is correct

This could also happen with plugins. When this error is encountered, it is because a peer dependency defined by this library is not fulfilled. Check the Configurations table and make sure that all the configs and plugins are installed. The consumers of this library should be the ones that manage any peer dependencies so they are not constrained from the versions defined in this library.

Development

Lint the lint rules

npm run lint

Run the tests

npm t