Object properties must be on a new line with ESLint

let's say I have the following variable:

const myObject = { property1: 'value1', property2: 'value2', property3: 'value3' };

I want to enforce an eslint rule so that if an object has a minimum of three properties, then each property must go on a new line, such as below:

const myObject = {
  property1: 'value1',
  property2: 'value2',
  property3: 'value3',
};

However, if I use the eslint rule object-curly-newline, it appears that the following is acceptable, and this is what get's automatically formatted when eslint --fix runs:

const myObject = {
  property1: 'value1', property2: 'value2', property3: 'value3',
};

How can I enforce an eslint rule that makes sure that each new property is on a new line? Thanks!

Try this:

"object-curly-newline": ["error", { "multiline": true }],
"object-curly-spacing": ["error", "always"]

To Enforce an Eslint rule for an object with a minimum number of properties where each property must go on a new line, you need to use the object-curly-newline along with the multiline and minProperties options.

Here is an example configuration in which ESLint will enforce that objects with at least three properties have each property on a new line.

{
  "rules": {
    "object-curly-newline": ["error", {
      "ObjectExpression": { "multiline": true, "minProperties": 3 },
    }]
  }
}

Could be useful too-

The above rule is not limited to object literals only. There are a few more options also mentioned in the documentation where this rule can be enforced for destructuring assignments, and import and export properties as well.

Here is the complete configuration example in which ESLint will enforce the object-curly-newline rule for:

• Object literals with at least three properties
• Destructuring assignments that involve objects
• Import statements with at least three imported properties
• Export statements with at least three exported properties

{
  "rules": {
    "object-curly-newline": ["error", {
      "ObjectExpression": { "multiline": true, "minProperties": 3 },
      "ObjectPattern": { "multiline": true },
      "ImportDeclaration": { "multiline": true, "minProperties": 3 },
      "ExportDeclaration": { "multiline": true, "minProperties": 3 }
    }]
  }
}

An example

As per the above-written rule, if you have an example code like this-

const obj = { p1: 'v1', p2: 'v2', p3: 'v3' };
const { k1, k2, k3 } = obj;
import { i1, i2, i3 } from './somePath';
export { e1, e2, e3 };

ESLint should enforce the above written object-curly-newline rule for each of these cases and suggest the following fix-

const obj = {
  p1: 'v1',
  p2: 'v2',
  p3: 'v3',
};
const {
  k1,
  k2,
  k3,
} = obj;
import {
  i1,
  i2,
  i3,
} from './somePath';
export {
  e1,
  e2,
  e3,
};

You can read more about each option in detail here.

I hope this helps.

You are looking for https://eslint.org/docs/latest/rules/object-curly-newline#multiline mixed with https://eslint.org/docs/latest/rules/object-curly-newline#minproperties

In your case you need

object-curly-newline: ["error", { "multiline": true, "minProperties": 3 }]

You can use object-curly-newline by setting option multiline to true.

For Example in .eslintrc, it would be written as :

{
  "rules": {
    "object-curly-newline": ["error", {
      "multiline": true,
      "consistent": true
    }]
  }
}

Examples:

The above code will throw an error in this type of code line :

const dummyObject = { p1: 'v1', p2: 'v2', p3: 'v3' };

The above code will work correctly when above dummyObject is written as:

const dummyObject = {
  p1: 'v1',
  p2: 'v2',
  p3: 'v3',
};

I prefer to use prettier for this purpose instead of using the option available by eslint in my projects.

That being said, this will not work out of the box and conflict with eslint. You must add the following to your rules in the .eslintrc.js file:

'object-curly-newline': 0,

Refer this section here in the article - I think it will help you achieve your result.

If you have a multiline object that you’d like to join up into a single line:

const user = {
  name: "John Doe",
  age: 30,
};

// All you need to do is remove the newline after {:

const user = {  name: "John Doe",
  age: 30
};

// then run Prettier:

const user = { name: "John Doe", age: 30 };

// If you’d like to go multiline again, add in a newline after {:

const user = {
 name: "John Doe", age: 30 };

// run Prettier:

const user = {
  name: "John Doe",
  age: 30,
};

The rationale is that I do not need to do much tinkering as that needed in the eslint option.

https://prettier.io/docs/en/rationale.html#multi-line-objects