prettier-plugin-object-multiline

A Prettier plugin that enforces one property per line in all object literals, regardless of the printWidth setting.

🚀 Installation

npm install --save-dev prettier prettier-plugin-object-multiline

Then add the plugin to your Prettier configuration:

.prettierrc

{
  "plugins": ["prettier-plugin-object-multiline"],
}

.prettierrc.js

module.exports = {
  plugins: ["prettier-plugin-object-multiline"],
};

📝 Usage

Once installed and configured, the plugin will automatically format all object literals with one property per line. No additional configuration options are needed!

Example

Input:

const shortObject = {
  a: 1,
  b: 2,
  c: 3,
};
const longObject = {
  propertyOne: "value",
  propertyTwo: "another value",
  propertyThree: "yet another value",
};

Output:

const shortObject = {
  a: 1,
  b: 2,
  c: 3,
};
const longObject = {
  propertyOne: "value",
  propertyTwo: "another value",
  propertyThree: "yet another value",
};

Nested Objects

The plugin also formats nested objects correctly:

// Input
const nestedObject = {
  a: 1,
  b: {
    c: 2,
    d: 3,
  },
  e: 4,
};

// Output with this plugin
const nestedObject = {
  a: 1,
  b: {
    c: 2,
    d: 3,
  },
  e: 4,
};

// Default Prettier output (without this plugin) might be:
// const nestedObject = { a: 1, b: { c: 2, d: 3 }, e: 4 };
// or
// const nestedObject = {
//   a: 1, b: { c: 2, d: 3 }, e: 4
// };
// depending on printWidth and object size

Complex Example

The plugin handles complex, deeply nested objects with consistency:

// Input
const config = {
  server: {
    port: 3000,
    host: "localhost",
    options: {
      timeout: 1000,
      secure: true,
    },
  },
  logging: {
    level: "info",
    format: "json",
  },
};

// Output with this plugin
const config = {
  server: {
    port: 3000,
    host: "localhost",
    options: {
      timeout: 1000,
      secure: true,
    },
  },
  logging: {
    level: "info",
    format: "json",
  },
};

⚙️ How It Works

This plugin overrides the default object expression printer in Prettier to always format objects with one property per line, regardless of the object's length or the printWidth setting.

It uses Prettier's own babel and estree plugins as a foundation and extends them to modify the object expression formatting behavior.

Why Use This Plugin?

Consistency: Ensures all object properties are formatted in the same way, regardless of object size
Readability: Makes objects easier to read, with each property on its own line
Cleaner Git Diffs: When objects change, Git diffs are cleaner with one property per line
Simplified Editing: Makes it easier to add, remove, or reorder properties
Zero Configuration: Works out of the box with no additional setup

Compatibility

This plugin:

Requires Prettier v3.0.0 or newer
Is fully compatible with ES Modules
Requires Node.js 18.0.0 or newer
Adds trailing commas to all object properties

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

For more detailed information, please see the CONTRIBUTING.md file.

Testing

This plugin uses Node.js built-in test runner. To run the tests:

npm test

License

MIT

alexkates/prettier-plugin-object-multiline