Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Align Imports PlusNew to Visual Studio Code? Get it now.
Align Imports Plus

Align Imports Plus

Aswanth Alakkadan

|
148 installs
| (0) | Free
VS Code extension that aligns imports in JavaScript, TypeScript, JSX, and TSX files according to your specified format (sorting imports from packages first, @ paths second, and relative paths last).
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Align Imports Plus Extension for VS Code

A Visual Studio Code extension that automatically formats and organizes JavaScript/TypeScript import statements. It groups imports into three categories (package, @-prefixed, and relative imports) and maintains proper spacing between groups.

Features

  • Automatically formats imports on file save
  • Groups imports into three categories:
    1. Package imports (e.g., import React from 'react')
    2. @-prefixed imports (e.g., import { Button } from '@/components/ui/button')
    3. Relative imports (e.g., import { utils } from './utils')
  • Maintains proper spacing between import groups
  • Preserves multi-line import formatting
  • Removes duplicate imports
  • Works with JavaScript, TypeScript, and React files
  • Supports both manual triggering and automatic formatting on save

Installation

  1. Open VS Code
  2. Press Ctrl+P (Cmd+P on macOS) to open the Quick Open dialog
  3. Type ext install import-formatter and press Enter
  4. Restart VS Code

Usage

The extension works in two ways:

  1. Automatic Formatting: Your imports will be automatically formatted whenever you save a JavaScript or TypeScript file.

  2. Manual Formatting: You can manually format imports using:

    • Command Palette (Ctrl+Shift+P or Cmd+Shift+P): Type "Format Imports"
    • Or assign a custom keyboard shortcut

Example

Before:

import { Button } from './components/Button';
import React from 'react';
import { Something } from '@/components/Something';
import { useState } from 'react';
import { Utils } from '../utils';

After:

import React from 'react';
import { useState } from 'react';

import { Something } from '@/components/Something';

import { Button } from './components/Button';
import { Utils } from '../utils';

Supported File Types

  • JavaScript (.js)
  • TypeScript (.ts)
  • React JavaScript (.jsx)
  • React TypeScript (.tsx)

Configuration

The extension works out of the box with no configuration needed.

Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Issues and Feedback

If you find any bugs or have suggestions for improvements, please file an issue on the GitHub repository.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft