Back to Biomejs

useArraySortCompare

src/content/docs/linter/rules/use-array-sort-compare.mdx

latest4.7 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: :::note This rule belongs to the types domain. This means that its activation will activate the Biome Scanner to scan the files of your project, and enable the type inference engine. Read more about it in the [documentation page](/linter/domains#types) ::: ## Summary - Rule available since: `v2.3.5` - Diagnostic Category: [`lint/nursery/useArraySortCompare`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`types`](/linter/domains#types) - Sources: - Same as [`@typescript-eslint/require-array-sort-compare`](https://typescript-eslint.io/rules/require-array-sort-compare)

How to configure

json
{
	"linter": {
		"rules": {
			"nursery": {
				"useArraySortCompare": "error"
			}
		}
	}
}

Description

Require Array#sort and Array#toSorted calls to always provide a compareFunction.

When called without a compare function, Array#sort() and Array#toSorted() converts all non-undefined array elements into strings and then compares said strings based off their UTF-16 code units ECMA specification.

The result is that elements are sorted alphabetically, regardless of their type. For example, when sorting numbers, this results in a "10 before 2" order:

ts
[1, 2, 3, 10, 20, 30].sort(); //→ [1, 10, 2, 20, 3, 30]

This rule reports on any call to the sort methods that do not provide a compare argument.

Examples

Invalid

ts
const array: any[] = [];
array.sort();
<pre class="language-text"><code class="language-text"><a href="file:///invalid.ts">/invalid.ts</a>:2:1 <a href="https://biomejs.dev/linter/rules/use-array-sort-compare">lint/nursery/useArraySortCompare</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Compare function missing.</span> <strong>1 │ </strong>const array: any[] = []; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong>array.sort(); <strong> │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">When called without a compare function, Array#sort() and Array#toSorted() converts all non-undefined array elements into strings and then compares said strings based off their UTF-16 code units.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Add a compare function to prevent unexpected sorting.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre>

Valid

ts
const array: any[] = [];
array.sort((a, b) => a - b);
</TabItem> </Tabs>