React Custom Import Sorter

A VS Code extension that sorts and groups imports in React (.jsx/.tsx) files according to a configurable order. It helps keep imports organized, consistent, and easy to scan.

Features

• Sorts imports in javascriptreact and typescriptreact files.
• Group imports by configurable regex order (e.g. React first, then libraries, then local files).
• Optional on-save sorting via configuration.
• Command palette integration: run Sort React Imports or use the editor context menu.
• Keybinding: Ctrl+Alt+O (Windows/Linux) or Cmd+Alt+O (macOS) to trigger sorting.

Installation

1. From Marketplace: (coming soon) — the official publisher will be added after publishing.
2. Locally: install the generated VSIX file:

code --install-extension react-custom-import-sorter-0.0.1.vsix

Usage

• Open a React component (.jsx or .tsx).
• Run the command Sort React Imports from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
• Or right-click in the editor and choose Sort React Imports from the context menu.
• Or press the keybinding: Ctrl+Alt+O (Cmd+Alt+O on macOS).

Auto-sort on save

To enable automatic sorting whenever you save a file, add the following setting to your workspace or user settings.json:

"reactImportSorter.onSave": true

Configure import grouping order

You can customize the import grouping using the reactImportSorter.order setting. It's an ordered array of regex patterns; imports matching earlier patterns are placed before later ones. Example default:

"reactImportSorter.order": [
  "^react",
  "^@material-ui",
  "^\\.",
  "^\\.\\."
]

Adjust or extend these patterns to match your project's packages and conventions.

Demo

Replace this demo section with screenshots or a short GIF showing the sorter in action.

Examples

Input:

import Foo from './Foo';
import React from 'react';
import { Button } from '@material-ui/core';
import utils from '../utils';

After sorting (default order):

import React from 'react';
import { Button } from '@material-ui/core';
import Foo from './Foo';
import utils from '../utils';

Troubleshooting

• If the command does nothing, ensure the active editor is a React file (.jsx/.tsx).
• Check your reactImportSorter.order setting for overlapping regexes that may prevent intended grouping.

Development

Requirements: Node.js and npm.

Install dev dependencies and build:

npm install
npm run compile

Run the extension in the Extension Development Host from VS Code (Run → Start Debugging).

Packaging

Before packaging, ensure package.json contains a publisher and icon field and that any required files (icon, license, fonts) are included.

Package with vsce:

npm install -g vsce
vsce package

Contributing

Contributions are welcome. Open issues or PRs describing the desired improvement or bug fix.

License

This extension is released under the ISC License. See the LICENSE file for details.