Add ESLint rule to sort type imports

[mikeybinns]

The current ESLint rules require separate type imports, but it just puts them in the middle of all the imports.
I think it makes sense to group type imports together, and move them to the top.

Example:
This:

import { Fragment } from "react";
import { Form } from "@remix-run/react";
import { LoaderFunction, redirect } from "@remix-run/node";
import type { Button } from "~/components/Button";
import { Icon } from "~/components/Icon";

would become:

import type { LoaderFunction } from "@remix-run/node";
import type { Button } from "~/components/Button";
import { Fragment } from "react";
import { Form } from "@remix-run/react";
import { redirect } from "@remix-run/node";
import { Icon } from "~/components/Icon";

instead of this:

import { Fragment } from "react";
import { Form } from "@remix-run/react";
import type { LoaderFunction } from "@remix-run/node";
import { redirect } from "@remix-run/node";
import type { Button } from "~/components/Button";
import { Icon } from "~/components/Icon";

I can't see any existing rule for this, so one will need to be created. Edit: This rule DOES exist (thanks @elkevinwolf), see below.

This could also be combined with ESLint sort-imports to alphabetise the order of imports, and then move types, so you end up with alphabetised type imports and alphabetised normal imports.

[kvnwolf]

You could use eslint-plugin-import and configure the import/order rule to achieve this. I am using this configuration in one of my projects:

{
  // ...other config
  "rules": {
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        },
        "groups": ["type", "builtin", "external", "internal", "parent", ["sibling", "index"]],
        "newlines-between": "always",
        "pathGroups": [],
        "pathGroupsExcludedImportTypes": []
      }
    ]
  },
}

The above will lint and format your documents like so:

import type { LoaderFunction } from "@remix-run/node"

import fs from "fs"
import path from "path"

import { useState } from "react"

import { AnyComponent } from "@package-from-monorepo/ui"

import { OtherComponent } from "../parent-module"

import { ExtraComponent } from "./sibling-module"

[mikeybinns]

This is precisely what I was looking for, I did try looking but I couldn't find it. Thanks so much :)