Add prefer-query-selector rule (#198)

Fixes #171

docs/rules/prefer-query-selector.md

@@ -0,0 +1,25 @@
+# Prefer `querySelector` over `getElementById`, `querySelectorAll` over `getElementsByClassName` and `getElementsByTagName`
+
+They are not faster than `querySelector` and it's better to be consistent.
+
+
+## Fail
+
+```js
+document.getElementById('foo');
+document.getElementsByClassName('foo bar');
+document.getElementsByTagName('main');
+document.getElementsByClassName(fn());
+```
+
+
+## Pass
+
+```js
+document.querySelector('#foo');
+document.querySelector('.bar');
+document.querySelector('main #foo .bar');
+document.querySelectorAll('.foo .bar');
+document.querySelectorAll('li a');
+document.querySelector('li').querySelectorAll('a');
+```

index.js

@@ -53,7 +53,8 @@ module.exports = {
 				'unicorn/no-console-spaces': 'error',
 				'unicorn/no-unreadable-array-destructuring': 'error',
 				'unicorn/no-unused-properties': 'off',
-				'unicorn/prefer-node-append': 'error'
+				'unicorn/prefer-node-append': 'error',
+				'unicorn/prefer-query-selector': 'error'
 			}
 		}
 	}

readme.md

@@ -70,7 +70,8 @@ Configure it in `package.json`.
 			"unicorn/no-console-spaces": "error",
 			"unicorn/no-unreadable-array-destructuring": "error",
 			"unicorn/no-unused-properties": "off",
-			"unicorn/prefer-node-append": "error"
+			"unicorn/prefer-node-append": "error",
+			"unicorn/prefer-query-selector": "error"
 		}
 	}
 }
@@ -106,6 +107,7 @@ Configure it in `package.json`.
 - [no-unreadable-array-destructuring](docs/rules/no-unreadable-array-destructuring.md) - Disallow unreadable array destructuring.
 - [no-unused-properties](docs/rules/no-unused-properties.md) - Disallow unused object properties.
 - [prefer-node-append](docs/rules/prefer-node-append.md) - Prefer `append` over `appendChild`. *(fixable)*
+- [prefer-query-selector](docs/rules/prefer-query-selector.md) - Prefer `querySelector` over `getElementById`, `querySelectorAll` over `getElementsByClassName` and `getElementsByTagName`. *(partly fixable)*
 
 
 ## Recommended config

rules/prefer-query-selector.js

@@ -0,0 +1,117 @@
+'use strict';
+const getDocsUrl = require('./utils/get-docs-url');
+
+const forbiddenIdentifierNames = new Map([
+	['getElementById', 'querySelector'],
+	['getElementsByClassName', 'querySelectorAll'],
+	['getElementsByTagName', 'querySelectorAll']
+]);
+
+const getReplacementForId = value => `#${value}`;
+const getReplacementForClass = value => value.match(/\S+/g).map(e => `.${e}`).join('');
+const getQuotedReplacement = (node, value) => {
+	const leftQuote = node.raw.charAt(0);
+	const rightQuote = node.raw.charAt(node.raw.length - 1);
+	return `${leftQuote}${value}${rightQuote}`;
+};
+
+const getLiteralFix = (fixer, node, identifierName) => {
+	let replacement = node.raw;
+	if (identifierName === 'getElementById') {
+		replacement = getQuotedReplacement(node, getReplacementForId(node.value));
+	}
+
+	if (identifierName === 'getElementsByClassName') {
+		replacement = getQuotedReplacement(node, getReplacementForClass(node.value));
+	}
+
+	return [fixer.replaceText(node, replacement)];
+};
+
+const getTemplateLiteralFix = (fixer, node, identifierName) => {
+	const fix = [fixer.insertTextAfter(node, '`'), fixer.insertTextBefore(node, '`')];
+
+	node.quasis.forEach(templateElement => {
+		if (identifierName === 'getElementById') {
+			fix.push(fixer.replaceText(templateElement, getReplacementForId(templateElement.value.cooked)));
+		}
+
+		if (identifierName === 'getElementsByClassName') {
+			fix.push(fixer.replaceText(templateElement, getReplacementForClass(templateElement.value.cooked)));
+		}
+	});
+
+	return fix;
+};
+
+const canBeFixed = node => {
+	if (node.type === 'Literal') {
+		return node.value === null || Boolean(node.value.trim());
+	}
+
+	if (node.type === 'TemplateLiteral') {
+		return node.expressions.length === 0 &&
+			node.quasis.some(templateElement => templateElement.value.cooked.trim());
+	}
+
+	return false;
+};
+
+const hasValue = node => {
+	if (node.type === 'Literal') {
+		return node.value;
+	}
+
+	return true;
+};
+
+const fix = (node, identifierName, preferedSelector) => {
+	const nodeToBeFixed = node.arguments[0];
+	if (identifierName === 'getElementsByTagName' || !hasValue(nodeToBeFixed)) {
+		return fixer => fixer.replaceText(node.callee.property, preferedSelector);
+	}
+
+	const getArgumentFix = nodeToBeFixed.type === 'Literal' ? getLiteralFix : getTemplateLiteralFix;
+	return fixer => [
+		...getArgumentFix(fixer, nodeToBeFixed, identifierName),
+		fixer.replaceText(node.callee.property, preferedSelector)
+	];
+};
+
+const create = context => {
+	return {
+		CallExpression(node) {
+			const {callee: {property, type}} = node;
+			if (!property || type !== 'MemberExpression') {
+				return;
+			}
+
+			const identifierName = property.name;
+			const preferedSelector = forbiddenIdentifierNames.get(identifierName);
+			if (!preferedSelector) {
+				return;
+			}
+
+			const report = {
+				node,
+				message: `Prefer \`${preferedSelector}\` over \`${identifierName}\`.`
+			};
+
+			if (canBeFixed(node.arguments[0])) {
+				report.fix = fix(node, identifierName, preferedSelector);
+			}
+
+			context.report(report);
+		}
+	};
+};
+
+module.exports = {
+	create,
+	meta: {
+		docs: {
+			url: getDocsUrl(__filename)
+		},
+		fixable: 'code'
+	}
+};

