Sort package.json, tsconfig.json, and VS Code settings.json Alphabetically — Free Online

Three JSON files get sorted more than any others: package.json, tsconfig.json, and settings.json. Alphabetized dependency lists mean two developers adding packages in the same week produce clean diffs instead of merge conflicts. Sorted tsconfig options are easier to audit. Sorted settings.json is easier to share with a team.

Paste your config into the JSON Key Sorter, click Sort, paste back. Works on any of these files. No install. For ongoing enforcement, use Prettier with a sort plugin — this post covers both.

Why Sort package.json

Merge conflicts are the number one reason. When two developers add dependencies in parallel, npm or yarn append the new entries to the end of the dependencies object. Git sees both additions at the same position and produces a conflict. Sorted dependencies put each new entry at its alphabetical position, so conflicts only happen when the same package is added twice (which should be rare).

Reviewing dependency changes is faster. "Did we add a new dependency?" is answered by scanning an alphabetized list. With random order, you have to read carefully.

The package.json spec does not care about order. npm and yarn read the object as a map. Alphabetizing breaks nothing.

Fields in package.json that benefit from sorting: dependencies, devDependencies, peerDependencies, optionalDependencies, scripts, engines. Top-level fields (name, version, main, etc.) have a conventional order that most teams preserve — you might not want to alphabetize those.

How to Sort package.json in 30 Seconds

1. Open your package.json in any editor. Copy the entire file (Ctrl+A, Ctrl+C).

2. Open the JSON Key Sorter. Paste into the input panel.

3. Make sure "Sort nested objects recursively" is checked. This is what sorts the dependencies and devDependencies sub-objects.

4. Click Sort Keys.

5. Copy the output and paste back into your package.json. Save, commit.

Caveat: the top-level keys (name, version, dependencies) will also be alphabetized, which some teams do not want. If you want dependencies sorted but top-level preserved, use a dedicated tool like sort-package-json npm package, which preserves conventional top-level order and only sorts the inner dependency maps.

Sorting tsconfig.json

tsconfig.json has a large compilerOptions object with 50+ possible fields. When you add a new option, the natural place is the bottom — which breaks any alphabetical convention already there.

Benefits of sorting: quickly locate any option by alphabetical scan, consistent across every project you maintain, cleaner diffs when upgrading TypeScript versions.

The process is identical to package.json — paste, sort, paste back. Recursion is important here so the compilerOptions sub-object also gets sorted (not just the top-level compilerOptions, include, exclude).

Edge case: some tsconfig files use extends to inherit from a base config. Sort the base AND the overriding config, so the diff when someone reviews your extend chain is clean.

Sell Custom Apparel — We Handle Printing & Free Shipping

Sorting VS Code settings.json

VS Code settings.json grows over time — you add a theme preference, a language-specific setting, an extension config. Before long it is 200 lines of unsorted settings.

Sorting makes it easier to find and remove obsolete settings. It also helps when you share your settings with a teammate — they can diff your sorted settings against their sorted settings and see exactly what differs.

Two practical approaches:

One-off cleanup: Paste settings.json into the browser sorter, sort, paste back.

Ongoing enforcement: VS Code has a "Sort on Save" option for settings.json specifically — search in settings for "Sort order" and enable for JSON. Or use Prettier with a sort plugin.

Same applies to .vscode/extensions.json, launch.json, and tasks.json.

Team-Wide Enforcement With Prettier + Plugin

If your team writes JSON config files often, manual sorting gets skipped. Automate it:

npm install -D prettier prettier-plugin-sort-json

Add .prettierrc:

{
  "plugins": ["prettier-plugin-sort-json"],
  "jsonRecursiveSort": true
}

Combine with husky + lint-staged for pre-commit sorting:

{
  "lint-staged": {
    "*.json": "prettier --write"
  }
}

Now every commit alphabetizes any JSON file that changed. No manual sorting, no forgotten cleanup. This is the right setup for teams where sorted JSON is a convention.

For individual use or teams that have not adopted this yet, the browser tool remains the zero-setup option.

The Dedicated sort-package-json Tool

For package.json specifically, there is a purpose-built npm package: sort-package-json.

npx sort-package-json

Runs in the current directory. Preserves the conventional top-level order (name, version, description, main, scripts, dependencies...) and alphabetizes the inner maps like dependencies and devDependencies.

This is what GitHub itself uses in many of its public repos. Standard tool for the job.

When it beats the browser tool: you want npm-style conventional ordering, you are scripting a repo cleanup, or you are adding pre-commit enforcement. When the browser beats it: one-off sort, no install required, immediate visual feedback.

Frequently Asked Questions

Does npm or yarn care about package.json key order?

No. Both read package.json as a map of key-value pairs. Sorting changes the byte representation but not the behavior. Your build, install, and publish all work identically before and after sorting.

Will sorting change npm-shrinkwrap.json or package-lock.json?

Not directly. Those files are generated by npm itself and have their own ordering (typically sorted already for lockfiles). If you sort package.json and then re-run npm install, the lockfile may update because installation order changed — but functionality stays the same.

Should I sort the top-level keys of package.json?

Depends on team convention. Many teams preserve the conventional order (name, version, main, scripts, dependencies) at the top level and only alphabetize the inner dependency objects. The sort-package-json npm tool does this automatically. Our browser tool alphabetizes everything, so review the top-level order after sorting.

Can I sort only the dependencies object, not the whole file?

Not directly in the browser tool — it sorts the whole input. Workaround: copy just the dependencies object, sort it, paste it back into the right place in the file. For automated selective sorting, use sort-package-json or Prettier with a plugin.