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.
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:
Package imports (e.g., import React from 'react')
@-prefixed imports (e.g., import { Button } from '@/components/ui/button')
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
Open VS Code
Press Ctrl+P (Cmd+P on macOS) to open the Quick Open dialog
Type ext install import-formatter and press Enter
Restart VS Code
Usage
The extension works in two ways:
Automatic Formatting: Your imports will be automatically formatted whenever you save a JavaScript or TypeScript file.
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
Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
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.
