TidyJS
Automatically organizes and formats import declarations in TypeScript
and JavaScript
files. It groups imports by customizable categories, perfectly aligns from
keywords, and intelligently sorts imports by type and length.
✨ Features
- 📋 Group imports by configurable categories
- 📐 Align 'from' keywords for improved readability
- 🔄 Sort imports by type hierarchy (side-effects, default, named, type)
- ⚛️ Handle higher priority imports with special priority
- First name in regex group is higher priority
- 🔧 Dynamically create groups based on import paths
- 🔠 Support for TypeScript, JavaScript, TSX and JSX files
- ⚙️ Configurable spacing and maximum line length
🔍 Example
Before:
import { YpTable, YpDivider, YpTypography, YpElement, YpTag, YpButton } from 'ds';
import React, { FC, useState } from 'react';
import cn from 'classnames';
import type { User } from '@app/dossier/models';
import { formatDate } from '@library/helpers';
import { useTranslation } from '@core/i18n';
After:
// Misc
import React, { FC, useState } from 'react';
import cn from 'classnames';
// DS
import {
YpButton,
YpDivider,
YpElement,
YpTag,
YpTable,
YpTypography
} from 'ds';
// @app/dossier
import type { User } from '@app/dossier/models';
// @core
import { useTranslation } from '@core/i18n';
// @library
import { formatDate } from '@library/helpers';
⚙️ Configuration
{
"tidyjs.groups": [
{
"name": "Misc",
"regex": "^(react|lodash|date-fns)$",
"order": 0
},
{
"name": "DS",
"regex": "^ds$",
"order": 1
},
{
"name": "@app/dossier",
"regex": "^@app\\/dossier",
"order": 2
}
// other groups...
],
"tidyjs.formatOnSave": false,
}
🚀 Usage
- Use the keyboard shortcut Ctrl+Shift+I (Cmd+Shift+I on macOS)
- Use the "Format Imports" command from the command palette
- Enable automatic formatting on save by setting
"tidyjs.formatOnSave": true
in your VS Code settings
📊 Import Sorting Rules
TidyJS sorts imports according to the following hierarchy:
- React imports always come first within their group
- Side-effect imports (e.g.,
import 'module'
)
- Default non-type imports
- Named non-type imports
- Default type imports
- Named type imports
Within each category, imports are sorted alphabetically.