syncpack format orders dependencies differently than npm does

[jenseng]

Description

syncpack format orders dependencies differently than npm does, so package.json can easily become "unformatted" every time you install a new package (npm likes to re-sort things). This is most noticeable if a dependency begins with a number (e.g. 5to6-codemod); syncpack will sort it before any scoped deps (presumably because of this), whereas npm puts scoped deps first (since it uses localeCompare when sorting).

Basic repro:

• npm i 5to6-codemod @babel/register
• Note that @babel/register appears before 5to6-codemod in package.json
• npx syncpack format
• Note that @babel/register now appears after 5to6-codemod
• npm i @babel/types
• Note that @babel/* again appears before 5to6-codemod
• npx syncpack lint fails linting

While you can mostly work around this by running syncpack format in a pre-commit hook, this isn't always feasible (e.g. if you have automated processes that are updating packages ... in that case those also need to explicitly run syncpack format)

Suggested Solution

syncpack should sort dependencies the same way that npm does (using a localeCompare-based sort, rather than a vanilla sort)

[JamieMason]

Great spot @jenseng, thanks a lot.

Syncpack is just doing a completely basic .sort() which I wrongly thought would be enough, thanks for pointing this out.

syncpack/src/bin-format/format.ts

Lines 120 to 126 in db2b31c

	function sortAlphabetically(value: unknown): void {
	if (isArray(value)) {
	value.sort();
	} else if (isObject(value)) {
	sortObject(Object.keys(value).sort(), value);
	}
	}

[JamieMason]

Released in 12.4.0