eslint-config-acme

    1.4.0 • Public • Published

    banner

    ESLint + Prettier Config for React (Next.js)

    eslint-config-acme

    Shareable config for ESLint and Prettier, aimed primarily to be used in Next.js React projects.

    Overview

    This configuration extends airbnb ESLint config, with airbnb/hooks enabled, and Prettier integration via the ESLint plugin. Additionally, a few default rules are overriden to provide a more relaxed development experience in Next.js applications out of the box.

    The goal of this configuration is to get code linting and formatting up and running as quickly as possible in a modern development environment, without sacrificing cleanliness and readability, and having to configure ESLint + Prettier from scratch every time.

    Installation

    To install the package, run:

    $ npm install -D eslint-config-acme

    This will install the shared config, as well as its peer dependencies:

    • eslint
    • eslint-config-airbnb
    • eslint-config-prettier
    • eslint-import-resolver-alias
    • eslint-plugin-import
    • eslint-plugin-jsx-a11y
    • eslint-plugin-prettier
    • eslint-plugin-react
    • eslint-plugin-react-hooks
    • eslint-plugin-simple-import-sort
    • eslint-plugin-tailwindcss
    • prettier
    • prettier-plugin-tailwindcss

    NOTE: if you are on NPM <7, you will need to install these manually:

    $ npx install-peerdeps -D eslint-config-acme

    Usage

    To start using this shared config, add eslint-config-acme (or just acme) to either your package.json:

    // package.json
    {
      "eslintConfig": {
        "extends": ["acme"]
      }
    }

    or the .eslintrc file:

    // .eslintrc
    {
      "extends": ["acme"]
    }

    Import Alias

    This config provides a default import alias resolver for eslint-plugin-import to support shorthand imports of local modules:

    {
      "import/resolver": {
        "alias": {
          "map": [["@", "./src"]],
          "extensions": [".js", ".jsx"]
        }
      }
    }

    This will allow you to write imports like this anywhere in your code:

    import Foo from '@/components/foo';

    instead of relative paths:

    import Foo from '../../components/foo';

    when using absolute imports and module path aliases in Next.js.

    This can also be overriden in your local .eslintrc file, if needed:

    // .eslintrc
    {
      "extends": ["acme"],
      "settings": {
        "import/resolver": {
          "alias": {
            "map": [["@", "./lib"]],
            "extensions": [".js"]
          }
        }
      }
    }

    Prettier

    This config supports Prettier integration out of the box. Rules that may conflict with ESLint are disabled via recommended configuration in eslint-plugin-prettier.

    If you wish to override any Prettier options, you can do so by specifying them under prettier/prettier rule in your ESLint config file. For example:

    // .eslintrc
    {
      "extends": ["acme"],
      "rules": {
        "prettier/prettier": [
          "error",
          {
            "printWidth": 90
          }
        ]
      }
    }

    Make sure that these rules match the options specified in your .prettierrc file.

    Adding Scripts

    Add the following to your package.json file to define a script that will lint all known files and output the results:

    // package.json
    {
      "scripts": {
        "lint": "eslint --ignore-path .gitignore ."
      }
    }

    To fix all automatically-fixable issues, you can add the following script to your package.json as well (in addition to above):

    // package.json
    {
      "scripts": {
        "lint:fix": "eslint --ignore-path .gitignore --fix ."
      }
    }

    Note that you can update the above scripts as you see fit, this is just an example. See ESLint CLI reference for more details.

    Note on Next.js Link component

    There is a known issue with Next.js's decision to construct internal links by nesting an href-free <a> tag inside of a <Link> component. Next.js is also aware of the issue and has an RFC working towards a solution.

    Because of this, the standard usage of Next.js <Link> component will result in an error for the jsx-a11y/anchor-is-valid rule. Until the Next.js API can be updated to a more standard pattern, eslint-config-acme overrides this rule as suggested in this issue:

    {
      "jsx-a11y/anchor-is-valid": [
        "error",
        {
          "components": ["Link"],
          "specialLink": ["hrefLeft", "hrefRight"],
          "aspects": ["invalidHref", "preferButton"]
        }
      ]
    }

    Please be aware, however, that this workaround also disables the check for href attribute altogether for regular <a> elements. Keep that in mind to ensure you're not breaking accessibility.

    (check out @axe-core/react if you'd like an additional layer of accessibility checking)

    License

    Licensed under MIT License.

    Install

    npm i eslint-config-acme

    DownloadsWeekly Downloads

    352

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    10.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • mykhaylo