feat: 🎸 vuejs#1492

Author: IWANABETHATGUY

lib/rules/this-in-template.js

@@ -23,7 +23,7 @@ module.exports = {
       categories: ['vue3-recommended', 'recommended'],
       url: 'https://eslint.vuejs.org/rules/this-in-template.html'
     },
-    fixable: null,
+    fixable: 'code',
     schema: [
       {
         enum: ['always', 'never']
@@ -91,6 +91,10 @@ module.exports = {
               context.report({
                 node,
                 loc: node.loc,
+                fix(fixer) {
+                  // node.parent should be some code like `this.test`, `this?.['result']`
+                  return fixer.replaceText(node.parent, propertyName)
+                },
                 message: "Unexpected usage of 'this'."
               })
             }
@@ -116,7 +120,10 @@ module.exports = {
                     context.report({
                       node: reference.id,
                       loc: reference.id.loc,
-                      message: "Expected 'this'."
+                      message: "Expected 'this'.",
+                      fix(fixer) {
+                        return fixer.insertTextBefore(reference.id, 'this.')
+                      }
                     })
                   }
                 }

tests/lib/rules/this-in-template.js

@@ -121,41 +121,73 @@ function createInvalidTests(prefix, options, message, type) {
   return [
     {
       code: `<template><div>{{ ${prefix}foo }}</div></template><!-- ${comment} -->`,
+      output: `<template><div>{{ ${suggestionPrefix(
+        prefix,
+        options
+      )}foo }}</div></template><!-- ${comment} -->`,
       errors: [{ message, type }],
       options
     },
     {
       code: `<template><div>{{ ${prefix}foo() }}</div></template><!-- ${comment} -->`,
+      output: `<template><div>{{ ${suggestionPrefix(
+        prefix,
+        options
+      )}foo() }}</div></template><!-- ${comment} -->`,
       errors: [{ message, type }],
       options
     },
     {
       code: `<template><div>{{ ${prefix}foo.bar() }}</div></template><!-- ${comment} -->`,
+      output: `<template><div>{{ ${suggestionPrefix(
+        prefix,
+        options
+      )}foo.bar() }}</div></template><!-- ${comment} -->`,
       errors: [{ message, type }],
       options
     },
     {
       code: `<template><div :class="${prefix}foo"></div></template><!-- ${comment} -->`,
+      output: `<template><div :class="${suggestionPrefix(
+        prefix,
+        options
+      )}foo"></div></template><!-- ${comment} -->`,
       errors: [{ message, type }],
       options
     },
     {
       code: `<template><div :class="{foo: ${prefix}foo}"></div></template><!-- ${comment} -->`,
+      output: `<template><div :class="{foo: ${suggestionPrefix(
+        prefix,
+        options
+      )}foo}"></div></template><!-- ${comment} -->`,
       errors: [{ message, type }],
       options
     },
     {
       code: `<template><div :class="{foo: ${prefix}foo()}"></div></template><!-- ${comment} -->`,
+      output: `<template><div :class="{foo: ${suggestionPrefix(
+        prefix,
+        options
+      )}foo()}"></div></template><!-- ${comment} -->`,
       errors: [{ message, type }],
       options
     },
     {
       code: `<template><div v-if="${prefix}foo"></div></template><!-- ${comment} -->`,
+      output: `<template><div v-if="${suggestionPrefix(
+        prefix,
+        options
+      )}foo"></div></template><!-- ${comment} -->`,
       errors: [{ message, type }],
       options
     },
     {
       code: `<template><div v-for="foo in ${prefix}bar"></div></template><!-- ${comment} -->`,
+      output: `<template><div v-for="foo in ${suggestionPrefix(
+        prefix,
+        options
+      )}bar"></div></template><!-- ${comment} -->`,
       errors: [{ message, type }],
       options
     }
@@ -172,11 +204,13 @@ function createInvalidTests(prefix, options, message, type) {
       : [
           {
             code: `<template><div>{{ this['xs'] }}</div></template><!-- ${comment} -->`,
+            output: `<template><div>{{ xs }}</div></template><!-- ${comment} -->`,
             errors: [{ message, type }],
             options
           },
           {
             code: `<template><div>{{ this['xs0AZ_foo'] }}</div></template><!-- ${comment} -->`,
+            output: `<template><div>{{ xs0AZ_foo }}</div></template><!-- ${comment} -->`,
             errors: [{ message, type }],
             options
           }
@@ -225,13 +259,23 @@ ruleTester.run('this-in-template', rule, {
     .concat([
       {
         code: `<template><div v-if="fn(this.$foo)"></div></template><!-- never -->`,
+        output: `<template><div v-if="fn($foo)"></div></template><!-- never -->`,
         errors: ["Unexpected usage of 'this'."],
         options: ['never']
       },
       {
         code: `<template><div :class="{ foo: this.$foo }"></div></template><!-- never -->`,
+        output: `<template><div :class="{ foo: $foo }"></div></template><!-- never -->`,
         errors: ["Unexpected usage of 'this'."],
         options: ['never']
       }
     ])
 })
+
+function suggestionPrefix(prefix, options) {
+  if (options[0] === 'always' && !['this.', 'this?.'].includes(prefix)) {
+    return 'this.'
+  } else {
+    return ''
+  }
+}