Hey guys! Let's dive into making our TypeScript code look super clean and organized with automatic import sorting using Prettier. Keeping your imports tidy might seem like a small thing, but trust me, it makes a huge difference when you're working on large projects. It improves readability, reduces merge conflicts, and just makes everything feel more professional. So, let's get started!

Why Bother Sorting Imports?

Okay, before we jump into the how-to, let's quickly cover why you should even care about sorting your imports.

• Readability: Imagine scanning through a file and the imports are all over the place. It's like trying to find a specific book in a library where the books are stacked randomly. Sorted imports make it way easier to see what dependencies a module has at a glance.
• Maintainability: When new developers join the team (or even when you revisit your own code after a few months), clean and consistent imports make understanding the codebase much simpler. It reduces the cognitive load and allows everyone to focus on the actual logic.
• Reduced Conflicts: Ever had those annoying merge conflicts where two people added imports to the same file, but in different orders? Sorting imports minimizes these conflicts, making collaboration smoother.
• Code Quality: Let's be honest, well-organized code just looks better. It shows attention to detail and a commitment to quality, which can positively impact how your code is perceived.

So, yeah, sorting imports is more than just a cosmetic change. It's about making your codebase more maintainable, readable, and collaborative. And with tools like Prettier, it's incredibly easy to automate.

Setting Up Prettier for TypeScript

First off, you'll need to make sure you have Prettier installed in your project. If you don't, here's how to get it set up:

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

Once Prettier is installed, you'll want to configure it to work nicely with TypeScript. Create a .prettierrc.js (or .prettierrc.json, .prettierrc.yaml, etc.) file in the root of your project. This file will hold your Prettier settings.

Here’s a basic .prettierrc.js configuration that works well with TypeScript:

module.exports = {
 semi: true,
 trailingComma: 'all',
 singleQuote: true,
 printWidth: 120,
 tabWidth: 2,
};

• semi: Adds semicolons at the end of statements.
• trailingComma: Adds trailing commas wherever possible (helps with cleaner diffs).
• singleQuote: Uses single quotes instead of double quotes.
• printWidth: Sets the line length at which Prettier will try to wrap code.
• tabWidth: Defines the number of spaces per indentation level.

Feel free to tweak these settings to match your personal preferences or team's coding style. The key is to be consistent!

Integrating the typescript-plugin-sort-imports Plugin

Now, for the magic sauce! To automatically sort your TypeScript imports, we'll use the typescript-plugin-sort-imports plugin. This plugin hooks into the TypeScript language service and automatically sorts your imports whenever you save a file.

Install the plugin using npm or yarn:

npm install --save-dev typescript-plugin-sort-imports
# or
yarn add --dev typescript-plugin-sort-imports

Next, you need to configure your tsconfig.json file to use the plugin. Add the following to your tsconfig.json:

{
 "compilerOptions": {
 "plugins": [
 {
 "name": "typescript-plugin-sort-imports"
 }
 ]
 }
}

This tells the TypeScript compiler to load and use the typescript-plugin-sort-imports plugin. By default, the plugin sorts imports alphabetically and groups them based on their source (e.g., external modules, internal modules, and relative imports).

You can further customize the plugin's behavior by adding configuration options. For example, if you want to customize the order of import groups, you can add a sortImports section to your tsconfig.json:

{
 "compilerOptions": {
 "plugins": [
 {
 "name": "typescript-plugin-sort-imports",
 "sortImports": [
 "module",
 "namespace",
 "string",
 "none"
 ]
 }
 ]
 }
}

In this example, we're specifying the order in which import groups should be sorted. The available options are:

• module: External module imports (e.g., import React from 'react').
• namespace: Namespace imports (e.g., import * as React from 'react').
• string: String-based imports (e.g., import './styles.css').
• none: Imports without any specific type.

Note: You might need to restart your IDE or code editor for the changes in tsconfig.json to take effect.

Configuring VS Code for Automatic Formatting on Save

