TidyJS

TypeScript/JavaScript import organization for VS Code

TidyJS automatically organizes, groups, and aligns import declarations with AST-based parsing (oxc-parser) and an IR-based formatting pipeline.

Features

• Smart Import Separation: Automatically separates mixed imports like import React, { useState, type FC } from 'react' into individual declarations
• from Keyword Alignment: Aligns from keywords across import groups via a two-pass IR pipeline
• AST-Based Parsing: Uses oxc-parser (Rust, ESTree-compatible) for fast and reliable analysis
• Configurable Formatting: Specifier sorting, trailing commas, max line width, group spacing, newline enforcement
• Property Sorting: Manual command to sort destructuring, objects, interfaces, and types; automatic sorting for enums, exports, and class properties
• Re-export Organization: Groups, sorts, and aligns re-export statements (export { ... } from '...')
• Batch Formatting: Format all files in a folder with progress tracking, safety guards, and detailed reports
• Path Resolution: Convert between relative and alias-based paths with tsconfig and custom alias support
• Ignore Pragma: Skip files with // tidyjs-ignore
• Auto-Order Resolution: Resolves group order conflicts automatically
• Hierarchical Configuration: .tidyjsrc files and VS Code settings with intelligent merging

Installation

1. Open VS Code (requires v1.90.0+)
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "TidyJS"
4. Click Install

Usage

• Command Palette: Ctrl+Shift+P > "TidyJS: Format Imports"
• Format on Save: Enable editor.formatOnSave in VS Code settings
• Create Config: Ctrl+Shift+P > "TidyJS: Create Configuration File"
• Sort Properties: Select code, then Ctrl+Shift+P > "TidyJS: Sort Properties"
• Format Folder: Right-click a folder in the explorer > "TidyJS: Format Folder"

Supported Files

.ts, .tsx, .js, .jsx

Quick Start

Create a .tidyjsrc in your project root:

{
  "groups": [
    { "name": "React", "match": "^react", "order": 1 },
    { "name": "External", "match": "^[^@./]", "order": 2 },
    { "name": "Internal", "match": "^@/", "order": 3 },
    { "name": "Relative", "match": "^\\.", "order": 4 },
    { "name": "Other", "order": 999, "default": true }
  ],
  "format": {
    "singleQuote": true,
    "removeUnusedImports": true
  }
}

Example

Before:

import { YpTable, YpButton } from 'ds';
import React, { useState, type FC } from 'react';
import { formatDate } from '@library/helpers';
import * as Utils from './utils';

After:

// React
import React        from 'react';
import { useState } from 'react';
import type { FC }  from 'react';

// DS Components
import { YpButton, YpTable } from 'ds';

// @library
import { formatDate } from '@library/helpers';

// Local
import * as Utils from './utils';

Commands

Documentation

Configuration and Options

• Configuration — Complete configuration reference
• Formatting Options — Specifier sorting, trailing comma, line width, group spacing, newline handling
• Path Aliases — Path resolution and custom aliases
• Auto-Order System — Automatic group ordering

Features

• Import Types — Supported import types and mixed import separation
• Property Sorting — Manual and automatic property sorting
• Re-export Organization — Grouping, sorting, and alignment of re-exports
• Ignore Pragma — Exclude files from formatting
• Batch Formatting — Format all files in a folder

Internal Pipeline

• IR Pipeline — Formatting engine architecture

Help

• Troubleshooting — Common issues and solutions
• Contributing — Development setup and guidelines

License

MIT

Links

• VS Code Marketplace
• GitHub Repository
• Report Issues