Sort JSON Keys With Prettier + ESLint — The Complete Team Enforcement Setup

"Make Prettier sort my JSON keys" is one of the top Stack Overflow questions for Prettier. The honest answer: out of the box, Prettier preserves key order. To alphabetize, you need the prettier-plugin-sort-json plugin plus a small config change. ESLint has its own sort-keys rule, but it only applies to JavaScript object literals in source code, not to .json config files.

This post covers the complete team enforcement setup — Prettier plugin, ESLint rule, and the pre-commit hook that ties it all together.

Prettier + prettier-plugin-sort-json Setup

Install the plugin:

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

Configure in .prettierrc or .prettierrc.json:

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

The jsonRecursiveSort option is important — without it, only top-level keys get sorted. With it, every nested object is alphabetized.

Test it:

npx prettier --write package.json

Open the file. Dependencies and devDependencies should now be alphabetized. If they are not, check that the plugin is in your node_modules and the .prettierrc is being read (run prettier --help-config package.json).

Excluding Files That Should Not Be Sorted

Some JSON files should not be sorted — test fixtures where order matters, OpenAPI specs with conventional top-level ordering, or generated files that will be overwritten.

Use .prettierignore:

# Test fixtures depend on specific order
tests/fixtures/**/*.json

# Auto-generated — no need to sort
dist/**/*.json
coverage/**/*.json

# OpenAPI has conventional field order
openapi.json
swagger.json

For partial control (sort dependencies but preserve top-level keys of package.json), the Prettier plugin alone cannot do this — it is all-or-nothing. Use the sort-package-json npm tool instead, which preserves conventional top-level order:

npx sort-package-json

Run this alongside Prettier for package.json specifically. Add to package.json scripts:

{
  "scripts": {
    "sort": "sort-package-json && prettier --write ."
  }
}

Sell Custom Apparel — We Handle Printing & Free Shipping

ESLint sort-keys for JavaScript Object Literals

ESLint has a sort-keys rule that applies to JavaScript object literals in source code — different scope than the Prettier JSON plugin.

// .eslintrc.json
{
  "rules": {
    "sort-keys": ["warn", "asc", { "caseSensitive": false, "natural": true }]
  }
}

This warns when object keys in your JS/TS source are not alphabetical. Use carefully — strict alphabetical enforcement in code objects can hurt readability when keys have logical grouping (config objects often group related settings together).

Practical pattern: turn on sort-keys for files that are effectively config (schema definitions, route tables, settings constants) and leave it off for general application code.

Config in ESLint 9+ flat config format:

// eslint.config.js
export default [
  {
    files: ["src/config/**/*.js"],
    rules: {
      "sort-keys": ["warn", "asc", { caseSensitive: false, natural: true }]
    }
  }
];

Tying It Together With a Pre-Commit Hook

The point of tooling is automation. Set up Husky + lint-staged so every commit auto-sorts JSON and lints JS:

npm install -D husky lint-staged
npx husky init

In package.json:

{
  "lint-staged": {
    "*.json": ["prettier --write"],
    "*.{js,ts,jsx,tsx}": ["eslint --fix", "prettier --write"]
  }
}

In .husky/pre-commit:

npx lint-staged

Now every commit sorts any JSON file touched and lints any JS/TS file touched. Alphabetization becomes a team convention without anyone having to remember to run anything manually.

Pair with CI: add prettier --check . as a CI step. If any JSON is unsorted, the build fails. This catches the rare case where someone bypasses pre-commit hooks.

When Prettier + Plugin Is Overkill

Setting up Prettier with sort plugin, Husky, lint-staged, and CI checks is a commitment. Worth it for teams of 3+ working on the same repo frequently. For smaller scenarios:

Solo project. You are the only one committing. Use our JSON Key Sorter manually when you want to alphabetize. No tooling needed.

Short-lived project. Prototype, hackathon, internal one-off. Tooling overhead outweighs the benefit.

You do not use npm. Non-JS repositories cannot easily use Prettier. For Python projects, use ruff or black for code plus a custom pre-commit hook calling python -m json.tool --sort-keys for JSON files.

The tooling stack is the right answer when you are sure the project will live for years and have multiple contributors. For one-off work, the browser tool is faster.

Frequently Asked Questions

Does Prettier sort JSON keys by default?

No. Prettier preserves the key order you wrote. Install prettier-plugin-sort-json and set jsonRecursiveSort: true in your .prettierrc to enable alphabetical sorting.

Can ESLint sort-keys rule apply to .json files?

No. ESLint sort-keys only applies to JavaScript/TypeScript object literals in source code. For .json files, use Prettier with a sort plugin instead. The two rules complement each other when both are configured.

Will the Prettier plugin break my package.json conventional top-level order?

Yes — it sorts everything including top-level keys. For package.json specifically, use the dedicated sort-package-json npm tool which preserves conventional order (name, version, scripts, dependencies) while sorting inner dependency objects.

Does sort-keys rule cause conflicts with Prettier?

No. sort-keys operates on JS/TS source code AST. Prettier operates on text formatting. They work on different files and produce compatible output. Use both without conflict.