Allow hard coded comments in between each sort group

[abarrows]

Is your feature request related to a problem?
Please describe a clear and concise description of what the problem is. E.g. I'm always frustrated when [...]

User Story

AS A manager of a software engineering team, I WANT to add the option to inject comments below a space separated sort group (see examples below) SO THAT new engineers to our projects can easily identify how our team groups imports as well as more easily can identify when further refinement of an import's order should be moved into a different category.

Describe the solution you'd like
A clear and concise description of what you want to happen.
Here is what I tried in hopes of getting this effect:
importOrder: [
'<BUILTIN_MODULES>',
'^react$',
'',
'// Third-party modules',
'<THIRD_PARTY_MODULES>',
'',
'// Data and API',
'^data/(.)$',
'^src/pages/api/(.)$',
'',
'// Constants, helpers, contexts',
'^src/constants(.)$',
'^src/helpers/(.)$',
'^src/contexts/(.)$',
'',
'// Components and page templates',
'^src/(components|page-templates)/(.)$',
'^src/(.)$',
'',
'// Styles',
'^(?!.\.module\.scss)./(.)$',
'^../(.)$',
'^./(.*)module.scss$',
],

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

1. I tried adding both pragma and // comments into the sortOrder without a space in between each group. IE: ```

    '<BUILTIN_MODULES>',
    '^react$',
    '// Third-party modules',
    '<THIRD_PARTY_MODULES>',

2. I tried adding a space in between groups and directly below the space, adding a comment.

Additional context
Add any other context or screenshots about the feature request here. Here is an example of one of our page components with the desired effect:

// Core
import React from 'react';

// Data and API
import dataPageHeader from 'data/mocks/data-page-header';

// Components, Page Templates, and Context
import Header from 'src/components/commons/headers';
import Heading from 'src/components/commons/typography/Heading';
import Paragraph from 'src/components/commons/typography/Paragraph';

[IanVS]

Are you asking for these comments to be inserted by this plugin, or just placed in those locations if they are found in among the imports?

[fbartho]

As an Engineer sometimes asked to lead/manage:
Are you sure you need those comments in every file?

I ask, because we set up things with prettier so that our CI automatically formats source-code if there's a formatting issue. That way, instead of blocking PRs, our CI automatically pushes a commit fixing the issue. This has the added benefit of supporting code-changes that get made by users making a suggestion on a PR.

As a result, the imports just get sorted to the right place, and there's no need to nag anyone. The result also means that devs don't have to "interpret" the import statements, so the comments would just be noise.

Devs can just focus on the lines of code where they're writing their own business logic.

[fbartho]

At the technical level there's a lot of messiness around preserving comments associated with imports, and we wouldn't want to inject lots of duplicate or nearly duplicate comments all over somebody's codebase.

So this request might be harder to implement than it first sounds!

[AlexJDG]

Would it not be possible to just search for the specified comment, move it if it exists, and add it if not?

[IanVS]

@AlexJDG is this a feature you're looking for as well? If so, could you share your use case?

[AlexJDG]

Sure! Historically we've tried to organise our imports into groups with comments which are part of a base component template we use. Developers need to put the imports under the corresponding group.

We recently installed prettier and prettier-plugin-sort-imports, but would like to preserve the import comments we've standardised.

// Library imports
import React, { useEffect, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import { toast } from 'react-toastify';

// Redux
import { useSelector } from 'react-redux';
import { getGlobalClientSelector, getGlobalUserSelector } from '../../../../../../../redux/selectors/global-selectors';
import { getSelectedUserSettingsSelector } from '../../../../../../../redux/selectors/settings-selectors';

// API Consumers
import { getUserByIdRequest } from '../../../../../../../apiConsumers/user';

// Config
import { language } from '../../../../../../../config/language';

// Helpers

// Components
import { UploadAudioPlayer } from '../../../../../../legacy/UploadAudioPlayer/UploadAudioPlayer';
import { LoadingIcon } from '../../../../../../legacy/LoadingIcon/LoadingIcon';

// Styles
import styles from './UserSettingsBroadcast.module.scss';

// Assets

Here's our current configuration:

const config = "/config/(.*)$";
const apiConsumers = "/apiConsumers/(.*)$";
const helpers = "(H|h)elper";
const hooks = "/hooks/(.*)$";
const styles = "\\.(scss|css)$";
const assets = "\\.(svg|jpg|png|jpeg|mp3|gif)$";
const types = "(\\.types|types/(.*))$";
const components = `^\\.{1,2}/(?!.*(${styles}|${assets}|${types})).*$`;

module.exports = {
    singleAttributePerLine: true,
    tabWidth: 4,
    plugins: ["@ianvs/prettier-plugin-sort-imports"],
    importOrderTypeScriptVersion: "^4.9.3",
    importOrder: [
        "<THIRD_PARTY_MODULES>",
        "prop-types",
        "",
        config,
        "",
        apiConsumers,
        "",
        helpers,
        "",
        hooks,
        "",
        components,
        "",
        styles,
        "",
        assets,
        "",
        types,
        "",
        "^[./]", // All other imports
    ],
};

Perhaps a configuration like this would work?

importOrder: [
        "// Library imports",
        "<THIRD_PARTY_MODULES>",
        "prop-types",
        "",
        "// Config"
        config,
        "",
        "// API Consumers",
        apiConsumers,
        "",
        "// Helpers",
        helpers,
        "",
        "// Hooks",
        hooks,
        "",
        "// Components",
        components,
        "",
        "// Styles",
        styles,
        "",
        "// Assets",
        assets,
        "",
        "// Types",
        types,
        "",
        "^[./]", // All other imports
    ],

[IanVS]

Thanks for sharing! I can see the benefit of these comments to help guide developers in knowing where to put their imports, but with automatic sorting, is it still so important to have the comments? Perhaps just having the groups is self-explanitory enough? Ideally, now your devs won't need to really care about where they put the imports, they'll get grouped automatically, and they may spend time still manually putting them into the right group if you keep the comments around.

Those are just my thoughts, but I can see how losing the comments might be disorienting for those used to seeing them.

If someone would like to work on this feature, I would review it. But, I don't have time to spend on it right now unfortunately.

[AlexJDG]

Yeah - in the meantime we're trialling that mentality, since we're confident that the main reason the comments existed was for guidance on where to put imports.

[IanVS]

I have a feeling that once developers get used to not having to spend brain power on knowing where to put imports, they'll be much happier. :-D

[IanVS]

@AlexJDG @abarrows I just wanted to check back in briefly. Have you been using the plugin without the option and if so, do you still feel like the enhancement here is important to have?

[AlexJDG]

Yeah - We've largely gotten used to it to be honest. I think it'd still be a nice-to-have since the comments would remove some confusion when there are many imports in a complex component, but it's not something we're losing sleep over 😊

Current usage:

Example with comments: