Complete ESLint shareable config for beginners.
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
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
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
}
}
];
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
}
}
];
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
.
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
}
}
];
npm install -D eslint @phoenix35/eslint-config
// eslint.config.mjs
import extensionDefault from "@phoenix35/eslint-config/webextensions";
export default [
...extensionDefault,
{
rules: {
// your rules
}
}
];
npm install -D eslint @phoenix35/eslint-config
// eslint.config.mjs
import baseDefault from "@phoenix35/eslint-config";
export default [
...baseDefault,
{
rules: {
// your rules
}
}
];
Start coding. You're done here.