sindresorhus/eslint-plugin-unicorn

Rule proposal: `prefer-scoped-selector`

Closed

#1,429 opened on Jul 16, 2021

View on GitHubContributor guide
 (5 comments) (2 reactions) (0 assignees)JavaScript (468 forks)user submission
help wantednew rule

Repository metrics

Stars
 (5,022 stars)
PR merge metrics
 (Avg merge 1d 16h) (399 merged PRs in 30d)

Description

Many people don't know the Element.querySelector() and Element.querySelectorAll() behaves differently than most common JavaScript DOM libraries, details.

Got the idea here

Fail

const inner = element.querySelectorAll('.outer .inner');

Pass

const inner = document.querySelectorAll('.outer .inner');

const inner = element.querySelectorAll(':scope .outer .inner');

I'm not sure about these, they are never going to get wrong result.

const inner = element.querySelectorAll('.a');

const inner = element.querySelectorAll('.a + .b');

Should we enforce them consistently, or only check descendant combinator and child combinator?

Contributor guide

Research direction
First, read the linked issue comment (#1404) and understand the user notes for Element.querySelectorAll. Then, explore the eslint plugin unicorn repository's rules directory to see existing rule implementations for patterns. The main decision is whether the rule should flag any selector starting with a descendant or child combinator when called on an element, or only when the selector has a leading space (descendant). Review discussions in the issue comments to gauge maintainer preference. Implement the rule in a new file under rules/, add tests, and update the docs. Focus on AST detection of CallExpression with callee property 'querySelector' or 'querySelectorAll' and a TemplateLiteral or Literal argument.
Tech stack
javascript
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Mostly clear
Prerequisites
ESLint plugin developmentJavaScript ASTCSS selectors
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40