Enforce a visual complexity of the code
npm install eslint-plugin-visual-complexity



A custom eslint rule to check code complexity without optional chaining.
For example, the following function has a complexity 4 by the core eslint rule:
``js`
function f(a) {
return a?.b?.c?.d;
}
It means the function is equivalent to:
`js`
function f(a) {
if (condition) {
if (condition) {
return a;
} else if (condition) {
return b;
} else {
return c;
}
} else {
return d;
}
}
But visually they are quite different.
This plugin extends eslint complexity rule and
kicks out optional chaining during calculation. It outputs 1 for the first function and 4 for the second one.
> There was a request to provide a built-in option to disable optional chaining counting, but it was discarded.
1. Install the package:
``
npm install -D eslint-plugin-visual-complexity
2. Import and use the plugin in eslint.config.js:`
js
import visualComplexity from "eslint-plugin-visual-complexity";
export default [
{
plugins: {
visual: visualComplexity,
},
rules: {
"visual/complexity": ["error", { max: 6 }],
complexity: 0, // <- disable core complexity rule
}
}
// ...
]
``