@phoenix35/eslint-config

Complete ESLint shareable config for beginners.

Preliminary thoughts

What do you prefer?

/* curly */
while (true) { // mandatory curly braces for multi-line
  if (condition) // optional curly braces for single-line
    doSomething();
  else
    doSomethingElse();
}
// or
while (true) { // mandatory curly braces for all blocks
  if (condition) {
    doSomething();
  } else {
    doSomethingElse();
  }
}

/* @stylistic/js/quotes */
"Hello, world!"; // double quotes
// or
'Hello, world!'; // single quotes

/* @stylistic/js/nonblock-statement-body-position */
if (condition)
  doStuff(); // statement below the control
// or
if (condition) doStuff(); // statement beside the control

How to use

Make sure your node version is up-to-date.
LTS version is 20.16.0 right now, this config will not work with anything below.

Make an "engines" field in the package.json of your project

  "engines": {
    "node": ">= 20.16.0"
  }

The version should be >= LTS or a later node.js version you use.

Create a eslint.config.mjs file in the same directory as your package.json.

// eslint.config.mjs
// import line

export default [
  ...importedDefault,
  {
    rules: {
      // curly braces for all blocks
      /* "curly": [ "error", "all" ], /**/
      // single quotes
      /* "@stylistic/js/quotes": [ "error", "single", { avoidEscape: true } ], /**/
      // statement beside the control
      /* "@stylistic/js/nonblock-statement-body-position": [ "error", "beside" ], /**/
    }
  }
];

Uncomment the line for each rule you want to follow, by removing the /* at the beginning of said line.
The exact content needs to be adapted to the type of project

- Browser project

You need to install the regular package

npm install -D eslint @phoenix35/eslint-config

// eslint.config.mjs
import browserDefault from "@phoenix35/eslint-config/browser";

export default [
  ...browserDefault,
  {
    rules: {
      // your rules
    }
  }
];

- Node.js project

You need to install the full package with optional dependencies

npm install -D eslint
npm install -D --include=optional @phoenix35/eslint-config

// eslint.config.mjs
import nodeDefault from "@phoenix35/eslint-config/node";

export default [
  ...nodeDefault,
  {
    rules: {
      // your rules
    }
  }
];

- Fullstack project

You need to install the package with optional dependencies (see Node.js project)

Have a eslint.config.mjs file following "browser project" in the parent directory containing browser-specific code and another following "node project" next to your top-level package.json.

- Userscript

Works for Greasemonkey and Violentmonkey

npm install -D eslint @phoenix35/eslint-config

// eslint.config.mjs
import monkeyDefault from "@phoenix35/eslint-config/userscript";

export default [
  ...monkeyDefault,
  {
    rules: {
      // your rules
    }
  }
];

- WebExtension project

npm install -D eslint @phoenix35/eslint-config

// eslint.config.mjs
import extensionDefault from "@phoenix35/eslint-config/webextensions";

export default [
  ...extensionDefault,
  {
    rules: {
      // your rules
    }
  }
];

- A Polymorphic library

npm install -D eslint @phoenix35/eslint-config

// eslint.config.mjs
import baseDefault from "@phoenix35/eslint-config";

export default [
  ...baseDefault,
  {
    rules: {
      // your rules
    }
  }
];

Now what

Start coding. You're done here.