test/prefer-query-selector.js

@@ -0,0 +1,124 @@
+import test from 'ava';
+import avaRuleTester from 'eslint-ava-rule-tester';
+import rule from '../rules/prefer-query-selector';
+
+const ruleTester = avaRuleTester(test, {
+	env: {
+		es6: true
+	}
+});
+
+ruleTester.run('prefer-query-selector', rule, {
+	valid: [
+		'document.querySelector("#foo");',
+		'document.querySelector(".bar");',
+		'document.querySelector("main #foo .bar");',
+		'document.querySelectorAll(".foo .bar");',
+		'document.querySelectorAll("li a");',
+		'document.querySelector("li").querySelectorAll("a");'
+	],
+	invalid: [
+		{
+			code: 'document.getElementById("foo");',
+			errors: [{message: 'Prefer `querySelector` over `getElementById`.'}],
+			output: 'document.querySelector("#foo");'
+		},
+		{
+			code: 'document.getElementsByClassName("foo");',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}],
+			output: 'document.querySelectorAll(".foo");'
+		},
+		{
+			code: 'document.getElementsByClassName("foo bar");',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}],
+			output: 'document.querySelectorAll(".foo.bar");'
+		},
+		{
+			code: 'document.getElementsByTagName("foo");',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByTagName`.'}],
+			output: 'document.querySelectorAll("foo");'
+		},
+		{
+			code: 'document.getElementById("");',
+			errors: [{message: 'Prefer `querySelector` over `getElementById`.'}]
+		},
+		{
+			code: 'document.getElementById(\'foo\');',
+			errors: [{message: 'Prefer `querySelector` over `getElementById`.'}],
+			output: 'document.querySelector(\'#foo\');'
+		},
+		{
+			code: 'document.getElementsByClassName(\'foo\');',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}],
+			output: 'document.querySelectorAll(\'.foo\');'
+		},
+		{
+			code: 'document.getElementsByClassName(\'foo bar\');',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}],
+			output: 'document.querySelectorAll(\'.foo.bar\');'
+		},
+		{
+			code: 'document.getElementsByTagName(\'foo\');',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByTagName`.'}],
+			output: 'document.querySelectorAll(\'foo\');'
+		},
+		{
+			code: 'document.getElementsByClassName(\'\');',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}]
+		},
+		{
+			code: 'document.getElementById(`foo`);',
+			errors: [{message: 'Prefer `querySelector` over `getElementById`.'}],
+			output: 'document.querySelector(`#foo`);'
+		},
+		{
+			code: 'document.getElementsByClassName(`foo`);',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}],
+			output: 'document.querySelectorAll(`.foo`);'
+		},
+		{
+			code: 'document.getElementsByClassName(`foo bar`);',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}],
+			output: 'document.querySelectorAll(`.foo.bar`);'
+		},
+		{
+			code: 'document.getElementsByTagName(`foo`);',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByTagName`.'}],
+			output: 'document.querySelectorAll(`foo`);'
+		},
+		{
+			code: 'document.getElementsByTagName(``);',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByTagName`.'}]
+		},
+		{
+			code: 'document.getElementsByClassName(`${fn()}`);', // eslint-disable-line no-template-curly-in-string
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}]
+		},
+		{
+			code: 'document.getElementsByClassName(`foo ${undefined}`);', // eslint-disable-line no-template-curly-in-string
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}]
+		},
+		{
+			code: 'document.getElementsByClassName(null);',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}],
+			output: 'document.querySelectorAll(null);'
+		},
+		{
+			code: 'document.getElementsByTagName(null);',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByTagName`.'}],
+			output: 'document.querySelectorAll(null);'
+		},
+		{
+			code: 'document.getElementsByClassName(fn());',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}]
+		},
+		{
+			code: 'document.getElementsByClassName("foo" + fn());',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}]
+		},
+		{
+			code: 'document.getElementsByClassName(foo + "bar");',
+			errors: [{message: 'Prefer `querySelectorAll` over `getElementsByClassName`.'}]
+		}
+	]
+});