⭐️New: Add vue/valid-slot-scope rule

ota-meshi · ota-meshi · commit c51cbe24a1f3 · 2018-11-17T21:40:30.000+09:00
diff --git a/README.md b/README.md
@@ -238,6 +238,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | :wrench: | [vue/script-indent](./docs/rules/script-indent.md) | enforce consistent indentation in `<script>` |
 | :wrench: | [vue/singleline-html-element-content-newline](./docs/rules/singleline-html-element-content-newline.md) | require a line break before and after the contents of a singleline element |
 |  | [vue/use-v-on-exact](./docs/rules/use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |
+|  | [vue/valid-slot-scope](./docs/rules/valid-slot-scope.md) | enforce valid `slot-scope` attributes |
 
 ### Deprecated
 
diff --git a/docs/rules/valid-slot-scope.md b/docs/rules/valid-slot-scope.md
@@ -0,0 +1,74 @@
+# enforce valid `slot-scope` attributes (vue/valid-slot-scope)
+
+This rule checks whether every `slot-scope` (or `scope`) attributes is valid.
+
+## :book: Rule Details
+
+This rule reports `slot-scope` attributes in the following cases:
+
+- The `slot-scope` attribute does not have that attribute value. E.g. `<div slot-scope></div>`
+- The `slot-scope` attribute have the attribute value which is extra access to slot data. E.g. `<div slot-scope="prop, extra"></div>`
+- The `slot-scope` attribute have the attribute value which is rest parameter. E.g. `<div slot-scope="...props"></div>`
+
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+
+:-1: Examples of **incorrect** code for this rule:
+
+```vue
+<template>
+  <TheComponent>
+    <template slot-scope>
+      ...
+    </template>
+  </TheComponent>
+  <TheComponent>
+    <template slot-scope="">
+      ...
+    </template>
+  </TheComponent>
+  <TheComponent>
+    <template slot-scope="a, b, c">
+      <!-- `b` and `c` are extra access. -->
+      ...
+    </template>
+  </TheComponent>
+  <TheComponent>
+    <template slot-scope="...props">
+      ...
+    </template>
+  </TheComponent>
+</template>
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```vue
+<template>
+  <TheComponent>
+    <template slot-scope="prop">
+      ...
+    </template>
+  </TheComponent>
+  <TheComponent>
+    <template slot-scope="{ a, b, c }">
+      ...
+    </template>
+  </TheComponent>
+  <TheComponent>
+    <template slot-scope="[ a, b, c ]">
+      ...
+    </template>
+  </TheComponent>
+</template>
+```
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related rules
+
+- [no-parsing-error]
+
+
+[no-parsing-error]: no-parsing-error.md
diff --git a/lib/index.js b/lib/index.js
@@ -55,6 +55,7 @@ module.exports = {
     'use-v-on-exact': require('./rules/use-v-on-exact'),
     'v-bind-style': require('./rules/v-bind-style'),
     'v-on-style': require('./rules/v-on-style'),
+    'valid-slot-scope': require('./rules/valid-slot-scope'),
     'valid-template-root': require('./rules/valid-template-root'),
     'valid-v-bind': require('./rules/valid-v-bind'),
     'valid-v-cloak': require('./rules/valid-v-cloak'),
diff --git a/lib/rules/valid-slot-scope.js b/lib/rules/valid-slot-scope.js
@@ -0,0 +1,137 @@
+/**
+ * @fileoverview enforce valid `slot-scope` attributes
+ * @author Yosuke Ota
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * Check whether the given token is a comma.
+ * @param {Token} token The token to check.
+ * @returns {boolean} `true` if the token is a comma.
+ */
+function isComma (token) {
+  return token != null && token.type === 'Punctuator' && token.value === ','
+}
+
+/**
+ * Check whether the given token is a quote.
+ * @param {Token} token The token to check.
+ * @returns {boolean} `true` if the token is a quote.
+ */
+function isQuote (token) {
+  return token != null && token.type === 'Punctuator' && (token.value === '"' || token.value === "'")
+}
+
+/**
+ * Gets the extra access parameter tokens of the given slot-scope node.
+ * @param {ASTNode} node The slot-scope node to check.
+ * @param {TokenStore} tokenStore The TokenStore.
+ * @returns {Array} the extra tokens.
+ */
+function getExtraAccessParameterTokens (node, tokenStore) {
+  const valueNode = node.value
+  const result = []
+  const valueFirstToken = tokenStore.getFirstToken(valueNode)
+  const valueLastToken = tokenStore.getLastToken(valueNode)
+  const exprLastToken = isQuote(valueFirstToken) && isQuote(valueLastToken) && valueFirstToken.value === valueLastToken.value
+    ? tokenStore.getTokenBefore(valueLastToken)
+    : valueLastToken
+  const idLastToken = tokenStore.getLastToken(valueNode.expression.id)
+  if (idLastToken !== exprLastToken) {
+    // e.g. `<div slot-scope="a, b">`
+    //                         ^^^ Invalid
+    result.push(...tokenStore.getTokensBetween(idLastToken, exprLastToken))
+    result.push(exprLastToken)
+  }
+
+  return result
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'enforce valid `slot-scope` attributes',
+      category: undefined,
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.4/docs/rules/valid-slot-scope.md'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      expectedValue: "'{{attrName}}' attributes require a value.",
+      unexpectedRestParameter: 'The top level rest parameter is useless.',
+      unexpectedExtraAccessParams: 'Unexpected extra access parameters `{{value}}`.',
+      unexpectedTrailingComma: 'Unexpected trailing comma.'
+    }
+  },
+
+  create (context) {
+    const tokenStore =
+      context.parserServices.getTemplateBodyTokenStore &&
+      context.parserServices.getTemplateBodyTokenStore()
+    return utils.defineTemplateBodyVisitor(context, {
+      'VAttribute[directive=true][key.name=/^(slot-)?scope$/]' (node) {
+        if (!utils.hasAttributeValue(node)) {
+          context.report({
+            node,
+            loc: node.loc,
+            messageId: 'expectedValue',
+            data: { attrName: node.key.name }
+          })
+          return
+        }
+
+        const idNode = node.value.expression.id
+        if (idNode.type === 'RestElement') {
+          // e.g. `<div slot-scope="...a">`
+          context.report({
+            node: idNode,
+            loc: idNode.loc,
+            messageId: 'unexpectedRestParameter'
+          })
+        }
+
+        const extraAccessParameterTokens = getExtraAccessParameterTokens(node, tokenStore)
+        if (extraAccessParameterTokens.length) {
+          const startToken = extraAccessParameterTokens[0]
+          if (extraAccessParameterTokens.length === 1 && isComma(startToken)) {
+            context.report({
+              node: startToken,
+              loc: startToken.loc,
+              messageId: 'unexpectedTrailingComma'
+            })
+          } else {
+            const endToken = extraAccessParameterTokens[extraAccessParameterTokens.length - 1]
+            const value = context.getSourceCode().text.slice(
+              extraAccessParameterTokens.length > 1 && isComma(startToken)
+                ? extraAccessParameterTokens[1].range[0]
+                : startToken.range[0],
+              endToken.range[1]
+            )
+            context.report({
+              loc: {
+                start: startToken.loc.start,
+                end: endToken.loc.end
+              },
+              messageId: 'unexpectedExtraAccessParams',
+              data: { value }
+            })
+          }
+        }
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/valid-slot-scope.js b/tests/lib/rules/valid-slot-scope.js
