2.0.5 • Published 2 years ago

@aidenlx/eslint-config v2.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

@your-org/eslint-config-bases

About

Example of composable eslint config bases that can be easily shared and fine-tuned by apps and packages that lives in a monorepo.

Features

Features

  • Monorepo friendly: Each workspace can have its own config.
  • Composable: Compose your workspace eslint config from pre-defined bases.
  • Peace of mind: Plugins does not need to be installed per workspaces, thx to @rushstack/eslint-patch.
  • Extensible: Easily add additional plugins per workspaces (ie: nextjs, remix...)
  • Performance: Plugins enabled on file conventions patterns to increase perf.

Install

Add the following devDependencies to workspace (apps/packages in monorepo) or main project package.json.

$ yarn add --dev eslint
$ yarn add --dev @your-org/eslint-config-bases:"workspace:^"

Tip the workspace:^ is supported by yarn and pnpm.

Usage

In your app or package, create an ./apps/my-app/.eslintrc.js file that extends any of the existing base configs. For example:

// Workaround for https://github.com/eslint/eslint/issues/3458 (re-export of @rushstack/eslint-patch)
require("@your-org/eslint-config-bases/patch/modern-module-resolution");

module.exports = {
  // Be sure to set root to true in monorepo.
  root: true,
  // Will help typescript extended rules.
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: "tsconfig.json",
  },
  ignorePatterns: ["**/node_modules", "**/.cache", "build", ".next"],
  extends: [
    "@your-org/eslint-config-bases/typescript",
    "@your-org/eslint-config-bases/sonar",
    "@your-org/eslint-config-bases/regexp",
    "@your-org/eslint-config-bases/react",
    "@your-org/eslint-config-bases/jest",
    "@your-org/eslint-config-bases/rtl",
    "@your-org/eslint-config-bases/graphql-schema",
    "@your-org/eslint-config-bases/storybook",
    "@your-org/eslint-config-bases/playwright",

    // Add specific rules for your framework if needed.
    // ie:
    // - nextjs: 'plugin:@next/next/core-web-vitals',
    // - remix:  '@remix-run/eslint-config',
    // ...

    // Post configure the prettier base so there won't be
    // any conficts between eslint / prettier
    "@your-org/eslint-config-bases/prettier",
  ],
  rules: {
    // Specific global rules for your app or package
  },
  overrides: [
    // Specific file rules for your app or package
  ],
};

Tip: "@your-org/eslint-config-bases/prettier" must be set at the end to disable any conflicting rules.

Bases

You can find the bases in ./src/bases.

BaseMatch conventionScope
typescriptallNaming conventions, consistent imports, import sorting...
sonar*.{js,jsx,ts,tsx}Keep levels of code complexity sane. (excl test and stories)
regexp*.{js,jsx,jsx,tsx}Keep regexp consistent and safer.
react*.{jsx,tsx}Recommendations for react, react-hooks and jsx projects.
jest**/?(*.)+(test).{js,jsx,ts,tsx}Catch inconsistencies or error in jest tests.
rtl**/?(*.)+(test).{js,jsx,ts,tsx}Potential errors / deprecations in react-testing-library tests.
graphql-schema*.graphqlEnsure validity of graphql schema files.
storybook*.stories.{ts,tsx,mdx}Potential errors / deprecations in stories.
playwright**/e2e/**/*.test.{js,ts}Post configure eslint for prettier compatibility.
prettierallPost configure eslint for prettier compatibility.

Notes:

  • The order is important. Some bases will disable or tune previously defined rules. For example the react base will tune the naming conventions for function components and increase recommended cognitive complexity. The typescript base will also relax conventions for javascript files.

  • Based on filename conventions some rules are relaxed or disabled to avoid false positives and keep a good level of performance. For example the sonar base won't run on test and storybook files. If you work on different conventions the patterns must be updated.

Prettier integration

To prevent conflicts between prettier and eslint, you must re-export the prettier base from @your-org/eslint-config-bases.

const { getPrettierConfig } = require("@your-org/eslint-config-bases/helpers");
module.exports = {
  ...prettierConfig,
  overrides: [
    // whatever you need
  ],
};

Tip: You can tune the provided prettier.base.config for your own needs.

Notes

Typescript

Generic typescript project, mostly based on

Type/PluginComment
eslint:recommendedThe basics for code linting.
@typescript-eslint/recommendedThe basics for typescript.
@typescript-eslint/consistent-typeUse TS 3.8+ imports/exports, helps with esbuild
@typescript-eslint/naming-convention
eslint-plugin-importOrder imports

Sonarjs

Type/PluginComment
eslint-plugin-sonarjs/recommendedHelp to keep complexity sane

React

Type/PluginComment
eslint-plugin-react/recommended
eslint-plugin-react-hooks/recommended
eslint-plugin-jsx-a11y/recommendedHelps to produce accessibility-ready jsx

Jest

Type/PluginComment
eslint-plugin-jest/recommendedJest recommended practices.

React Testing Library

Type/PluginComment
eslint-plugin-testing-library/recommendedEase when using react-testing-library

Regexp

Type/PluginComment
eslint-plugin-regexp/recommended

Etc

...