Fix(ESLint): Cannot read properties of null (reading 'type')

master-co · Mar 1, 2024 · 1669ac0 · 1669ac0
1 parent 0a67984
commit 1669ac0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/packages/eslint-plugin/src/utils/define-visitors.ts b/packages/eslint-plugin/src/utils/define-visitors.ts
@@ -56,11 +56,11 @@ export default function defineVisitors({ context, settings, options }: { context
         VAttribute: function (node: any) {
             if (node.value && node.value.type === 'VLiteral') {
                 visitNode(node)
-            } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression.type === 'ArrayExpression') {
+            } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression?.type === 'ArrayExpression') {
                 node.value.expression.elements.forEach((arg) => {
                     visitNode(node, arg)
                 })
-            } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression.type === 'ObjectExpression') {
+            } else if (node.value && node.value.type === 'VExpressionContainer' && node.value.expression?.type === 'ObjectExpression') {
                 node.value.expression.properties.forEach((prop) => {
                     visitNode(node, prop)
                 })

diff --git a/packages/eslint-plugin/tests/class-matching/vue.test.ts b/packages/eslint-plugin/tests/class-matching/vue.test.ts
@@ -13,7 +13,9 @@ const ruleTester = new RuleTester({
 })
 
 ruleTester.run('vue class order', rule, {
-    valid: [{ code: `<div class="bg:black f:24 fg:white m:8 p:8">Simple, basic</div>` }],
+    valid: [
+        { code: `<div class="bg:black f:24 fg:white m:8 p:8">Simple, basic</div>` }
+    ],
     invalid: [
         {
             code: `<template><div class="m:8 bg:black p:8 f:24 fg:white">Enhancing readability</div></template>`,
@@ -102,6 +104,25 @@ ruleTester.run('vue class order', rule, {
             ],
             filename: 'test.vue',
             parser: require.resolve('vue-eslint-parser'),
+        },
+        {
+            code: `<template>
+                        <input   type="password"
+                            placeholder="如果我在Vue元件內不小心寫了沒有function的事件VSCODE的ESLINT套件會無法格式化，輸出會有錯誤"
+                            class="bg:black p:8 f:24 fg:white m:8"
+                            @blur.prevent="" />
+                        </template>`,
+            output: `<template>
+                        <input   type="password"
+                            placeholder="如果我在Vue元件內不小心寫了沒有function的事件VSCODE的ESLINT套件會無法格式化，輸出會有錯誤"
+                            class="bg:black f:24 fg:white m:8 p:8"
+                            @blur.prevent="" />
+                        </template>`,
+            errors: [
+                { messageId: 'invalidClassOrder' }
+            ],
+            filename: 'test.vue',
+            parser: require.resolve('vue-eslint-parser'),
         }
     ],
 })