title: How do you format React Component props alphabetically on save?
body: <p>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).</p>
  <pre class="lang-js prettyprint-override"><code>// the items inside ButtonProps should be sorted alphabetically
  type ButtonProps = {
      name: string;
      id: string;
      onPress: () =&gt; void;
      disabled: boolean;
  }
  
  const Button = (props: ButtonProps) =&gt; {
      // this should also be sorted alphabetically
      const {name, id, onPress, disabled} = props;
  
      return &lt;&gt;My Prop&lt;/&gt;
  }
  </code></pre>
  <p>I tried <a href="https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md" rel="nofollow noreferrer">react/sort-prop-types</a> and <a href="https://eslint.org/docs/rules/sort-keys" rel="nofollow noreferrer">sort-keys</a> 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:</p>
  <pre class="lang-js prettyprint-override"><code>// .eslintrc.json
  {
    // ...
    &quot;rules&quot;: {
      &quot;react/sort-prop-types&quot;: [
        2,
          {
              &quot;callbacksLast&quot;: true,
              &quot;shorthandFirst&quot;: true,
              &quot;ignoreCase&quot;: false,
              &quot;noSortAlphabetically&quot;: false,
              &quot;reservedFirst&quot;: true
          }
      ],
      &quot;sort-keys&quot;: [&quot;error&quot;, &quot;asc&quot;, {&quot;caseSensitive&quot;: true, &quot;natural&quot;: false, &quot;minKeys&quot;: 2}], 
    }
  </code></pre>