Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add `vue/no-unused-refs` rule * update doc
- Loading branch information
Showing
5 changed files
with
641 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| --- | ||
| pageClass: rule-details | ||
| sidebarDepth: 0 | ||
| title: vue/no-unused-refs | ||
| description: disallow unused refs | ||
| --- | ||
| # vue/no-unused-refs | ||
|
|
||
| > disallow unused refs | ||
| - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge> | ||
|
|
||
| ## :book: Rule Details | ||
|
|
||
| This rule is aimed at eliminating unused refs. | ||
| This rule reports refs that are defined using the `ref` attribute in `<template>` but are not used via `$refs`. | ||
|
|
||
| ::: warning Note | ||
| This rule cannot be checked for use in other components (e.g. `mixins`, Access via `$refs.x.$refs`). | ||
| ::: | ||
|
|
||
| <eslint-code-block :rules="{'vue/no-unused-refs': ['error']}"> | ||
|
|
||
| ```vue | ||
| <template> | ||
| <!-- ✓ GOOD --> | ||
| <input ref="foo" /> | ||
| <!-- ✗ BAD (`bar` is not used) --> | ||
| <input ref="bar" /> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| mounted() { | ||
| this.$refs.foo.value = 'foo' | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
|
|
||
| </eslint-code-block> | ||
|
|
||
| ## :wrench: Options | ||
|
|
||
| Nothing. | ||
|
|
||
| ## :mag: Implementation | ||
|
|
||
| - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unused-refs.js) | ||
| - [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-unused-refs.js) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,204 @@ | ||
| /** | ||
| * @fileoverview Disallow unused refs. | ||
| * @author Yosuke Ota | ||
| */ | ||
| 'use strict' | ||
|
|
||
| // ------------------------------------------------------------------------------ | ||
| // Requirements | ||
| // ------------------------------------------------------------------------------ | ||
|
|
||
| const utils = require('../utils') | ||
|
|
||
| // ------------------------------------------------------------------------------ | ||
| // Helpers | ||
| // ------------------------------------------------------------------------------ | ||
|
|
||
| /** | ||
| * Extract names from references objects. | ||
| * @param {VReference[]} references | ||
| */ | ||
| function getReferences(references) { | ||
| return references.filter((ref) => ref.variable == null).map((ref) => ref.id) | ||
| } | ||
|
|
||
| // ------------------------------------------------------------------------------ | ||
| // Rule Definition | ||
| // ------------------------------------------------------------------------------ | ||
|
|
||
| module.exports = { | ||
| meta: { | ||
| type: 'suggestion', | ||
| docs: { | ||
| description: 'disallow unused refs', | ||
| categories: undefined, | ||
| url: 'https://eslint.vuejs.org/rules/no-unused-refs.html' | ||
| }, | ||
| fixable: null, | ||
| schema: [], | ||
| messages: { | ||
| unused: "'{{name}}' is defined as ref, but never used." | ||
| } | ||
| }, | ||
| /** @param {RuleContext} context */ | ||
| create(context) { | ||
| /** @type {Set<string>} */ | ||
| const usedRefs = new Set() | ||
|
|
||
| /** @type {VLiteral[]} */ | ||
| const defineRefs = [] | ||
| let hasUnknown = false | ||
|
|
||
| /** | ||
| * Report all unused refs. | ||
| */ | ||
| function reportUnusedRefs() { | ||
| for (const defineRef of defineRefs) { | ||
| if (usedRefs.has(defineRef.value)) { | ||
| continue | ||
| } | ||
|
|
||
| context.report({ | ||
| node: defineRef, | ||
| messageId: 'unused', | ||
| data: { | ||
| name: defineRef.value | ||
| } | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Extract the use ref names for ObjectPattern. | ||
| * @param {ObjectPattern} node | ||
| * @returns {void} | ||
| */ | ||
| function extractUsedForObjectPattern(node) { | ||
| for (const prop of node.properties) { | ||
| if (prop.type === 'Property') { | ||
| const name = utils.getStaticPropertyName(prop) | ||
| if (name) { | ||
| usedRefs.add(name) | ||
| } else { | ||
| hasUnknown = true | ||
| return | ||
| } | ||
| } else { | ||
| hasUnknown = true | ||
| return | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * Extract the use ref names. | ||
| * @param {Identifier | MemberExpression} refsNode | ||
| * @returns {void} | ||
| */ | ||
| function extractUsedForPattern(refsNode) { | ||
| /** @type {Identifier | MemberExpression | ChainExpression} */ | ||
| let node = refsNode | ||
| while (node.parent.type === 'ChainExpression') { | ||
| node = node.parent | ||
| } | ||
| const parent = node.parent | ||
| if (parent.type === 'AssignmentExpression') { | ||
| if (parent.right === node) { | ||
| if (parent.left.type === 'ObjectPattern') { | ||
| // `({foo} = $refs)` | ||
| extractUsedForObjectPattern(parent.left) | ||
| } else if (parent.left.type === 'Identifier') { | ||
| // `foo = $refs` | ||
| hasUnknown = true | ||
| } | ||
| } | ||
| } else if (parent.type === 'VariableDeclarator') { | ||
| if (parent.init === node) { | ||
| if (parent.id.type === 'ObjectPattern') { | ||
| // `const {foo} = $refs` | ||
| extractUsedForObjectPattern(parent.id) | ||
| } else if (parent.id.type === 'Identifier') { | ||
| // `const foo = $refs` | ||
| hasUnknown = true | ||
| } | ||
| } | ||
| } else if (parent.type === 'MemberExpression') { | ||
| if (parent.object === node) { | ||
| // `$refs.foo` | ||
| const name = utils.getStaticPropertyName(parent) | ||
| if (name) { | ||
| usedRefs.add(name) | ||
| } else { | ||
| hasUnknown = true | ||
| } | ||
| } | ||
| } else if (parent.type === 'CallExpression') { | ||
| const argIndex = parent.arguments.indexOf(node) | ||
| if (argIndex > -1) { | ||
| // `foo($refs)` | ||
| hasUnknown = true | ||
| } | ||
| } else if ( | ||
| parent.type === 'ForInStatement' || | ||
| parent.type === 'ReturnStatement' | ||
| ) { | ||
| hasUnknown = true | ||
| } | ||
| } | ||
|
|
||
| return utils.defineTemplateBodyVisitor( | ||
| context, | ||
| { | ||
| /** | ||
| * @param {VExpressionContainer} node | ||
| */ | ||
| VExpressionContainer(node) { | ||
| if (hasUnknown) { | ||
| return | ||
| } | ||
| for (const id of getReferences(node.references)) { | ||
| if (id.name !== '$refs') { | ||
| continue | ||
| } | ||
| extractUsedForPattern(id) | ||
| } | ||
| }, | ||
| /** | ||
| * @param {VAttribute} node | ||
| */ | ||
| 'VAttribute[directive=false]'(node) { | ||
| if (hasUnknown) { | ||
| return | ||
| } | ||
| if (node.key.name === 'ref' && node.value != null) { | ||
| defineRefs.push(node.value) | ||
| } | ||
| }, | ||
| "VElement[parent.type!='VElement']:exit"() { | ||
| if (hasUnknown) { | ||
| return | ||
| } | ||
| reportUnusedRefs() | ||
| } | ||
| }, | ||
| { | ||
| Identifier(id) { | ||
| if (hasUnknown) { | ||
| return | ||
| } | ||
| if (id.name !== '$refs') { | ||
| return | ||
| } | ||
| /** @type {Identifier | MemberExpression} */ | ||
| let refsNode = id | ||
| if (id.parent.type === 'MemberExpression') { | ||
| if (id.parent.property === id) { | ||
| // `this.$refs.foo` | ||
| refsNode = id.parent | ||
| } | ||
| } | ||
| extractUsedForPattern(refsNode) | ||
| } | ||
| } | ||
| ) | ||
| } | ||
| } |
Oops, something went wrong.