Auto sort frontend imports

[seancolsen]

Current behavior

• On the front end we use Prettier to automatically format code. We also use ESLint to show warnings and errors for code style problems that require manual fixing.
• Many of our files begin with rather large blocks of import statements.
• The import statements are a common source of git merge conflicts, especially when they get re-arranged.
• We've had some conversations about the best way to

Desired behavior

• We should be able to run a command that auto-sorts the imports
• It needs to sort imports in *.ts files and *.svelte files.
• Ideally this command would be prettier --write . (as is already defined in our package.json file). As such, it would be wise to first look for Prettier plugins that are able to sort imports.
• The exact sorting order of the tool isn't super important as long as its consistent. That said, if we have some control over the sorting order, one of the maintainers can help define the settings to be used.

Example

• Here's what TransformationsPane.svelte looks like right now...

  import { _ } from 'svelte-i18n';
  import {
    Button,
    Icon,
    DropdownMenu,
    ButtonMenuItem,
    ImmutableMap,
    Collapsible,
  } from '@mathesar-component-library';
  import { iconAddNew, iconDeleteMajor } from '@mathesar/icons';
  import type QueryManager from '../../QueryManager';
  import FilterTransformation from './FilterTransformation.svelte';
  import QueryFilterTransformationModel from '../../QueryFilterTransformationModel';
  import { calcAllowedColumnsPerTransformation } from './transformationUtils';
  import QuerySummarizationTransformationModel from '../../QuerySummarizationTransformationModel';
  import SummarizationTransformation from './summarization/SummarizationTransformation.svelte';
  import HideTransformation from './HideTransformation.svelte';
  import QueryHideTransformationModel from '../../QueryHideTransformationModel';
  import SortTransformation from './SortTransformation.svelte';
  import QuerySortTransformationModel from '../../QuerySortTransformationModel';
  import type { QueryTransformationModel } from '../../QueryModel';

• In VS Code, I can run the action "Organize Imports" and I get this:

  import {
    Button,
    ButtonMenuItem,
    Collapsible,
    DropdownMenu,
    Icon,
    ImmutableMap,
  } from '@mathesar-component-library';
  import { iconAddNew, iconDeleteMajor } from '@mathesar/icons';
  import { _ } from 'svelte-i18n';
  import QueryFilterTransformationModel from '../../QueryFilterTransformationModel';
  import QueryHideTransformationModel from '../../QueryHideTransformationModel';
  import type QueryManager from '../../QueryManager';
  import type { QueryTransformationModel } from '../../QueryModel';
  import QuerySortTransformationModel from '../../QuerySortTransformationModel';
  import QuerySummarizationTransformationModel from '../../QuerySummarizationTransformationModel';
  import FilterTransformation from './FilterTransformation.svelte';
  import HideTransformation from './HideTransformation.svelte';
  import SortTransformation from './SortTransformation.svelte';
  import SummarizationTransformation from './summarization/SummarizationTransformation.svelte';
  import { calcAllowedColumnsPerTransformation } from './transformationUtils';

  That's a nice improvement. It sorted the import statements and it sorted the named imports within statements.

• Additionally, I have a slight preference for automatically grouping imports like this if possible:

  import { _ } from 'svelte-i18n';
  
  import {
    Button,
    ButtonMenuItem,
    Collapsible,
    DropdownMenu,
    Icon,
    ImmutableMap,
  } from '@mathesar-component-library';
  import { iconAddNew, iconDeleteMajor } from '@mathesar/icons';
  
  import QueryFilterTransformationModel from '../../QueryFilterTransformationModel';
  import QueryHideTransformationModel from '../../QueryHideTransformationModel';
  import type QueryManager from '../../QueryManager';
  import type { QueryTransformationModel } from '../../QueryModel';
  import QuerySortTransformationModel from '../../QuerySortTransformationModel';
  import QuerySummarizationTransformationModel from '../../QuerySummarizationTransformationModel';
  import FilterTransformation from './FilterTransformation.svelte';
  import HideTransformation from './HideTransformation.svelte';
  import SortTransformation from './SortTransformation.svelte';
  import SummarizationTransformation from './summarization/SummarizationTransformation.svelte';
  import { calcAllowedColumnsPerTransformation } from './transformationUtils';

  Here, the external packages are listed first, then an empty line, then the aliases, then an empty line, then the rest.

  If it's possible to automatically transform the entire import area into this grouped style, that would be awesome. But if that's not possible, it's okay.

Related

• Upgrade eslint-plugin-import and enable consistent-type-specifier-style #1729

[seancolsen]

@hitenvidhani expressed interest in potentially working on this. Go ahead if you like, @hitenvidhani!