Type imports

[mattiaz9]

Is your feature request related to a problem?

I'd like to sort all my types into one single group.

Example:

import { a } from 'foo'
import { b } from 'bar'

import type { A } form 'foo'
import type { B } form 'bar'

Describe the solution you'd like

Something like this:
trivago/prettier-plugin-sort-imports#153

Describe alternatives you've considered

None

[IanVS]

@mattiaz9, do you prefer that over this syntax?

import { a, type A } from 'foo';
import { b, type B } from 'bar';

[mattiaz9]

@IanVS yes, I prefer to separate them

[tusharf5]

@mattiaz9 you can try https://github.com/serverless-guru/prettier-import-order which is a fork of this project and have this feature.

[mattiaz9]

Thank you @tusharf5, but I can't put the types where I want, so I rather wait for the feature to be implemented

[mattiaz9]

@IanVS I'm trying out the new version, but it doesn't seem to work.
I think it might going in conflict with other imports. For instance "<TYPES>^[./]" is in conflict with "^[./]".

Or maybe I'm doing something wrong. This is my config:

module.exports = {
  importOrder: [
    "^react",
    "^next",
    "<THIRD_PARTY_MODULES>",
    "",
    ".s?css$",
    "^@heroicons",
    "^@/assets",
    "",
    "^[./]",
    "^@/",
    "",
    "<TYPES>^[./]",
    "<TYPES>^react",
    "<TYPES>^next",
    "<TYPES>^@/",
    "<TYPES>",
  ],
  importOrderSeparation: false,
  importOrderMergeDuplicateImports: true,
}

This is an example result of how it sorts the imports:

import React, {  useCallback,  useEffect,  useState } from "react"
import isHotkey from "is-hotkey"
import { createEditor, Transforms, Editor as SlateEditor } from "slate"
import { Slate, Editable, ReactEditor } from "slate-react"

import Block from "./blocks/Block"
import type { BlockProps } from "./blocks/Block"
import Field from "./blocks/Field"
import Image from "./blocks/Image"
import type { LeafProps } from "./blocks/Leaf"
import Leaf from "./blocks/Leaf"
import Page from "./blocks/Page"
import type { PageProps } from "./blocks/Page"
import Table from "./blocks/Table"
import TableCell from "./blocks/TableCell"
import TableRow from "./blocks/TableRow"
import type { FullEditor } from "./plugins/with-plugins"
import withPlugins from "./plugins/with-plugins"
import EditorSidebar from "./sidebar/EditorSidebar"
import Toolbar from "./toolbar/Toolbar"
import { injectFonts } from "@/utils/fonts"
import { DEFAULT_FONT, FONT_FAMILIES, HOTKEYS, toggleMark } from "@/utils/slate"
import type { DescendantExtra, SlateElementExtra } from "@/utils/slate"

[IanVS]

Thanks for trying it out, and for providing the example. I'm looking into it.

[IanVS]

@mattiaz9 I've pushed up a fix in https://github.com/IanVS/prettier-plugin-sort-imports/releases/tag/v3.7.1.

Using your config and example, I now get this output:

import React, { useCallback, useEffect, useState } from "react";
import isHotkey from "is-hotkey";
import { createEditor, Transforms, Editor as SlateEditor } from "slate";
import { Slate, Editable, ReactEditor } from "slate-react";

import Block from "./blocks/Block";
import Field from "./blocks/Field";
import Image from "./blocks/Image";
import Leaf from "./blocks/Leaf";
import Page from "./blocks/Page";
import Table from "./blocks/Table";
import TableCell from "./blocks/TableCell";
import TableRow from "./blocks/TableRow";
import withPlugins from "./plugins/with-plugins";
import EditorSidebar from "./sidebar/EditorSidebar";
import Toolbar from "./toolbar/Toolbar";
import { injectFonts } from "@/utils/fonts";
import {
    DEFAULT_FONT,
    FONT_FAMILIES,
    HOTKEYS,
    toggleMark,
} from "@/utils/slate";

import type { BlockProps } from "./blocks/Block";
import type { LeafProps } from "./blocks/Leaf";
import type { PageProps } from "./blocks/Page";
import type { FullEditor } from "./plugins/with-plugins";
import type { DescendantExtra, SlateElementExtra } from "@/utils/slate";