Package detail

@anolilab/eslint-config

anolilab2.4kMIT15.0.3

ESLint shareable config for the Anolilab JavaScript style guide.

anolilab, lint, styleguide, eslint, eslintconfig, eslint-config, config, javascript, es2015, es2016, es2017, es2018, es2020, globals, eslint-import-resolver-node, eslint-import-resolver-typescript, eslint-plugin-antfu, eslint-plugin-compat, eslint-plugin-es, eslint-plugin-eslint-comments, eslint-plugin-html, eslint-plugin-i, eslint-plugin-jsonc, eslint-plugin-markdown, eslint-plugin-mdx, eslint-plugin-no-loops, eslint-plugin-no-secrets, eslint-plugin-no-use-extend-native, eslint-plugin-promise, eslint-plugin-regexp, eslint-plugin-simple-import-sort, eslint-plugin-sonarjs, eslint-plugin-toml, eslint-plugin-unicorn, eslint-plugin-yml, eslint-plugin-array-func, eslint-plugin-ava, eslint-plugin-babel, eslint-plugin-cypress, eslint-plugin-jest, eslint-plugin-jest-async, eslint-plugin-jest-dom, eslint-plugin-jest-formatting, eslint-plugin-playwright, eslint-plugin-jsdoc, eslint-plugin-jsx-a11y, eslint-plugin-n, eslint-plugin-no-unsanitized, eslint-plugin-prefer-object-spread, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-react-redux, eslint-plugin-storybook, eslint-plugin-tailwindcss, eslint-plugin-testing-library, eslint-plugin-tsdoc, eslint-plugin-etc, eslint-plugin-you-dont-need-lodash-underscore, eslint-plugin-you-dont-need-momentjs

readme

Shareable ESLint config

^{Daniel Bannert's open source work is supported by the community on GitHub Sponsors}

Purpose

Our package serves as a valuable resource for JavaScript/Typescript-based projects, offering composable ESLint configurations. It encompasses a range of features, including performance optimization and the flexibility to extend pre-defined base configurations.

Tailored Configuration for Workspaces: With this package, each workspace within your monorepo gains the ability to have its own customized ESLint configuration. This ensures that individual projects can maintain their specific requirements while still adhering to the overall guidelines.
Configurability at Your Fingertips: Crafting your workspace's ESLint configuration is a breeze, thanks to the seamless composition of pre-defined base configurations. This empowers you to tailor the settings to suit your project's unique needs, without starting from scratch.
Streamlined Convenience: Say goodbye to the hassle of installing plugins for each workspace. Our package integrates @rushstack/eslint-patch, eliminating the need for repetitive plugin installations. Enjoy peace of mind as you focus on your work, knowing that the necessary plugins are automatically included.
Enhanced Efficiency: We've optimized the package's performance by intelligently enabling plugins based on file naming conventions. This streamlined approach ensures that your ESLint checks run efficiently, targeting the relevant files and maximizing productivity.

In summary, our package provides comprehensive and adaptable ESLint configurations for JavaScript and Typescript projects. It empowers you to achieve code quality while minimizing overhead and maximizing productivity throughout your workspaces.

Highlights

Zero-config, but configurable when needed.
Enforces readable code, because you read more code than you write.
No need to specify file paths to lint as it lints all JS/TS files except for commonly ignored paths.
Config overrides per files/globs.
TypeScript supported by default, if typescript was installed.
Includes many useful ESLint plugins, like unicorn, import and more.
Automatically enables rules based on the engines field in your package.json.
Specify indent and semicolon preferences easily without messing with the rule config.
Disables rules that conflict with Prettier.
Typesafe, because it's written in TypeScript and uses eslint-define-config to define the config.

Install

To install this config, run the following command.

Note: eslint-plugin-import@npm:eslint-plugin-i is needed to use the correct package.

npm install --save-dev eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest @babel/core @eslint-types/import @eslint-types/deprecation @eslint-types/jsdoc @eslint-types/typescript-eslint @eslint-types/unicorn

pnpm add -D eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest @babel/core @eslint-types/import @eslint-types/deprecation @eslint-types/jsdoc @eslint-types/typescript-eslint @eslint-types/unicorn

yarn add -D eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest @babel/core @eslint-types/import @eslint-types/deprecation @eslint-types/jsdoc @eslint-types/typescript-eslint @eslint-types/unicorn

Usage

If you don’t have a .eslintrc.js, we will create the file for you after installing @anolilab/eslint-config.

If you already have a .eslintrc.js, then you can extend the .eslintrc.js, with @anolilab/eslint-config.

Note: If the script detects an existing .eslintrc.js file, it will not overwrite it.

Note: It can happen that the postinstall script don't run, then you have to add the .eslintrc.js manually, or you will use bin command ./node_modules/bin/anolilab-eslint-config to generate it.

Note: Our default export contains all of our ESLint rules, including ECMAScript 6+. @anolilab/eslint-config use the ecmaVersion:2021 as default.

To change this configuration, change env: { es2021: false, then active you needed env } same for, parserOptions: { "ecmaVersion": 2021 change the version }

/** @ts-check */
const { defineConfig } = require('@anolilab/eslint-config/define-config');

/// <reference types="@eslint-types/unicorn" />
/// <reference types="@eslint-types/typescript-eslint" />
/// <reference types="@eslint-types/jsdoc" />
/// <reference types="@eslint-types/import" />
/// <reference types="@eslint-types/deprecation" />

module.exports = defineConfig({
    env: {
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    extends: ["@anolilab/eslint-config"],
    globals: {
        // Your global variables (setting to false means it's not allowed to be reassigned)
        //
        // myGlobal: false
    },
    root: true,
    rules: {
        // Customize your rules
    },
});

For more advanced use cases see the example configurations for Node, TypeScript, React or Prettier.

Note: @anolilab/eslint-config will handle the configuration for almost all eslint-plugins / eslint-configs automatically. With this you only need to install the needed plugins/configs for TypeScript or React and you done.

TypeScript

npm install --save-dev typescript

Please extend the .eslintrc.js file with the correct tsconfig.js path if you have a custom path.

module.exports = {
    parserOptions: {
        project: "./tsconfig.eslint.json",
    },
};

For projects that use TypeScript and want additional rules that require type information (rules using type information take longer to run).

Extend the .eslintrc.js file:

/** @ts-check */
const { defineConfig } = require('@anolilab/eslint-config/define-config');

/// <reference types="@eslint-types/unicorn" />
/// <reference types="@eslint-types/typescript-eslint" />
/// <reference types="@eslint-types/jsdoc" />
/// <reference types="@eslint-types/import" />
/// <reference types="@eslint-types/deprecation" />

module.exports = defineConfig({
    env: {
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    extends: ["@anolilab/eslint-config", "@anolilab/eslint-config/typescript-type-checking"],
    globals: {
        // Your global variables (setting to false means it's not allowed to be reassigned)
        //
        // myGlobal: false
    },
    root: true,
    rules: {
        // Customize your rules
    },
});

Tip: Run eslint with the TIMING=1 to identify slow rules.

TIMING=1 eslint . --ext .ts,.tsx

This is useful to identify rules that are slow because they require type information.

React

You need to have "react" and "react-dom" installed.

npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks

yarn add -D eslint-plugin-react eslint-plugin-react-hooks

pnpm add -D eslint-plugin-react eslint-plugin-react-hooks

Or for the use of TypeScript in react install "typescript" as a dev dependency.

Please extend the .eslintrc.js file with the correct tsconfig.js path if you have a custom path.

module.exports = {
    parserOptions: {
        project: "./tsconfig.eslint.json",
    },
};

Or for the use of .jsx files install "@babel/plugin-syntax-jsx" as a dev dependency.

npm install --save-dev babel @babel/plugin-syntax-jsx

yarn add -D babel @babel/plugin-syntax-jsx

pnpm add -D babel @babel/plugin-syntax-jsx

In your babel.config.js file add the plugin.

const babelPluginSyntaxJSX = require("@babel/plugin-syntax-jsx");

module.exports = {
  plugins: [
    [
      babelPluginSyntaxJSX,
      {
        pragma: "React.createElement",
        pragmaFrag: "React.Fragment",
      },
    ],
  ],
};

MDX

npm install --save-dev eslint eslint-plugin-mdx

For more information about missing or optional to install rules see the eslint console output.

Config

You can configure @anolilab/eslint-config options with your package.json file.

Add this property to your package.json:

{
    anolilab: {
        "eslint-config": {
            // options
        },
    },
}

indent

Type: number

Default: 4

It will throw an error if the value is not numeric.

plugin

Type: object -> key: string value: boolean

Disable a plugin in your package.json config to turn it off globally in your project.

Example using package.json:

{
    "anolilab": {
        "eslint-config": {
            "plugin": {
                "unicorn": false
            }
        }
    }
}

warn_on_unsupported_typescript_version

Type: boolean

Default: undefined

To disable the warning, set the value to false.

{
    "anolilab": {
        "eslint-config": {
            "warn_on_unsupported_typescript_version": false
        }
    }
}