@bonniernews/eslint-config

Basic ESLint rules used by Bonnier News. The configuration works both with CommonJS and ES6 modules, and the appropriate setup will be used by looking at the projects package.json type property.

For Node versions that support it (version 16 and above), the es2022 environment will also be activated. Otherwise es2021 will be used.

Note: As of version 3.X, this package is published as an ES Module. See the usage examples for how to use it in both ESM and CommonJS projects.

Table of contents

• @bonniernews/eslint-config
  • Table of contents
  • Usage
    • Configuring all rules
    • JavaScript configuration
    • TypeScript configuration
    • React configuration
    • Test configuration
    • Typed react configuration
    • Global ignores
    • Globals
  • Migrating from 2.X to 3.X
  • Migrating from 1.X to 2.X
  • Running eslint
  • Usage in an existing project
  • Usage with Prettier
  • Enable format on save
  • Changelog
  • Publishing a new version
  • License

Usage

Install eslint and @bonniernews/eslint-config:

npm install --save-dev eslint @bonniernews/eslint-config

Configuring all rules

Configures all rules, js, ts, tsx, jsx and test rules.

ESM - for projects with "type": "module" in package.json:

// eslint.config.js
import config from "@bonniernews/eslint-config";

export default config;

CommonJS - for projects without "type": "module":

// eslint.config.js
const { default: config } = await import("@bonniernews/eslint-config");

module.exports = config;

JavaScript configuration

// eslint.config.js
import config from "@bonniernews/eslint-config/js";

export default [ config ];

TypeScript configuration

// eslint.config.js
import config from "@bonniernews/eslint-config/ts";

export default [ config ];

React configuration

// eslint.config.js
import config from "@bonniernews/eslint-config/jsx";

export default [ config ];

Test configuration

Adds useful plugins and globals for testing with mocha-cakes-2 + chai.

For JavaScript tests:

// eslint.config.js
import config from "@bonniernews/eslint-config/test-js";

export default [ config ];

For TypeScript tests:

// eslint.config.js
import config from "@bonniernews/eslint-config/test-ts";

export default [ config ];

Typed react configuration

// eslint.config.js
import config from "@bonniernews/eslint-config/tsx";

export default [ config ];

Global ignores

To activate this config (in addition to other config(s), using it alone makes no sense), add the following:

// eslint.config.js
import ignores from "@bonniernews/eslint-config/ignores";

export default [
  ...allYourGoodConfigs,
  ignores,
  // your additional config
];

Globals

Globals for browsers, etc. that may be needed.

// eslint.config.js
import globals from "@bonniernews/eslint-config/globals";

export default [
  ...allYourGoodConfigs,
  { files: [ "assets/scripts/**/*.js" ], languageOptions: { globals: globals.browser } },
];

Migrating from 2.X to 3.X

Version 3.X is published as an ES Module (ESM).

For ESM projects using import

If your project has "type": "module" in package.json, and you're already using import, then you don't have to make any changes.

For CommonJS projects using require

If your project does not have "type": "module", you need to use dynamic import() to import an ESM module, which is an asynchronous function:

Before (2.X):

"use strict";

const config = require("@bonniernews/eslint-config");

module.exports = [
  ...config,
  { ignores: [ "dist/**" ] },
]

After (3.X):

const { default: config } = await import("@bonniernews/eslint-config");

module.exports = [
  ...config,
  { ignores: [ "dist/**" ] },
]

Migrating from 1.X to 2.X

2.X introduces eslint 9 which has a different configuration format. It is recommended to read the eslint migration guide.

A major change from eslint 8 is that only one eslint.config.js file will be used, placing a specific configuration file in a folder will not behave in the same way as in 8 where it would inherit the configuration from files from the root folder, and the new recommendation is to just have one eslint.config.js at the root of the repository.

One major change from eslint 8 is that in order for ignores to be global they need to be added in a single config at the root level. If you just use the @bonniernews/eslint-config you will have it included, but if you construct your own set of rules you need to add it manually to your config file, otherwise eslint will run on files in terraform directories and such.

The different rule sets have changed name and behaviour:

• @bonniernews/eslint-config will import configs and apply them to the respective targets
• @bonniernews/eslint-config/js config for js files
• @bonniernews/eslint-config/ts config for ts files
• @bonniernews/eslint-config/jsx config for jsx files
• @bonniernews/eslint-config/tsx config for tsx files
• @bonniernews/eslint-config/test-js config for test js files using mocha-cakes-2 and chai
• @bonniernews/eslint-config/test-ts config for test ts files using mocha-cakes-2 and chai
• @bonniernews/eslint-config/ignores global ignores

Running eslint

Run with:

npx eslint .

Usage in an existing project

• We advice to remove any husky hooks that uses libraries such as pretty-quick from your package.json
• Subsequently remove any use of pretty-quick if possible.
• Remove any previous use of sharable ESLint configs from package.json, i.e.:
  • eslint-config-airbnb
  • eslint-config-google
  • eslint-config-prettier
• Remove eslint-plugin-prettier from package.json
• If you get errors similar to the ones below, please update the eslint dependancy.
  • Definition for rule 'no-nonoctal-decimal-escape' was not found
  • Definition for rule 'no-unsafe-optional-chaining' was not found
• If you still have issues; try updating npm (if you use nvm nvm install-latest-npm) & prettier as-well
• Remove any 'eslint-disable-line no-unused-expressions' directives added because of chai assertions, they are not needed anymore (eslint-plugin-chai-friendly is used in test).
• Remove any globals and special rules related to mocha-cakes-2 in your test configuration, they already exist in the @bonniernews/eslint-config/test-js and @bonniernews/eslint-config/test-ts configs.

Once you complete the steps above run the following:

npx eslint . --fix

Usage with Prettier

If you want to use Prettier, run it before eslint. ESLint should be the final judge, i.e. run:

npx prettier --write .
npx eslint . --fix

This will format the entire code base according to the rules of Prettier and the config.

Enable format on save

• Visual Studio Code

Changelog

Can be found here.

Publishing a new version

We automatically publish to both NPM and GitHub when you bump the version in package.json

License

Released under the MIT license.