Hey guys! Ever get annoyed with messy, unsorted TypeScript imports? It's like a digital junk drawer, right? Well, fear not! This guide will show you how to use Prettier to automatically sort your TypeScript imports, keeping your code clean, readable, and professional. Let's dive in!

Why Sort TypeScript Imports?

Before we jump into the how-to, let's quickly cover the why. Why bother sorting imports at all? Here's the deal:

• Readability: Sorted imports make your code easier to read. When imports are organized, you can quickly scan and find what you're looking for. No more hunting through a jumbled mess!
• Maintainability: Consistent import sorting makes your codebase more maintainable. It's easier to spot duplicates or unused imports, which can clutter your code and potentially lead to errors. A well-organized codebase is a happy codebase.
• Collaboration: When everyone on your team uses the same import sorting rules, it reduces merge conflicts and makes collaboration smoother. It eliminates subjective formatting preferences and ensures everyone is on the same page. Imagine a world where everyone agrees on import order – sounds pretty good, doesn't it?
• Code Reviews: Sorted imports make code reviews easier. Reviewers can focus on the actual logic of your code instead of getting distracted by messy imports. This leads to more efficient and effective code reviews.
• Professionalism: Let's be honest, sorted imports just look more professional. It shows that you care about the details and take pride in your code. It's like making your bed in the morning – a small effort that makes a big difference. Keeping your imports sorted contributes to the overall polished feel of a professional project.

Think of it this way: unsorted imports are like a messy desk. You can still find things, but it takes longer and it's frustrating. Sorted imports are like a clean desk – everything is in its place and easy to find. Which desk would you rather work at?

Setting Up Prettier for TypeScript Import Sorting

Okay, let's get to the good stuff! Here's how to set up Prettier to automatically sort your TypeScript imports.

