Add array-join-separator rule (#1284)

Co-authored-by: Sindre Sorhus <[email protected]>

Author: fisker

docs/rules/array-join-separator.md

@@ -0,0 +1,37 @@
+# Enforce using the separator argument with `Array#join()`
+
+It's better to make it clear what the separator is when calling [Array#join()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join).
+
+This rule is fixable.
+
+## Fail
+
+```js
+const string = array.join();
+```
+
+```js
+const string = Array.prototype.join.call(arrayLike);
+```
+
+```js
+const string = [].join.call(arrayLike);
+```
+
+## Pass
+
+```js
+const string = array.join(',');
+```
+
+```js
+const string = array.join('|');
+```
+
+```js
+const string = Array.prototype.join.call(arrayLike, '');
+```
+
+```js
+const string = [].join.call(arrayLike, '\n');
+```

index.js

@@ -39,6 +39,7 @@ module.exports = {
 				'unicorn'
 			],
 			rules: {
+				'unicorn/array-join-separator': 'error',
 				'unicorn/better-regex': 'error',
 				'unicorn/catch-error-name': 'error',
 				'unicorn/consistent-destructuring': 'error',

readme.md

@@ -35,6 +35,7 @@ Configure it in `package.json`.
 			"unicorn"
 		],
 		"rules": {
+			"unicorn/array-join-separator": "error",
 			"unicorn/better-regex": "error",
 			"unicorn/catch-error-name": "error",
 			"unicorn/consistent-destructuring": "error",
@@ -132,6 +133,7 @@ Each rule has emojis denoting:
 
 | Name                                          | Description | ✅ | 🔧 |
 | :-- | :-- | :-- | :-- |
+| [array-join-separator](docs/rules/array-join-separator.md) | Enforce using the separator argument with `Array#join()`. | ✅ | 🔧 |
 | [better-regex](docs/rules/better-regex.md) | Improve regexes by making them shorter, consistent, and safer. | ✅ | 🔧 |
 | [catch-error-name](docs/rules/catch-error-name.md) | Enforce a specific parameter name in catch clauses. | ✅ | 🔧 |
 | [consistent-destructuring](docs/rules/consistent-destructuring.md) | Use destructured variables over properties. | ✅ | 🔧 |

rules/array-join-separator.js

@@ -0,0 +1,104 @@
+'use strict';
+const {isCommaToken} = require('eslint-utils');
+const getDocumentationUrl = require('./utils/get-documentation-url');
+const methodSelector = require('./utils/method-selector');
+
+const MESSAGE_ID = 'array-join-separator';
+const messages = {
+	[MESSAGE_ID]: 'Missing the separator argument.'
+};
+
+const emptyArraySelector = path => {
+	const prefix = `${path}.`;
+	return [
+		`[${prefix}type="ArrayExpression"]`,
+		`[${prefix}elements.length=0]`
+	].join('');
+};
+
+const memberExpressionSelector = (path, {property, object}) => {
+	const prefix = `${path}.`;
+
+	const parts = [
+		`[${prefix}type="MemberExpression"]`,
+		`[${prefix}computed=false]`,
+		`[${prefix}optional!=true]`,
+		`[${prefix}property.type="Identifier"]`,
+		`[${prefix}property.name="${property}"]`
+	];
+
+	if (object) {
+		parts.push(
+			`[${prefix}object.type="Identifier"]`,
+			`[${prefix}object.name="${object}"]`
+		);
+	}
+
+	return parts.join('');
+};
+
+// `foo.join()`
+const arrayJoin = methodSelector({
+	name: 'join',
+	length: 0
+});
+
+// `[].join.call(foo)` and `Array.prototype.join.call(foo)`
+const arrayPrototypeJoin = [
+	methodSelector({
+		name: 'call',
+		length: 1
+	}),
+	memberExpressionSelector('callee.object', {property: 'join'}),
+	`:matches(${
+		[
+			emptyArraySelector('callee.object.object'),
+			memberExpressionSelector('callee.object.object', {property: 'prototype', object: 'Array'})
+		].join(', ')
+	})`
+].join('');
+
+const selector = `:matches(${arrayJoin}, ${arrayPrototypeJoin})`;
+
+/** @param {import('eslint').Rule.RuleContext} context */
+const create = context => {
+	return {
+		[selector](node) {
+			const [penultimateToken, lastToken] = context.getSourceCode().getLastTokens(node, 2);
+			const isPrototypeMethod = node.arguments.length === 1;
+			context.report({
+				loc: {
+					start: penultimateToken.loc[isPrototypeMethod ? 'end' : 'start'],
+					end: lastToken.loc.end
+				},
+				messageId: MESSAGE_ID,
+				/** @param {import('eslint').Rule.RuleFixer} fixer */
+				fix(fixer) {
+					let text = '\',\'';
+
+					if (isPrototypeMethod) {
+						text = isCommaToken(penultimateToken) ? `${text},` : `, ${text}`;
+					}
+
+					return fixer.insertTextBefore(lastToken, text);
+				}
+			});
+		}
+	};
+};
+
+const schema = [];
+
+module.exports = {
+	create,
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description: 'Enforce using the separator argument with `Array#join()`.',
+			url: getDocumentationUrl(__filename)
+		},
+		fixable: 'code',
+		schema,
+		messages
+	}
+};

test/array-join-separator.mjs

@@ -0,0 +1,75 @@
+import outdent from 'outdent';
+import {getTester} from './utils/test.mjs';
+
+const {test} = getTester(import.meta);
+
+test.snapshot({
+	valid: [
+		'foo.join(",")',
+		'join()',
+		'foo.join(...[])',
+		'foo?.join()',
+		'foo[join]()',
+		'foo["join"]()',
+		'[].join.call(foo, ",")',
+		'[].join.call()',
+		'[].join.call(...[foo])',
+		'[].join?.call(foo)',
+		'[]?.join.call(foo)',
+		'[].join[call](foo)',
+		'[][join].call(foo)',
+		'[,].join.call(foo)',
+		'[].join.notCall(foo)',
+		'[].notJoin.call(foo)',
+		'Array.prototype.join.call(foo, "")',
+		'Array.prototype.join.call()',
+		'Array.prototype.join.call(...[foo])',
+		'Array.prototype.join?.call(foo)',
+		'Array.prototype?.join.call(foo)',
+		'Array?.prototype.join.call(foo)',
+		'Array.prototype.join[call](foo, "")',
+		'Array.prototype[join].call(foo)',
+		'Array[prototype].join.call(foo)',
+		'Array.prototype.join.notCall(foo)',
+		'Array.prototype.notJoin.call(foo)',
+		'Array.notPrototype.join.call(foo)',
+		'NotArray.prototype.join.call(foo)',
+		'path.join(__dirname, "./foo.js")'
+	],
+	invalid: [
+		'foo.join()',
+		'[].join.call(foo)',
+		'[].join.call(foo,)',
+		'[].join.call(foo , );',
+		'Array.prototype.join.call(foo)',
+		'Array.prototype.join.call(foo, )',
+		outdent`
+			(
+				/**/
+				[
+					/**/
+				]
+					/**/
+					.
+					/**/
+					join
+					/**/
+					.
+					/**/
+					call
+					/**/
+					(
+						/**/
+						(
+							/**/
+							foo
+							/**/
+						)
+						/**/
+						,
+						/**/
+					)/**/
+			)
+		`
+	]
+});