How to Write a Custom ESLint Rule for Interface Properties Alignment

In large TypeScript projects, ensuring code consistency is vital for maintainability and readability. One common requirement is the alignment of interface properties, especially when there are multiple properties with type annotations. Misaligned properties can make code harder to read and review. In this article, we’ll create a custom ESLint rule to enforce alignment of interface properties in TypeScript interfaces

What This Rule Will Do

Our custom rule will ensure that:

• Properties in an interface are aligned so that their type annotations (:) are in the same column.

• Developers can specify additional padding between property names and the type annotation.

Configuration

We’ll call this rule interface-properties-alignment. It will accept a single option, padding, to define the extra spaces between the longest property name and the colon (:).

"@nx/workspace-interface-properties-alignment": [
    "warn",
    { "padding": 2 }
]

Implementation

Here’s the implementation of the ESLint rule:

1. Define Rule Metadata