What is this?

This plugin / rule will align your assignments in jsx:

from

<CarComponent
    company = "Tesla"
    model = "Model 3"
    estimatedRange = "300 miles"
/>

to

<CarComponent
    company        = "Tesla"
    model          = "Model 3"
    estimatedRange = "300 miles"
/>

Installation

You'll first need to install ESLint:

$ npm install eslint --save-dev

Next, install eslint-plugin-jsx-align:

$ npm install eslint-plugin-jsx-align --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-jsx-align globally.

Usage

Add eslint-plugin-jsx-align to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "jsx-align"
    ],
    "rules": {
        "jsx-align/align-jsx-assignments" : "error"
    }

}

You might have to update the no-multi-spaces rule to allow multiple spaces in front of =:

{
    "rules": {
        "no-multi-spaces": ["error", {"exceptions": {"ImportDeclaration": true}}]
    }
}