MR-Mostafa / eslint-config

Fullstacks eslint config

Installation

$ npm install --save-dev @fullstacksjs/eslint-config eslint prettier

Usage

Method 1: Init API

Create .eslintrc.js file and init the configuration.

const { init } = require('@fullstacksjs/eslint-config/init');

module.exports = init({
  modules: {
    auto: true, // If you need auto module detection (refer to Auto Module Detection).
    // Modules configuration check (optional). (refer to Module API)
  },
  // Other ESLint configurations
});

Method 2: Extends API

You can also use the configuration within a json or yaml files by extending from @fullstacksjs, the Auto Module Detection is enabled on this method

{
  "extends": ["@fullstacksjs"]
}

Auto Module Detection

When auto module detection is turned on, the configuration reads the metadata from your root "package.json" file and automatically adds the rules and plugins that are needed. It's enabled for the extends API, and you should set modules.auto to true when you use the init API.

Modules API

interface Modules {
    auto?: boolean; // Auto module detection
    react?: 'next' | 'raw'; // controls react, react-hooks, jsx/a11y plugins
    typescript?: { // controls typescript plugin
      parserProject?: string[] | string; // controls parserOptions.project
      resolverProject?: string[] | string // controls settings['import/resolver'].typescript.project
    };
    node?: boolean; // controls node plugin
    strict?: boolean; // controls strict plugin
    import?: boolean; // controls import plugin
    esm?: boolean; // controls esm plugin
    graphql?: boolean; // controls graphql plugin
    test?: boolean; // controls jest/vitest plugin
    cypress?: boolean; // controls cypress plugin
    storybook?: boolean; // controls storybook plugin
    tailwind?: boolean; // controls tailwindcss plugin
    next?: boolean; // controls next plugin
}

Typescript configuration

If you need more advanced typescript-eslint rule you need to specify modules.typescript.resolverProject.

module.exports = init({
  modules: {
    typescript: { resolverProject: "<PATH_TO_TSCONFIG>" }
  },
});

React/NextJS configuration

React/NextJS configuration should automatically work with Auto Module Detection, but if you need to have more control over the rules you can configure it through modules.react.

module.exports = init({
  modules: {
    react: true // for React/CRA/Vite
  },
});

and

module.exports = init({
  modules: {
    react: true,
    next: true // for NextJS
  },
});

Migration Guid

to v9

v9 does not have any breaking change, which means the current configuration you have should work without any problem, but in order to migrate to new Module API:

1. Move your configs to .eslintrc.js file.
2. Use init API.

   -module.exports = {
   -  extends: [
   -    "@fullstacksjs",
   -    "@fullstacksjs/eslint-config/esm",
   -    "@fullstacksjs/eslint-config/typecheck",
   -    "@fullstacksjs/eslint-config/graphql"
   -  ],
   -  "parserOptions": {
   -    "project": ["./tsconfig.eslint.json"]
   -  },
   -  "settings": {
   -    "import/resolver": {
   -      "typescript": {
   -        "project": ["./tsconfig.json"]
   -      },
   -    },
   -  },
   -  // your configuration
   -};
   +const { init } = require('@fullstacksjs/eslint-config/init');
   +
   +module.exports = init({
   +  modules: {
   +    auto: true,
   +    esm: true,
   +    graphql: true,
   +    typescript: {
   +      parserProject: ['./tsconfig.eslint.json'],
   +      resolverProject: ['./tsconfig.json'],
   +    },
   +  },
   +  // your configuration
   +});

What's included?

• @typescript-eslint/eslint-plugin
• eslint-plugin-import
• eslint-plugin-jest
• eslint-plugin-jest-formatting
• eslint-plugin-cypress
• eslint-plugin-jsx-a11y
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-simple-import-sort
• eslint-plugin-fp
• eslint-plugin-node
• eslint-plugin-promise
• eslint-plugin-storybook
• eslint-plugin-graphql
• eslint-config-next
• eslint-plugin-tailwindcss

That's all. Feel free to use 💛