How do you format React Component props alphabetically on save?

Question

How does one format props and typescript definitions alphabetically on save? Ideally it is some configuration for the whole project as opposed to a VSCode plugin (though I'm open a plugin too at this point).

// the items inside ButtonProps should be sorted alphabetically
type ButtonProps = {
    name: string;
    id: string;
    onPress: () => void;
    disabled: boolean;
}

const Button = (props: ButtonProps) => {
    // this should also be sorted alphabetically
    const {name, id, onPress, disabled} = props;

    return <>My Prop</>
}

I tried react/sort-prop-types and sort-keys but I really don't know what I'm doing with eslint. It still doesn't format alphabetically on save. My eslint config is below:

// .eslintrc.json
{
  // ...
  "rules": {
    "react/sort-prop-types": [
      2,
        {
            "callbacksLast": true,
            "shorthandFirst": true,
            "ignoreCase": false,
            "noSortAlphabetically": false,
            "reservedFirst": true
        }
    ],
    "sort-keys": ["error", "asc", {"caseSensitive": true, "natural": false, "minKeys": 2}], 
  }

Answer 1

You can use a VSCode extension called Sort lines. It doesn't do it on save though but all you have to do is highlight your props, press cmd + shift + p for Mac or ctrl + shift + p for Windows to open the Command Palette and select Sort lines.

Answer 2

I tried eslint-plugin-sort-keys-fix in vscode with proper settings mentioned in https://www.npmjs.com/package/eslint-plugin-sort-keys-fix

I did not use sort-keys but just eslint-plugin-sort-keys-fix