Fix false positives and false negatives for no-missing-keys and no-unused-keys rules (#302)

Author: ota-meshi

lib/rules/no-dynamic-keys.ts

@@ -1,29 +1,11 @@
 /**
  * @author kazuya kawaguchi (a.k.a. kazupon)
  */
-import { defineTemplateBodyVisitor } from '../utils/index'
+import { defineTemplateBodyVisitor, isStaticLiteral } from '../utils/index'
 import type { RuleContext, RuleListener } from '../types'
 import type { AST as VAST } from 'vue-eslint-parser'
 import { createRule } from '../utils/rule'
 
-function isStatic(
-  node:
-    | VAST.ESLintExpression
-    | VAST.ESLintSpreadElement
-    | VAST.VFilterSequenceExpression
-    | VAST.VForExpression
-    | VAST.VOnExpression
-    | VAST.VSlotScopeExpression
-): boolean {
-  if (node.type === 'Literal') {
-    return true
-  }
-  if (node.type === 'TemplateLiteral' && node.expressions.length === 0) {
-    return true
-  }
-  return false
-}
-
 function getNodeName(context: RuleContext, node: VAST.Node): string {
   if (node.type === 'Identifier') {
     return node.name
@@ -50,7 +32,7 @@ function checkDirective(context: RuleContext, node: VAST.VDirective) {
     node.value &&
     node.value.type === 'VExpressionContainer' &&
     node.value.expression &&
-    !isStatic(node.value.expression)
+    !isStaticLiteral(node.value.expression)
   ) {
     const name = getNodeName(context, node.value.expression)
     context.report({
@@ -70,7 +52,7 @@ function checkComponent(context: RuleContext, node: VAST.VDirectiveKey) {
     node.parent.value &&
     node.parent.value.type === 'VExpressionContainer' &&
     node.parent.value.expression &&
-    !isStatic(node.parent.value.expression)
+    !isStaticLiteral(node.parent.value.expression)
   ) {
     const name = getNodeName(context, node.parent.value.expression)
     context.report({
@@ -100,7 +82,7 @@ function checkCallExpression(
   }
 
   const [keyNode] = node.arguments
-  if (!isStatic(keyNode)) {
+  if (!isStaticLiteral(keyNode)) {
     const name = getNodeName(context, keyNode)
     context.report({
       node,

lib/rules/no-missing-keys.ts

@@ -1,7 +1,12 @@
 /**
  * @author kazuya kawaguchi (a.k.a. kazupon)
  */
-import { defineTemplateBodyVisitor, getLocaleMessages } from '../utils/index'
+import {
+  defineTemplateBodyVisitor,
+  getLocaleMessages,
+  getStaticLiteralValue,
+  isStaticLiteral
+} from '../utils/index'
 import type { AST as VAST } from 'vue-eslint-parser'
 import type { RuleContext, RuleListener } from '../types'
 import { createRule } from '../utils/rule'
@@ -45,10 +50,9 @@ function checkDirective(context: RuleContext, node: VAST.VDirective) {
   if (
     node.value &&
     node.value.type === 'VExpressionContainer' &&
-    node.value.expression &&
-    node.value.expression.type === 'Literal'
+    isStaticLiteral(node.value.expression)
   ) {
-    const key = node.value.expression.value
+    const key = getStaticLiteralValue(node.value.expression)
     if (!key) {
       // TODO: should be error
       return
@@ -111,11 +115,11 @@ function checkCallExpression(
   }
 
   const [keyNode] = node.arguments
-  if (keyNode.type !== 'Literal') {
+  if (!isStaticLiteral(keyNode)) {
     return
   }
 
-  const key = keyNode.value
+  const key = getStaticLiteralValue(keyNode)
   if (!key) {
     // TODO: should be error
     return

lib/rules/no-raw-text.ts

@@ -4,7 +4,10 @@
 import { parse, AST as VAST } from 'vue-eslint-parser'
 import type { AST as JSONAST } from 'jsonc-eslint-parser'
 import { parseJSON, getStaticJSONValue } from 'jsonc-eslint-parser'
+import type { StaticLiteral } from '../utils/index'
 import {
+  getStaticLiteralValue,
+  isStaticLiteral,
   defineTemplateBodyVisitor,
   getLocaleMessages,
   getStaticAttributes,
@@ -28,11 +31,7 @@ import { createRule } from '../utils/rule'
 import { toRegExp } from '../utils/regexp'
 
 type LiteralValue = VAST.ESLintLiteral['value']
-type StaticTemplateLiteral = VAST.ESLintTemplateLiteral & {
-  quasis: [VAST.ESLintTemplateElement]
-  expressions: [/* empty */]
-}
-type TemplateOptionValueNode = VAST.ESLintLiteral | StaticTemplateLiteral
+type TemplateOptionValueNode = StaticLiteral
 type NodeScope = 'template' | 'template-option' | 'jsx'
 type TargetAttrs = { name: RegExp; attrs: Set<string> }
 type Config = {
@@ -76,24 +75,8 @@ function getTargetAttrs(tagName: string, config: Config): Set<string> {
   return new Set(result)
 }
 
-function isStaticTemplateLiteral(
-  node:
-    | VAST.ESLintExpression
-    | VAST.VExpressionContainer['expression']
-    | VAST.ESLintPattern
-): node is StaticTemplateLiteral {
-  return Boolean(
-    node && node.type === 'TemplateLiteral' && node.expressions.length === 0
-  )
-}
 function calculateRange(
-  node:
-    | VAST.ESLintLiteral
-    | StaticTemplateLiteral
-    | VAST.VText
-    | JSXText
-    | VAST.VLiteral
-    | VAST.VIdentifier,
+  node: StaticLiteral | VAST.VText | JSXText | VAST.VLiteral | VAST.VIdentifier,
   base: TemplateOptionValueNode | null
 ): Range {
   const range = node.range
@@ -104,12 +87,7 @@ function calculateRange(
   return [offset + range[0], offset + range[1]]
 }
 function calculateLoc(
-  node:
-    | VAST.ESLintLiteral
-    | StaticTemplateLiteral
-    | VAST.VText
-    | JSXText
-    | VAST.VLiteral,
+  node: StaticLiteral | VAST.VText | JSXText | VAST.VLiteral,
   base: TemplateOptionValueNode | null,
   context: RuleContext
 ) {
@@ -209,16 +187,12 @@ function checkExpressionContainerText(
   baseNode: TemplateOptionValueNode | null,
   scope: NodeScope
 ) {
-  if (expression.type === 'Literal') {
-    checkLiteral(context, expression, config, baseNode, scope)
-  } else if (isStaticTemplateLiteral(expression)) {
+  if (isStaticLiteral(expression)) {
     checkLiteral(context, expression, config, baseNode, scope)
   } else if (expression.type === 'ConditionalExpression') {
     const targets = [expression.consequent, expression.alternate]
     targets.forEach(target => {
-      if (target.type === 'Literal') {
-        checkLiteral(context, target, config, baseNode, scope)
-      } else if (isStaticTemplateLiteral(target)) {
+      if (isStaticLiteral(target)) {
         checkLiteral(context, target, config, baseNode, scope)
       }
     })
@@ -227,15 +201,12 @@ function checkExpressionContainerText(
 
 function checkLiteral(
   context: RuleContext,
-  literal: VAST.ESLintLiteral | StaticTemplateLiteral,
+  literal: StaticLiteral,
   config: Config,
   baseNode: TemplateOptionValueNode | null,
   scope: NodeScope
 ) {
-  const value =
-    literal.type !== 'TemplateLiteral'
-      ? literal.value
-      : literal.quasis[0].value.cooked
+  const value = getStaticLiteralValue(literal)
 
   if (testValue(value, config)) {
     return
@@ -465,9 +436,7 @@ function getComponentTemplateValueNode(
   )
 
   if (templateNode) {
-    if (templateNode.value.type === 'Literal') {
-      return templateNode.value
-    } else if (isStaticTemplateLiteral(templateNode.value)) {
+    if (isStaticLiteral(templateNode.value)) {
       return templateNode.value
     } else if (templateNode.value.type === 'Identifier') {
       const templateVariable = findVariable(
@@ -478,9 +447,7 @@ function getComponentTemplateValueNode(
         const varDeclNode = templateVariable.defs[0]
           .node as VAST.ESLintVariableDeclarator
         if (varDeclNode.init) {
-          if (varDeclNode.init.type === 'Literal') {
-            return varDeclNode.init
-          } else if (isStaticTemplateLiteral(varDeclNode.init)) {
+          if (isStaticLiteral(varDeclNode.init)) {
             return varDeclNode.init
           }
         }
@@ -492,12 +459,8 @@ function getComponentTemplateValueNode(
 }
 
 function getComponentTemplateNode(node: TemplateOptionValueNode) {
-  return parse(
-    `<template>${
-      node.type === 'TemplateLiteral' ? node.quasis[0].value.cooked : node.value
-    }</template>`,
-    {}
-  ).templateBody!
+  return parse(`<template>${getStaticLiteralValue(node)}</template>`, {})
+    .templateBody!
 }
 
 function withoutEscape(
@@ -508,10 +471,7 @@ function withoutEscape(
     return false
   }
   const sourceText = context.getSourceCode().getText(baseNode).slice(1, -1)
-  const templateText =
-    baseNode.type === 'TemplateLiteral'
-      ? baseNode.quasis[0].value.cooked
-      : `${baseNode.value}`
+  const templateText = `${getStaticLiteralValue(baseNode)}`
   return sourceText === templateText
 }
 

lib/utils/collect-keys.ts

@@ -15,6 +15,7 @@ import type { RuleContext, VisitorKeys } from '../types'
 // @ts-expect-error -- ignore
 import { Legacy } from '@eslint/eslintrc'
 import { getCwd } from './get-cwd'
+import { isStaticLiteral, getStaticLiteralValue } from './index'
 const debug = debugBuilder('eslint-plugin-vue-i18n:collect-keys')
 const { CascadingConfigArrayFactory } = Legacy
 
@@ -39,11 +40,11 @@ function getKeyFromCallExpression(node: VAST.ESLintCallExpression) {
   }
 
   const [keyNode] = node.arguments
-  if (keyNode.type !== 'Literal') {
+  if (!isStaticLiteral(keyNode)) {
     return null
   }
 
-  return keyNode.value ? keyNode.value : null
+  return getStaticLiteralValue(keyNode)
 }
 
 /**
@@ -53,10 +54,9 @@ function getKeyFromVDirective(node: VAST.VDirective) {
   if (
     node.value &&
     node.value.type === 'VExpressionContainer' &&
-    node.value.expression &&
-    node.value.expression.type === 'Literal'
+    isStaticLiteral(node.value.expression)
   ) {
-    return node.value.expression.value ? node.value.expression.value : null
+    return getStaticLiteralValue(node.value.expression)
   } else {
     return null
   }

lib/utils/index.ts

@@ -107,6 +107,22 @@ export function getDirective(
   )
 }
 
+export type StaticLiteral = VAST.ESLintLiteral | VAST.ESLintTemplateLiteral
+export function isStaticLiteral(node: VAST.Node | null): node is StaticLiteral {
+  return Boolean(
+    node &&
+      (node.type === 'Literal' ||
+        (node.type === 'TemplateLiteral' && node.expressions.length === 0))
+  )
+}
+export function getStaticLiteralValue(
+  node: StaticLiteral
+): VAST.ESLintLiteral['value'] {
+  return node.type !== 'TemplateLiteral'
+    ? node.value
+    : node.quasis[0].value.cooked || node.quasis[0].value.raw
+}
+
 function loadLocaleMessages(
   localeFilesList: LocaleFiles[],
   cwd: string

tests/lib/rules/no-missing-keys.ts

@@ -46,7 +46,7 @@ function buildTestsForLocales<
 
 const tester = new RuleTester({
   parser: require.resolve('vue-eslint-parser'),
-  parserOptions: { ecmaVersion: 2015 }
+  parserOptions: { ecmaVersion: 2015, sourceType: 'module' }
 })
 
 tester.run('no-missing-keys', rule as never, {
@@ -193,6 +193,27 @@ tester.run('no-missing-keys', rule as never, {
         <script>
         t('foo.bar')
         </script>`
+      },
+      {
+        // template literal
+        filename: 'test.vue',
+        code: `
+        <i18n locale="en">
+        { "foo": "foo", "bar": "bar", "baz": "baz" }
+        </i18n>
+        <template>
+          <div id="app">
+            {{ $t(\`foo\`) }}
+          </div>
+          <div v-t="\`baz\`"/>
+        </template>
+        <script>
+        export default {
+          created () {
+            this.$t(\`bar\`)
+          }
+        }
+        </script>`
       }
     ]
   ),
@@ -326,6 +347,41 @@ tester.run('no-missing-keys', rule as never, {
           <i18n-t keypath="hi"></i18n-t>
         </template>`,
         errors: [`'hi' does not exist in localization message resources`]
+      },
+      {
+        // template literal
+        filename: 'test.vue',
+        code: `
+        <i18n locale="en">
+        {  }
+        </i18n>
+        <template>
+          <div id="app">
+            {{ $t(\`foo\`) }}
+          </div>
+          <div v-t="\`baz\`"/>
+        </template>
+        <script>
+        export default {
+          created () {
+            this.$t(\`bar\`)
+          }
+        }
+        </script>`,
+        errors: [
+          {
+            message: "'foo' does not exist in localization message resources",
+            line: 7
+          },
+          {
+            message: "'baz' does not exist in localization message resources",
+            line: 9
+          },
+          {
+            message: "'bar' does not exist in localization message resources",
+            line: 14
+          }
+        ]
       }
     ]
   )