Optimizing TypeScript Imports: Configuring Prettier and ESLint for Multi-line Format

Streamlining Import Statements in TypeScript

When working on large TypeScript or JavaScript projects, it's common to encounter long import statements, especially when importing multiple members from a single module. While these lines may initially seem harmless, they can easily exceed your Prettier configuration's printWidth setting, making the code harder to read and maintain.

To keep your code neat and readable, it's important to automate the formatting of these imports. Tools like Prettier and ESLint can be customized to automatically split long import statements into multiple lines. This ensures that your code stays clean and consistent, adhering to the formatting rules you’ve set up.

However, configuring these tools to automatically format import statements as desired can be tricky. While the default settings of both Prettier and ESLint handle many formatting issues, they often fall short when it comes to breaking down lengthy import statements across multiple lines.

In this guide, we'll explore how to configure Prettier and ESLint to properly format import statements in your TypeScript project. We'll walk through the settings required to achieve multi-line imports while maintaining consistency across your codebase.

Configuring Prettier and ESLint for Multi-line Imports in TypeScript

The main goal of the scripts above is to configure Prettier and ESLint to automatically format long import statements across multiple lines in a TypeScript project. The Prettier configuration is set up to define coding styles, such as single quotes and trailing commas, and to manage how the code should be wrapped using the printWidth rule. When the line exceeds the set width (in this case, 80 or 120 characters), Prettier will automatically format the code to make it more readable. By using the prettier-plugin-organize-imports plugin, we ensure that import statements are split and sorted logically.

In the ESLint configuration, the import/order rule from the eslint-plugin-import plugin is essential for controlling how imports are organized. The goal here is to enforce a consistent import structure, where imports from different groups (such as built-in modules, external packages, and internal modules) are separated by newlines. Additionally, imports within the same group are alphabetized to improve readability. These rules prevent imports from becoming cluttered, especially when dealing with large numbers of imported members from multiple files.

Another significant aspect of the ESLint setup is the newlines-between option, which ensures that each import group is separated by a blank line. This makes the code more visually organized, especially in larger codebases. Combined with the alphabetize rule, the entire import block becomes structured and easier to maintain. When the code is formatted on save in Visual Studio Code, these settings are applied automatically, ensuring consistent import formatting across the entire project without manual adjustments.

Lastly, testing this configuration is crucial to ensure it works correctly. The Jest unit tests are designed to check whether the Prettier and ESLint configurations handle import splitting and formatting as expected. For example, when a long import statement is provided, the test verifies if it’s properly split into multiple lines. This approach allows developers to automate the testing of their formatting rules, ensuring that any future code changes will adhere to the same import structure guidelines.

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 80,
  plugins: ['prettier-plugin-organize-imports'],
}
// Prettier configuration setup for import splitting

module.exports = {
  "extends": ["eslint:recommended", "plugin:import/errors", "plugin:import/warnings"],
  "rules": {
    "import/order": [
      "error", {
        "groups": ["builtin", "external", "internal"],
        "newlines-between": "always",
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }],
    "max-len": ["error", { "code": 80 }],
  }
}
// ESLint rule setup to organize imports into multiple lines and ensure alphabetical order

import {
  longFunctionNameOne,
  longFunctionNameTwo,
  longFunctionNameThree
} from '@example/long-module-name';

import {
  shortFunctionNameOne,
  shortFunctionNameTwo
} from '@example/short-module-name';
// Example of formatted import statements following the configured rules

const eslint = require('eslint');
const prettier = require('prettier');
const { describe, it } = require('@jest/globals');

describe('Import Formatting', () => {
  it('should split long imports into multiple lines', () => {
    const code = `import { a, b, c, d } from '@example/package';`;
    const formatted = prettier.format(code, { printWidth: 80 });
    expect(formatted).toMatch(/import { a, b }/);
  });
});
// Unit test to check if long imports are split into multiple lines using Jest

Enhancing Code Readability with Prettier and ESLint Import Formatting

When dealing with larger codebases, maintaining consistent import structures becomes crucial for improving both code readability and team collaboration. One common issue developers face is how long import statements can clutter the top of the file, especially when they contain many elements from a single module. This is where tools like Prettier and ESLint come into play, allowing you to automate the splitting of imports over multiple lines. Ensuring that import statements adhere to a defined width, typically based on the printWidth setting, helps prevent horizontal scrolling and keeps the code easy to scan.

Another crucial aspect is the organizational pattern of the imports themselves. Using the import/order rule provided by ESLint, you can group imports based on their origin: built-in libraries, third-party dependencies, or internal modules. These groups can be split by newlines, making it easier for developers to identify dependencies quickly. This method promotes structured imports, which, when combined with alphabetical sorting through the alphabetize option, further enhances clarity and consistency across the codebase.

Additionally, developers may want to leverage tools like prettier-plugin-organize-imports to ensure that imports are not only split correctly but also rearranged logically. These tools automatically enforce the desired import structure every time the file is saved in an editor like Visual Studio Code. This ensures that developers don’t have to manually adjust import statements and can focus on writing cleaner and more maintainable code.