Merge pull request #134 from fants613/feat/support-vue

support validate literal strings in vue component

docs/rules/no-literal-string.md

@@ -35,7 +35,8 @@ type MySchema = {
     exclude?: string[];
   };
 } & {
-  mode?: 'jsx-text-only' | 'jsx-only' | 'all';
+  framework: 'react' | 'vue';
+  mode?: 'jsx-text-only' | 'jsx-only' | 'all' | 'vue-template-ony';
   message?: string;
   'should-validate-template'?: boolean;
 };
@@ -118,10 +119,14 @@ const message = 'foob';
 
 ### Other options
 
+- `framework` specifies the type of framework currently in use.
+  - `react` It defaults to 'react' which means you want to validate react component
+  - `vue` If you want to validate vue component, can set the value to be this
 - `mode` provides a straightforward way to decides the range you want to validate literal strings.
-  It defaults to `jsx-text-only` which only forbids to write plain text in JSX markup
-  - `jsx-only` validates the JSX attributes as well
-  - `all` validates all literal strings
+  It defaults to `jsx-text-only` which only forbids to write plain text in JSX markup,available when framework option is 'react'
+  - `jsx-only` validates the JSX attributes as well,available when framework option is 'react'
+  - `all` validates all literal strings,available when the value of the framework option is 'react' and 'vue'
+  - `vue-template-only`, only validate vue component template part,available when framework option value is 'vue'.
 - `message` defines the custom error message
 - `should-validate-template` decides if we should validate the string templates
 

lib/options/defaults.js

@@ -1,4 +1,5 @@
 module.exports = {
+  framework: 'react',
   mode: 'jsx-text-only',
   'jsx-components': {
     include: [],

lib/options/schema.json

@@ -2,9 +2,13 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "type": "object",
   "properties": {
+    "framework":{
+      "type":"string",
+      "enum": ["react","vue"]
+    },
     "mode": {
       "type": "string",
-      "enum": ["jsx-text-only", "jsx-only", "all"]
+      "enum": ["jsx-text-only", "jsx-only", "all","vue-template-only"]
     },
     "jsx-components": {
       "type": "object",
@@ -50,4 +54,4 @@
     "message": { "type": "string" },
     "should-validate-template": { "type": "boolean" }
   }
-}
+}

lib/rules/no-literal-string.js

@@ -30,6 +30,26 @@ function isValidLiteral(options, { value }) {
   if (shouldSkip(options.words, trimed)) return true;
 }
 
+/**
+ * @param {VDirective | VAttribute} node
+ * @returns {string | null}
+ */
+function getAttributeName(node) {
+  if (!node.directive) {
+    return node.key.rawName;
+  }
+
+  if (
+    (node.key.name.name === 'bind' || node.key.name.name === 'model') &&
+    node.key.argument &&
+    node.key.argument.type === 'VIdentifier'
+  ) {
+    return node.key.argument.rawName;
+  }
+
+  return null;
+}
+
 //------------------------------------------------------------------------------
 // Rule Definition
 //------------------------------------------------------------------------------
@@ -58,9 +78,13 @@ module.exports = {
       mode,
       'should-validate-template': validateTemplate,
       message,
+      framework,
     } = options;
     const onlyValidateJSX = ['jsx-only', 'jsx-text-only'].includes(mode);
 
+    const onlyValidateVueTemplate =
+      framework === 'vue' && mode === 'vue-template-only';
+
     //----------------------------------------------------------------------
     // Helpers
     //----------------------------------------------------------------------
@@ -210,6 +234,22 @@ module.exports = {
       },
       // ─────────────────────────────────────────────────────────────────
 
+      //
+      // ─── Vue ──────────────────────────────────────────────────
+      //
+      VElement(node) {
+        indicatorStack.push(
+          shouldSkip(options['jsx-components'], node.rawName)
+        );
+      },
+      'VElement:exit': endIndicator,
+      VAttribute(node) {
+        const attrName = getAttributeName(node);
+        indicatorStack.push(shouldSkip(options['jsx-attributes'], attrName));
+      },
+      'VAttribute:exit': endIndicator,
+      // ─────────────────────────────────────────────────────────────────
+
       //
       // ─── TYPESCRIPT ──────────────────────────────────────────────────
       //
@@ -284,12 +324,6 @@ module.exports = {
         );
       },
       'TaggedTemplateExpression:exit': endIndicator,
-
-      'SwitchCase > Literal'(node) {
-        indicatorStack.push(true);
-      },
-      'SwitchCase > Literal:exit': endIndicator,
-
       'AssignmentExpression[left.type="MemberExpression"]'(node) {
         // allow Enum['value']
         indicatorStack.push(
@@ -299,20 +333,12 @@ module.exports = {
       'AssignmentExpression[left.type="MemberExpression"]:exit'(node) {
         endIndicator();
       },
-      'MemberExpression > Literal'(node) {
-        // allow Enum['value']
-        indicatorStack.push(true);
-      },
-      'MemberExpression > Literal:exit'(node) {
-        endIndicator();
-      },
-
       TemplateLiteral(node) {
         if (!validateTemplate) {
           return;
         }
 
-        if (filterOutJSX(node)) {
+        if (framework === 'react' && filterOutJSX(node)) {
           return;
         }
 
@@ -324,16 +350,39 @@ module.exports = {
           return true; // break
         });
       },
+      Literal(node) {
+        // allow Enum['value'] and literal that follows the 'case' keyword in a switch statement.
+        if (['MemberExpression', 'SwitchCase'].includes(node?.parent?.type)) {
+          return;
+        }
 
-      'Literal:exit'(node) {
-        if (filterOutJSX(node)) {
+        if (framework === 'react' && filterOutJSX(node)) {
           return;
         }
 
+        if (onlyValidateVueTemplate) {
+          const parents = context.getAncestors();
+          if (
+            parents.length &&
+            parents.every(
+              item =>
+                ![
+                  'VElement',
+                  'VAttribute',
+                  'VText',
+                  'VExpressionContainer',
+                ].includes(item.type)
+            )
+          ) {
+            return true;
+          }
+        }
+
         // ignore `var a = { "foo": 123 }`
         if (node.parent.key === node) {
           return;
         }
+
         validateBeforeReport(node);
       },
     };
@@ -345,14 +394,29 @@ module.exports = {
             VText(node) {
               scriptVisitor['JSXText'](node);
             },
+            VLiteral(node) {
+              scriptVisitor['JSXText'](node);
+            },
+            VElement(node) {
+              scriptVisitor['VElement'](node);
+            },
+            'VElement:exit'(node) {
+              scriptVisitor['VElement:exit'](node);
+            },
+            VAttribute(node) {
+              scriptVisitor['VAttribute'](node);
+            },
+            'VAttribute:exit'(node) {
+              scriptVisitor['VAttribute:exit'](node);
+            },
             'VExpressionContainer CallExpression'(node) {
               scriptVisitor['CallExpression'](node);
             },
             'VExpressionContainer CallExpression:exit'(node) {
               scriptVisitor['CallExpression:exit'](node);
             },
-            'VExpressionContainer Literal:exit'(node) {
-              scriptVisitor['Literal:exit'](node);
+            'VExpressionContainer Literal'(node) {
+              scriptVisitor['Literal'](node);
             },
           },
           scriptVisitor