🔖 Feature description

This request is to add a plugin called prettier-plugin-sort-imports to Prettier, so it automatically sorts our import statements in a consistent way.

🎤 Context

Right now, our import statements aren't sorted consistently, which makes the code harder to read and can cause problems when merging code. This plugin will automatically sort them, making our code cleaner and more consistent, and improve the developer experience.

Example:

Before:

import { Button } from '@material-ui/core';
import { EntityTable } from '@backstage/plugin-catalog';
import { useState } from 'react';
import { useApi } from '@backstage/core-plugin-api';
import { makeStyles } from '@material-ui/core/styles';

After:

import { useState } from 'react';

import { useApi } from '@backstage/core-plugin-api';
import { EntityTable } from '@backstage/plugin-catalog';

import { makeStyles } from '@material-ui/core/styles';
import { Button } from '@material-ui/core';

✌️ Possible Implementation

Update the root .prettierrc.js (or equivalent) file to include the plugin:

module.exports = {
  // ... existing Prettier configuration
  plugins: [
    require.resolve('prettier-plugin-sort-imports'),
  ],
  importOrder: [
    '^react(.*)$',
    '',
    '^@backstage/(.*)$',
    '',
    '<THIRD_PARTY_MODULES>',
    '',
    '<BUILTIN_MODULES>',
    '',
    '^[.]',
  ],
};

👀 Have you spent some time to check if this feature request has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Are you willing to submit PR?

Yes I am willing to submit a PR!