Sorting TypeScript types by required properties first

Question

Can anyone recommend a plugin or ESLint rule that can automatically sort types by assuming required fields come first, followed by optional fields?

Here's an example before:

type TExampleSorting = {
  title?: string;
  value?: number;
  text: string;
}

And here's the desired order after sorting:

type TExampleSorting = {
  text: string; <--- required first
  title?: string;
  value?: number;
};

Is there a way to achieve this automatic sorting once the TSX file is saved?

If you have any suggestions or solutions, I would greatly appreciate it!

Answer 1

Answer №1

The eslint-plugin-typescript-sort-keys plugin enables you to easily sort alphabetically and make certain keys required.

To learn how to configure this plugin, visit the GitHub page - specifically check out typescript-sort-keys/interface and typescript-sort-keys/string-enum

If you are using VSCode, you have the option to enable automatic fixes upon saving your file.

Create a .vscode folder in the root of your project and add a settings.json file with the following configuration:

{
 "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
 },
 "eslint.validate": ["javascript"]
}

You can also refer to Digital Ocean's guide for a detailed explanation on enabling automatic ESLinting on save.

Answer 2

The eslint-plugin-typescript-sort-keys plugin enables you to easily sort alphabetically and make certain keys required.

To learn how to configure this plugin, visit the GitHub page - specifically check out typescript-sort-keys/interface and typescript-sort-keys/string-enum

If you are using VSCode, you have the option to enable automatic fixes upon saving your file.

Create a .vscode folder in the root of your project and add a settings.json file with the following configuration:

{
 "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
 },
 "eslint.validate": ["javascript"]
}

You can also refer to Digital Ocean's guide for a detailed explanation on enabling automatic ESLinting on save.