Enforcing JS/TS Import Order

Overview

With Intellisense and Copilot at our fingertips, it's easy to forget that the order of imports in a file can have a big impact on the readability and maintainability of your code. Import helpers typically just put the autogenerated import at the bottom of all the other imports.

This recipe will show you how to enforce a consistent import order in your project using the @serverless-guru/prettier-plugin-import-order prettier plugin.

info

There are a few other import order prettier plugins out there, but I've found this one to be the most flexible and easy to use. It also has more granular support for typescript imports and the ability to specify blank lines with a simple empty string in the importOrder array.

Another library to consider would be @trivago/prettier-plugin-sort-imports which has basically the same install procedure but slightly different options for configuration.

Play around with them and see which one you like best!

We'll get started by Igniting a new application with the cng workflow, or use your own Ignite project if you have one.

npx ignite-cli new PizzaApp --workflow=cng --yes
cd PizzaApp

Add The Plugin

Add the following plugin to your project (you can use yarn or npm):

yarn add --dev @serverless-guru/prettier-plugin-import-order

Configure Prettier

In a default Ignited app, the prettier configuration is located in the package.json file. You can edit that file but we recommend moving the configuration to a separate file called .prettierrc.js for better organization and to have the ability to comment the configuration.

Remove the prettier key from the package.json file and create a new file called .prettierrc.js and put the following content in it:

// @ts-check
/** @type {import("@serverless-guru/prettier-plugin-import-order").PrettierConfig} */
module.exports = {
  // begin: settings from the package.json file
  printWidth: 100,
  semi: false,
  singleQuote: false,
  trailingComma: "all",
  // end: settings from the package.json file

  // Sort and group imports using the @serverless-guru/prettier-import-order plugin.
  // https://github.com/serverless-guru/prettier-import-order
  //
  // See documentation and usage: https://www.npmjs.com/package/@serverless-guru/prettier-plugin-import-order#usage
  importOrder: [
    "^react(-native)?$", // React and react-native stuff goes at the top
    "", // use empty strings to separate groups with empty lines
    "<THIRD_PARTY_MODULES>", // Third party modules (this is a plugin keyword)
    "",
    "^app/(.*)$",
    "",
    "^../(.*)$", // Local imports in parent directories
    "^./(.*)$", // Local imports in current directory
  ],
  importOrderSeparation: false, // turn this on to see the sorting groups.
  importOrderSortIndividualImports: true,
  importOrderMergeDuplicateImports: true,
  importOrderTypeImportsToTop: true, // Set this to false if you want type imports to be sorted with the rest of the imports
  importOrderCaseInsensitive: true,
  importOrderParserPlugins: ["typescript", "jsx"],
  // End sort options
}

Obviously, you'll want to customize the importOrder array to match your project's specific import patterns and preferences.

Rewrite Your Imports!

tip

At this point you should probably commit your changes to git because the next step is gonna change a lot of files!

Now run the following command to rewrite all of your imports:

yarn format

You should see a bunch of file changes after this command where the import order has been updated to match the configuration you specified in the .prettierrc.js file. If it all looks good, commit the changes again!

If you have your code editor set up to format on save, you should see the import order enforced as you work on your project with every save!