eslint-plugin-alignment

[!WARNING] This plugin is still in beta, and some rules might not work as expected.

Format and align your objects, enums, interfaces, and type literals for better readability.

const person = {
  name: "Connor",
  age: 26,
  jobTitle: "Musician",
  city: "New York",
  country: "USA",
  favoriteColor: "Blue",
  hobbies: ["Reading", "Cooking", "Hiking"],
  getSomething: () => "something",
};

const person = {
  name /*         */: "Connor",
  age /*          */: 26,
  jobTitle /*     */: "Musician",
  city /*         */: "New York",
  country /*      */: "USA",
  favoriteColor /**/: "Blue",
  hobbies /*      */: ["Reading", "Cooking", "Hiking"],
  getSomething /* */: () => "something",
};

enum DaysOfWeek {
  MONDAY = "Monday",
  TUESDAY = "Tuesday",
  WEDNESDAY = "Wednesday",
  THURSDAY = "Thursday",
  FRIDAY = "Friday",
  SATURDAY = "Saturday",
  SUNDAY = "Sunday",
}

enum DaysOfWeek {
  MONDAY /*   */ = "Monday",
  TUESDAY /*  */ = "Tuesday",
  WEDNESDAY /**/ = "Wednesday",
  THURSDAY /* */ = "Thursday",
  FRIDAY /*   */ = "Friday",
  SATURDAY /* */ = "Saturday",
  SUNDAY /*   */ = "Sunday",
}

type ContactInfo = {
  name: string;
  email: string;
  phone?: string;
  address?: string;
};

interface User {
  id: number;
  username: string;
  email: string;
  age: number;
}

// prettier-ignore
type ContactInfo = {
  name /*    */: string;
  email /*   */: string;
  phone /*  */?: string;
  address /**/?: string;
};

// prettier-ignore
interface User {
  id /*      */: number;
  username /**/: string;
  email /*   */: string;
  age /*     */: number;
}

Installation

Yarn

yarn add -D eslint-plugin-alignment

Usage

Add alignment to your list of plugins and extend the recommended configuration.

{
  "extends": "plugin:alignment/recommended",
  "plugins": ["alignment"]
}

Rules