Pyramid Sort

Pyramid Sort is a VS Code extension (and CLI) that sorts code by trimmed line length so short lines sit at the top and long lines at the bottom — a readable “pyramid” layout.

It covers imports, JSX/HTML attributes, type / interface / enum bodies, object literals, and CSS / SCSS / Less declarations inside rule blocks. Optional force sort reorders any selection by line length with no parsing. Blank lines can separate independent sort groups everywhere that applies.

Features at a glance

Sorting

Area	What it does
Imports	Sort by line length; optional external vs local grouping (blank line between groups)
JSX / HTML attributes	Sort attributes inside multiline tags by line length
Types	`type` / `interface` / `enum` bodies (including `export …`)
Objects	`const` / `let` / `var` `= {` and `return {`; optional `sortNestedObjects` adds `foo({ … })` and `key: { … }` with block-aware sorting
CSS	Declarations inside `{ … }` rule blocks; nested rules stay put; `@keyframes` steps are not reordered as blocks
Force sort	Selected lines only, any language — raw length sort; optional group by empty rows (same idea as elsewhere)

Auto direction (`"auto"`)

For imports, attributes, types, objects, and CSS, you can set direction to "auto". The extension compares the opening line (the line with {, the <Tag, the selector + {, or the line above the import block) to the median trimmed length of the body lines: shorter opener → ascending, longer or equal opener → descending, so the sorted block visually follows the boundary line.

Grouping and imports

Empty-row grouping — For imports, attributes, types, objects, CSS, and force sort: blank lines split groups; each group is sorted on its own and separators stay in place.
Multi-line import consolidation — Only imports that already span multiple lines are reflowed to fit maxLineWidth; single-line imports are never split or merged for width.
Path aliases — Reads tsconfig.json / jsconfig.json / Vite config so paths like @/ classify as local.

Editor integration

Commands — Full file, selection, or category-only (imports, attributes, types, objects, CSS, force ascending / descending); Scan All Files (Markdown report) and Sort All Files (workspace-wide sort + report).
Sort on save — Separate toggles: imports, attributes, types, objects, CSS (types / objects / CSS are opt-in).
Diagnostics — Per-category information entries in the Problems tab when sort order is off. Imports and attributes report by default; types, objects, and CSS are opt-in; quick-fix: “Sort with Pyramid Sort” runs the matching command.
Selection sort — Heuristic: imports, JSX, type declarations, object patterns, or CSS depending on what the selection looks like.

CLI and AI workflows

npx pyramid-sort <file> — Same sorting pipeline with flags (--imports-only, --attributes-only, --types-only, --objects-only, --css-only, --ascending, --descending).
Agent hook — Command Pyramid Sort: Setup AI Hook writes a Cursor / VS Code hook config that runs the CLI after tool use.

Before / after

Imports

Before:

import { c } from "vendor-long-name";
import { a } from "v";
import { bb } from "vm";
import { ddd } from "vnode";
import { eeee } from "vend";

import { x } from "@/a";
import { yy } from "@/bb";
import { zzz } from "@/ccc";
import { wwww } from "@/long";

After (ascending):

import { a } from "v";
import { bb } from "vm";
import { ddd } from "vnode";
import { eeee } from "vend";
import { c } from "vendor-long-name";

import { x } from "@/a";
import { yy } from "@/bb";
import { zzz } from "@/ccc";
import { wwww } from "@/long";

Attributes

Before:

<input
  className="root layout wide text dense stroke muted"
  ref={ref}
  type="text"
  onChange={(e) => onChange(e.target.value)}
  name="field-one"
  value={value}
  placeholder="Type here..."
/>

After (ascending):

<input
  ref={ref}
  type="text"
  value={value}
  name="field-one"
  placeholder="Type here..."
  onChange={(e) => onChange(e.target.value)}
  className="root layout wide text dense stroke muted"
/>

Types (empty rows = groups)

Before:

type Flags = {
  veryLongPropertyName: boolean;
  short: boolean;
  mediumName: boolean;

  longPropName: boolean;
  tiny: boolean;
  midProp: boolean;
};

After (ascending, groups preserved):

type Flags = {
  short: boolean;
  mediumName: boolean;
  veryLongPropertyName: boolean;

  tiny: boolean;
  midProp: boolean;
  longPropName: boolean;
};

Object literals

Before:

const item = {
  longKeyName: 5000,
  a: 1,
  midKey: 2,
  url: "https://example.test",

  obj: { k: "v" },
  done: true,
};

After (ascending, groups preserved):

const item = {
  a: 1,
  midKey: 2,
  longKeyName: 5000,
  url: "https://example.test",

  done: true,
  obj: { k: "v" },
};

CSS

Before:

.widget {
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;

  font-size: 14px;
  color: #ccc;
}

After (ascending):

.widget {
  padding: 16px;
  border-radius: 8px;
  background-color: #fff;

  color: #ccc;
  font-size: 14px;
}

Commands

Command	Description
Pyramid Sort	Sort entire file using configured directions
Pyramid Sort: Sort Ascending	Selection or whole file, ascending
Pyramid Sort: Sort Descending	Selection or whole file, descending
Pyramid Sort: Sort Imports	Imports only
Pyramid Sort: Sort Attributes	JSX/HTML attributes only
Pyramid Sort: Sort Types	Type / interface / enum bodies
Pyramid Sort: Sort Objects	Object literal properties
Pyramid Sort: Sort CSS	CSS / SCSS / Less declarations in rules
Pyramid Sort: Force Sort Ascending	Selection: by line length (any file type)
Pyramid Sort: Force Sort Descending	Same, descending
Pyramid Sort: Save Without Sorting	Save the file once without on-save sorting
Pyramid Sort: Setup AI Hook	Create hook JSON for the CLI
Pyramid Sort: Scan All Files (Report)	Workspace scan; opens Markdown issue report
Pyramid Sort: Sort All Files	Workspace sort + Markdown summary of changes

Settings

In the VS Code Settings editor, options are grouped into sections: Pyramid Sort (extensions, diagnostics), Pyramid Sort: Imports, Attributes, Types, Objects, CSS, and Force Sort.

Setting	Type	Default	Description
`pyramidSort.sortImportsOnSave`	boolean	`true`	Sort imports on save
`pyramidSort.sortAttributesOnSave`	boolean	`true`	Sort attributes on save
`pyramidSort.sortTypesOnSave`	boolean	`false`	Sort type / interface / enum bodies on save
`pyramidSort.sortObjectsOnSave`	boolean	`false`	Sort object literals on save
`pyramidSort.sortCssOnSave`	boolean	`false`	Sort CSS declarations on save
`pyramidSort.imports.direction`	enum	`ascending`	`ascending` \| `descending` \| `auto`
`pyramidSort.attributes.direction`	enum	`ascending`	`ascending` \| `descending` \| `auto`
`pyramidSort.types.direction`	enum	`ascending`	`ascending` \| `descending` \| `auto`
`pyramidSort.objects.direction`	enum	`ascending`	`ascending` \| `descending` \| `auto`
`pyramidSort.css.direction`	enum	`ascending`	`ascending` \| `descending` \| `auto`
`pyramidSort.imports.groupByEmptyRows`	boolean	`true`	Blank lines separate import groups
`pyramidSort.imports.groupExternalLocal`	boolean	`true`	Auto-group imports into external (npm) vs local (relative / alias) with a blank line between them; false = pure length sort, one block
`pyramidSort.attributes.groupByEmptyRows`	boolean	`true`	Blank lines separate attribute groups in a tag
`pyramidSort.types.groupByEmptyRows`	boolean	`true`	Blank lines separate groups inside type bodies
`pyramidSort.objects.groupByEmptyRows`	boolean	`true`	Blank lines separate groups inside object literals
`pyramidSort.objects.sortNestedObjects`	boolean	`false`	Also sort `name({ … })` and nested `prop: { … }`; keeps multi-line nested objects intact
`pyramidSort.css.groupByEmptyRows`	boolean	`true`	Blank lines separate declaration groups in a rule
`pyramidSort.forceSort.groupByEmptyRows`	boolean	`true`	Blank lines separate groups for force sort
`pyramidSort.imports.consolidateMultilineImports`	boolean	`true`	Reflow multi-line imports only; single-line imports are left as-is
`pyramidSort.imports.maxLineWidth`	number	`0` (auto)	0 = detect from `.prettierrc` / `package.json` → Prettier extension `printWidth` → `editor.rulers[0]` → 80; > 0 = fixed override
`pyramidSort.showDiagnostics`	boolean	`true`	Master on/off for Problems-tab diagnostics
`pyramidSort.diagnostics.imports`	boolean	`true`	Report import-order problems
`pyramidSort.diagnostics.attributes`	boolean	`true`	Report JSX/HTML attribute-order problems
`pyramidSort.diagnostics.types`	boolean	`false`	Report type/interface/enum-member order problems
`pyramidSort.diagnostics.objects`	boolean	`false`	Report object-literal property-order problems
`pyramidSort.diagnostics.css`	boolean	`false`	Report CSS/SCSS declaration-order problems
`pyramidSort.extensions`	string[]	see below	File extensions the extension runs on (includes `.css` / `.scss` by default); add `.vue`, `.html`, etc. as needed

Less: .less is not in the default list but is still supported when you open those files (language activation). Add .less to extensions if you want it listed explicitly with the rest.

Diagnostics

Diagnostics are controlled per category. pyramidSort.showDiagnostics is the master switch (default on); each pyramidSort.diagnostics.<category> toggle decides whether that specific category reports problems. Defaults: imports and attributes on; types, objects, and CSS off. Mismatches show as information entries in the Problems tab; use the lightbulb Sort with Pyramid Sort quick-fix to apply the right command.

Diagnostics and on-save sorting are independent — you can turn on the types diagnostic without enabling sortTypesOnSave, and vice versa.

Supported languages

Default extensions: .js, .jsx, .ts, .tsx, .css, .scss.

Add more via pyramidSort.extensions (e.g. .vue, .svelte, .astro, .mdx, .html). Values are file extensions (with a leading dot). The extension maps them to VS Code language IDs internally.

Stylesheets: Defaults include .css and .scss. Less works via language activation; add .less to extensions to align with the same list.

CLI and AI hook

Hook setup

Run Pyramid Sort: Setup AI Hook. It creates .github/hooks/pyramid-sort.json similar to:

{
  "hooks": {
    "PostToolUse": [
      {
        "type": "command",
        "command": "npx pyramid-sort \"$TOOL_INPUT_FILE_PATH\""
      }
    ]
  }
}

CLI

npx pyramid-sort <file>
npx pyramid-sort <file> --ascending
npx pyramid-sort <file> --descending
npx pyramid-sort <file> --imports-only
npx pyramid-sort <file> --attributes-only
npx pyramid-sort <file> --types-only
npx pyramid-sort <file> --objects-only
npx pyramid-sort <file> --css-only

Workspace-wide scan and sort

From a project root (or any folder), matching files are collected using .pyramidsortrc.json extensions, the workspace .gitignore, and the same default skips as the extension (node_modules, .git, dist, build, out, coverage, .next, .turbo).

npx pyramid-sort . --scan
npx pyramid-sort . --scan --out=pyramid-sort-report.md
npx pyramid-sort . --sort-all
npx pyramid-sort . --sort-all --all-categories
npx pyramid-sort . --sort-all --check

--scan — Markdown report on stdout; exit code 1 if any issue is found (handy in CI).
--sort-all — rewrites files in place; respects sort*OnSave in .pyramidsortrc.json unless --all-categories is set. --check does not write; exits 1 if any file would change.
Per-file settings still come from the nearest .pyramidsortrc.json when you use monorepo layouts.

`.pyramidsortrc.json`

Example:

{
  "imports": {
    "direction": "ascending",
    "consolidateMultilineImports": true,
    "maxLineWidth": 0,
    "groupByEmptyRows": true
  },
  "attributes": {
    "direction": "ascending",
    "groupByEmptyRows": true
  },
  "types": {
    "direction": "ascending",
    "groupByEmptyRows": true
  },
  "objects": {
    "direction": "ascending",
    "groupByEmptyRows": true,
    "sortNestedObjects": false
  },
  "css": {
    "direction": "ascending",
    "groupByEmptyRows": true
  },
  "extensions": [".js", ".jsx", ".ts", ".tsx", ".css", ".scss"],
  "showDiagnostics": true,
  "diagnostics": {
    "imports": true,
    "attributes": true,
    "types": false,
    "objects": false,
    "css": false
  },
  "sortImportsOnSave": true,
  "sortAttributesOnSave": true,
  "sortTypesOnSave": false,
  "sortObjectsOnSave": false,
  "sortCssOnSave": false
}

Optional showDiagnostics, diagnostics, and sort*OnSave mirror VS Code settings and control CLI --scan / --sort-all batch behavior. .css / .scss / .less files are still processed when the run includes CSS sorting, independent of extensions.

Installation

Marketplace

Search for Pyramid Sort in the Extensions view, or:

code --install-extension INVEON-Development.pyramid-sort

VSIX

code --install-extension pyramid-sort-0.4.2.vsix

Credits

INVEON Development

Stefan Račić — stefan@inveon.dev

License

MIT

Pyramid Sort

INVEON Dev

Pyramid Sort

Features at a glance

Sorting

Auto direction ("auto")

Grouping and imports

Editor integration

CLI and AI workflows

Before / after

Imports

Attributes

Types (empty rows = groups)

Object literals

CSS

Commands

Settings

Diagnostics

Supported languages

CLI and AI hook

Hook setup

CLI

Workspace-wide scan and sort

.pyramidsortrc.json

Installation

Marketplace

VSIX

Credits

License

Auto direction (`"auto"`)

`.pyramidsortrc.json`