@putout/plugin-destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

(c) MDN

🐊Putout plugin adds ability to use destructuring on variable declarations.

Install

npm i @putout/plugin-destructuring

Rules

• ✅ apply-object;
• ✅ apply-array;
• ✅ convert-object-to-array;
• ✅ extract-properties;
• ✅ remove-useless-object;
• ✅ remove-useless-arguments;
• ✅ remove-useless-variables;
• ✅ split-nested;
• ✅ split-call;
• ✅ merge-properties;

Config

{
    "rules": {
        "destructuring/apply-object": "on",
        "destructuring/apply-array": "on",
        "destructuring/convert-object-to-array": "on",
        "destructuring/extract-properties": "on",
        "destructuring/remove-useless-object": "on",
        "destructuring/remove-useless-arguments": "on",
        "destructuring/remove-useless-variables": "on",
        "destructuring/split-nested": "on",
        "destructuring/split-call": "on",
        "destructuring/merge-properties": "on"
    }
}

apply-array

❌ Example of incorrect code

const first = array[0];

✅ Example of correct code

const [first] = array;

apply-object

❌ Example of incorrect code

const name = user.name;

hello = world.hello;

✅ Example of correct code

const {name} = user;

({hello} = world);

remove-useless-object

Check out in 🐊Putout Editor.

❌ Example of incorrect code

const {maxElementsInOneLine} = {
    options,
};

✅ Example of correct code

const {maxElementsInOneLine} = options;

convert-object-to-array

Check out in 🐊Putout Editor.

❌ Example of incorrect code

const {0: a, 1: b} = c;

✅ Example of correct code

const [a, b] = c;

split-nested

• Don't use nested destructuring on data that comes from any external data sources (such as REST APIs, GraphQL endpoints or files).
• Don't use nested destructuring on function arguments that have long or complicated signatures.

(c) Destructuring in JavaScript: the not so good parts

🐊Putout plugin adds ability to split nested destructuring.

❌ Example of incorrect code

const {
    a: {
        b,
    },
    a: {
        b: x,
    },
} = c;

function f({a}) {
    const {b} = a;
    console.log(b);
}

✅ Example of correct code

const {a} = c;
const {b, b: x} = a;

function f({a}) {
    const {b} = a;
    console.log(b);
}

split-call

❌ Example of incorrect code

console.log('hello')({uid} = path.scope);
console.log('hello')[uid] = path.scope;

✅ Example of correct code

console.log('hello');
({uid} = path.scope);

console.log('hello');
[uid] = path.scope;

merge-properties

Checkout in 🐊Putout Editor.

❌ Example of incorrect code

const {one} = require('numbers');
const {two} = require('numbers');

({from} = data);
({to} = data);
({names} = data);

✅ Example of correct code

const {one, two} = require('numbers');

({
    from,
    to,
    names,
} = data);

remove-useless-arguments

❌ Example of incorrect code

onIfStatement({
    push,
    generate,
    abc,
    helloworld,
});

function onIfStatement({push}) {}

✅ Example of correct code

onIfStatement({
    push,
});

function onIfStatement({push}) {}

remove-useless-variables

❌ Example of incorrect code

function hi(c) {
    const {a, b} = c;
}

✅ Example of correct code

function hi({a, b}) {}

extract-properties

Equal Deep

❌ Example of incorrect code

const {replaceWith} = a.operate;
const {isIdentifier} = a.types;

✅ Example of correct code

const {operator, types} = a;

const {replaceWith} = operator;
const {isIdentifier} = types;

Not Equal Deep

❌ Example of incorrect code

const {replaceWith} = a;
const {isIdentifier} = a.types;

✅ Example of correct code

const {replaceWith, types} = a;
const {isIdentifier} = types;

License

MIT