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}], 
  }