prettier-plugin-vertical-align

Align object properties and interface members vertically for JS/TS code.

Example

// input
const a = {
  x: 1,
  bcd: 2,
}

interface Foo {
  x: number
  bcd: number
}

becomes

// output
const a = {
  x:   1,
  bcd: 2,
};

interface Foo {
  x:   number;
  bcd: number;
}

Installation

Add plugins: ["@huggingface/prettier-plugin-vertical-align"] to your .prettierrc file.

Configuration

alignInGroups

Aligns properties in groups. Default is "never". You can set it to "always" to always align properties in groups in your .prettierrc.

{
  "alignInGroups": "always"
}

If enabled, it will create groups inside an object, based on blank lines or multiline values. For example:

const x = {
	group1:  "a",
	group1b: "b",

	group2:     "a",
	// some comment between two lines
	group2bbbb: "b",

	group3:   "a",
	group3bb: { 
		x: 1,
	},
	group4: "b", // new group due to multiline value above 
};