To make the import sorting truly automatic, you'll want to configure your code editor to format files on save. If you're using VS Code, here's how to do it:

1. Install the Prettier VS Code extension: Search for "Prettier - Code formatter" in the VS Code extensions marketplace and install it.
2. Configure VS Code settings: Open your VS Code settings (File > Preferences > Settings) and search for "format on save". Enable the "Editor: Format On Save" option.
3. Set Prettier as the default formatter: Search for "default formatter" and set "Prettier - Code formatter" as the default formatter for TypeScript files.

Alternatively, you can add the following to your VS Code settings.json file:

{
 "editor.formatOnSave": true,
 "editor.defaultFormatter": "esbenp.prettier-vscode"
}

With these settings in place, VS Code will automatically format your TypeScript files (including sorting imports) every time you save. How cool is that?

Example Usage

Let's see it in action. Suppose you have a TypeScript file with the following imports:

import { useState } from 'react';
import { add } from './utils';
import * as _ from 'lodash';
import { calculate } from '../helpers/calculator';
import './styles.css';

After saving the file with Prettier and typescript-plugin-sort-imports configured, the imports will be automatically sorted like this:

import * as _ from 'lodash';
import { useState } from 'react';

import { calculate } from '../helpers/calculator';
import { add } from './utils';

import './styles.css';

See how the imports are now neatly organized? External modules are grouped together, relative imports are grouped together, and everything is sorted alphabetically within each group. Sweet!

Customizing Import Sorting with .importsort.json

For more advanced customization, you can create a .importsort.json file in the root of your project. This file allows you to define custom sorting rules using regular expressions.

Here's an example .importsort.json file:

{
 "$schema": "https://raw.githubusercontent.com/JPeer264/node-import-sort/master/schema.json",
 "groups": [
 {
 "match": "^react$",
 "sort": {
 "order": "asc",
 "type": "module"
 }
 },
 {
 "match": "^@.*$",
 "sort": {
 "order": "asc",
 "type": "module"
 }
 },
 {
 "match": "^.*$",
 "sort": {
 "order": "asc",
 "type": "module"
 }
 },
 {
 "match": "^\\..*$",
 "sort": {
 "order": "asc",
 "type": "module"
 }
 }
 ],
 "options": {
 "ignoreCase": true
 }
}

In this example, we're defining four import groups:

1. Imports from the react module.
2. Imports from modules starting with @ (e.g., @mui/material).
3. All other module imports.
4. Relative imports (imports starting with .).

For each group, we're specifying the sorting order (asc for ascending) and the import type (module). The options section allows you to configure global options, such as ignoreCase to ignore case during sorting.

The .importsort.json file gives you a lot of flexibility in customizing the import sorting behavior to match your specific needs. Check out the documentation for node-import-sort for more details on the available options and syntax.

Troubleshooting Common Issues

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

• Imports not sorting:
  • Make sure you've installed both prettier and typescript-plugin-sort-imports as dev dependencies.
  • Double-check your tsconfig.json file to ensure the plugin is correctly configured.
  • Restart your IDE or code editor.
  • Verify that Prettier is configured to format TypeScript files.
• Conflicting Prettier rules:
  • If you're using other Prettier plugins or configurations, they might be conflicting with the import sorting plugin. Try disabling other plugins or adjusting your Prettier settings to resolve the conflicts.
• Custom sorting not working:
  • If you're using a .importsort.json file, make sure the syntax is correct and the regular expressions are matching the imports as expected.
  • Check the node-import-sort documentation for details on the available options and syntax.

Conclusion

Alright, there you have it! Automatic import sorting with Prettier and TypeScript is a game-changer for code organization and maintainability. By following these steps, you can keep your imports tidy, reduce merge conflicts, and improve the overall quality of your codebase. So go ahead, give it a try, and enjoy the benefits of clean, well-organized code! Happy coding, folks! Now go forth and make those imports shine!