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.
| Turn this | Into this |
|---|---|
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-alignmentUsage
Add alignment to your list of plugins and extend the
recommended configuration.
{
"extends": "plugin:alignment/recommended",
"plugins": ["alignment"]
}Rules
| Name | Description | Fixable (using --fix) |
|---|---|---|
alignment/align-objects |
Aligns values inside plain JS object expressions | Yes |
alignment/align-enums |
Aligns members of TS enums | Yes |
alignment/align-types |
Aligns properties of TS interfaces and type literals | Yes |