[fix] 'vue/prop-name-casing` to not warn variable computed property (#444)

Author: ota-meshi

lib/rules/prop-name-casing.js

@@ -50,6 +50,16 @@ function create (context) {
       if (item.type !== 'Property') {
         return
       }
+      if (item.computed) {
+        if (item.key.type !== 'Literal') {
+          // TemplateLiteral | Identifier(variable) | Expression(s)
+          return
+        }
+        if (typeof item.key.value !== 'string') {
+          // (boolean | null | number | RegExp) Literal
+          return
+        }
+      }
 
       const propName = item.key.type === 'Literal' ? item.key.value : item.key.name
       const convertedName = converter(propName)

tests/lib/rules/prop-name-casing.js

@@ -108,6 +108,186 @@ ruleTester.run('prop-name-casing', rule, {
       `,
       options: ['snake_case'],
       parserOptions
+    },
+    {
+      // computed property name
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            ['greetingText']: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // computed property name
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [('greetingText')]: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // TemplateLiteral computed property does not warn
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [\`greeting-text\`]: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // TemplateLiteral computed property does not warn
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [\`greeting\${'-'}text\`]: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // shorthand
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            greetingText
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // valiable computed property name does not warn
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [greeting_text]: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // valiable computed property name does not warn
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [greeting.text]: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // BinaryExpression computed property name does not warn
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            ['greeting'+'-text']: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // CallExpression computed property name does not warn
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [greeting_text()]: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // ThisExpression computed property name does not warn
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [this]: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // ArrayExpression computed property name does not warn
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [['greeting-text']]: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // number Literal computed property name
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [1]: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // boolean Literal computed property name
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [true]: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // null Literal computed property name
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [null]: String
+          }
+        }
+      `,
+      parserOptions
+    },
+    {
+      // RegExp Literal computed property name
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [/greeting-text/]: String
+          }
+        }
+      `,
+      parserOptions
     }
   ],
 
@@ -290,25 +470,6 @@ ruleTester.run('prop-name-casing', rule, {
         line: 4
       }]
     },
-    {
-      // valiable computed property name
-      filename: 'test.vue',
-      code: `
-        export default {
-          props: {
-            [greeting_text]: String
-          }
-        }
-      `,
-      output: null,
-      parserOptions,
-      errors: [{
-        // bug ?
-        message: 'Prop "greeting_text" is not in camelCase.',
-        type: 'Property',
-        line: 4
-      }]
-    },
     {
       // emoji
       filename: 'test.vue',
@@ -367,6 +528,24 @@ ruleTester.run('prop-name-casing', rule, {
         type: 'Property',
         line: 4
       }]
+    },
+    {
+      // Parentheses computed property name
+      filename: 'test.vue',
+      code: `
+        export default {
+          props: {
+            [('greeting-text')]: String
+          }
+        }
+      `,
+      output: null,
+      parserOptions,
+      errors: [{
+        message: 'Prop "greeting-text" is not in camelCase.',
+        type: 'Property',
+        line: 4
+      }]
     }
   ]
 })