1. Install Prettier (if you haven't already)

First things first, make sure you have Prettier installed in your project. If you don't, you can install it using npm or yarn:

npm install --save-dev prettier
# or
yarn add --dev prettier

This command installs Prettier as a development dependency in your project. This means it won't be included in your production build, but it will be available for development tasks like code formatting. It's a good practice to keep your development dependencies separate from your production dependencies to keep your production builds lean and efficient. Development dependencies are tools that help you write, test, and build your code, but aren't needed to run your application in production.

2. Install the prettier-plugin-import-sort Plugin

This is where the magic happens! We'll use a Prettier plugin called prettier-plugin-import-sort to handle the import sorting. Install it like this:

npm install --save-dev prettier-plugin-import-sort
# or
yarn add --dev prettier-plugin-import-sort

This plugin leverages other import sorting libraries to provide a comprehensive and customizable solution. Under the hood, it uses libraries like import-sort to analyze and sort your imports based on your configuration. This plugin handles the complex logic of import sorting, allowing you to focus on writing code. The prettier-plugin-import-sort plugin is designed to seamlessly integrate with Prettier, so you don't have to worry about compatibility issues.

3. Create a Prettier Configuration File

If you don't already have one, create a .prettierrc.js (or .prettierrc.json, .prettierrc.yml, etc.) file in the root of your project. This file tells Prettier how to format your code. Here's a basic example:

// .prettierrc.js
module.exports = {
  plugins: ['@trivago/prettier-plugin-sort-imports'],
  importOrder: ['^@core/(.*)$', '^@server/(.*)$', '^@ui/(.*)$', '^[./]'],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
};

Let's break down this configuration:

• plugins: ['@trivago/prettier-plugin-sort-imports']: This tells Prettier to use the prettier-plugin-import-sort plugin.
• importOrder: This is an array of regular expressions that define the order in which imports should be sorted. In this example, we're sorting imports into four groups:
  • ^@core/(.*)$: Imports from the @core directory.
  • ^@server/(.*)$: Imports from the @server directory.
  • ^@ui/(.*)$: Imports from the @ui directory.
  • ^[./]: Relative imports (imports that start with ./ or ../).
• importOrderSeparation: true: This adds a blank line between each group of imports.
• importOrderSortSpecifiers: true: This sorts the import specifiers (the names of the imported variables or functions) within each import statement.

You can customize the importOrder array to match your project's structure and naming conventions. For example, you might want to add a group for third-party libraries or for CSS files. The key is to define a clear and consistent order that makes sense for your project. Remember that the order of the regular expressions in the importOrder array matters. Imports will be sorted based on the order in which the regular expressions are defined.

4. Configure Your IDE (Optional but Recommended)

To get the most out of Prettier, configure your IDE to automatically format your code on save. This will ensure that your imports are always sorted correctly. Here's how to do it in VS Code:

• Install the Prettier extension for VS Code.
• Open your VS Code settings (File > Preferences > Settings).
• Search for "Format On Save" and enable the option.
• You might also need to set Prettier as your default formatter for TypeScript files. Search for "Default Formatter" and select Prettier.

Once you've configured your IDE, Prettier will automatically format your code every time you save a file. This includes sorting your imports according to the rules you defined in your .prettierrc.js file. This can save you a lot of time and effort in the long run, as you won't have to manually format your code every time you make a change. It also helps to ensure that everyone on your team is using the same formatting rules, which can improve code consistency and reduce merge conflicts.

Example: Seeing it in Action

Let's say you have the following TypeScript file:

// my-component.ts
import { Button } from '@ui/button';
import { calculateTotal } from './utils';
import { Input } from '@ui/input';
import { APIClient } from '@core/api';

After running Prettier, the imports will be automatically sorted like this:

// my-component.ts
import { APIClient } from '@core/api';

import { Button } from '@ui/button';
import { Input } from '@ui/input';

import { calculateTotal } from './utils';

See how the imports are now grouped and sorted according to the rules we defined in our .prettierrc.js file? The @core imports are at the top, followed by the @ui imports, and then the relative imports. This makes the code much easier to read and understand.

Customizing Import Sorting

The prettier-plugin-import-sort plugin is highly customizable. You can adjust the importOrder array to match your project's specific needs. Here are some examples:

• Sorting third-party libraries:

  // .prettierrc.js
  module.exports = {
    plugins: ['@trivago/prettier-plugin-sort-imports'],
    importOrder: [
      '^react(.*)$', // React imports
      '^@mui(.*)$', // Material UI imports
      '<THIRD_PARTY_MODULES>', // All other third-party modules
      '^@core/(.*)$',
      '^@server/(.*)$',
      '^@ui/(.*)$',
      '^[./]',
    ],
    importOrderSeparation: true,
    importOrderSortSpecifiers: true,
  };
  

  In this example, we're sorting React and Material UI imports to the top, followed by all other third-party modules. The <THIRD_PARTY_MODULES> keyword is a special placeholder that tells the plugin to automatically sort all other third-party modules alphabetically. This is a great way to keep your third-party imports organized without having to manually specify each module.

• Sorting CSS files:

  // .prettierrc.js
  module.exports = {
    plugins: ['@trivago/prettier-plugin-sort-imports'],
    importOrder: [
      '\.module\.css$', // CSS Modules
      '\.css$', // Regular CSS files
      '^@core/(.*)$',
      '^@server/(.*)$',
      '^@ui/(.*)$',
      '^[./]',
    ],
    importOrderSeparation: true,
    importOrderSortSpecifiers: true,
  };
  

  Here, we're sorting CSS Modules and regular CSS files to the top of the import list. This can be useful for keeping your styles separate from your JavaScript code. It also makes it easier to find and manage your CSS files. By sorting CSS files to the top, you can quickly see which styles are being used in a particular component.

Troubleshooting

Sometimes, things don't go as planned. Here are some common issues you might encounter and how to fix them:

• Prettier isn't sorting my imports:
  • Make sure you have the prettier-plugin-import-sort plugin installed correctly.
  • Double-check your .prettierrc.js file for any typos or errors.
  • Ensure that your IDE is configured to use Prettier as the default formatter.
  • Try restarting your IDE or running prettier --write . from the command line.
• My imports are sorted in the wrong order:
  • Review your importOrder array in your .prettierrc.js file and make sure the regular expressions are defined in the correct order.
  • Check for any conflicting rules or patterns in your importOrder array.
• Prettier is throwing errors:
  • Check your Prettier version and make sure it's compatible with the prettier-plugin-import-sort plugin.
  • Look for any error messages in your IDE or command line and try to resolve them.

Conclusion

And there you have it! By using Prettier and the prettier-plugin-import-sort plugin, you can automatically sort your TypeScript imports and keep your code clean, readable, and maintainable. This is a small investment that can pay off big time in terms of code quality and developer productivity.

So, go ahead and give it a try! Your future self (and your teammates) will thank you for it. Happy coding!