feat: 🎸 https://github.com/vuejs/eslint-plugin-vue/issues/1492

docs/.vuepress/components/eslint-code-block.vue

@@ -122,15 +122,12 @@ export default {
 
   async mounted() {
     // Load linter.
-    const [
-      { default: Linter },
-      { default: coreRules },
-      { parseForESLint }
-    ] = await Promise.all([
-      import('eslint4b/dist/linter'),
-      import('eslint4b/dist/core-rules'),
-      import('espree').then(() => import('vue-eslint-parser'))
-    ])
+    const [{ default: Linter }, { default: coreRules }, { parseForESLint }] =
+      await Promise.all([
+        import('eslint4b/dist/linter'),
+        import('eslint4b/dist/core-rules'),
+        import('espree').then(() => import('vue-eslint-parser'))
+      ])
 
     const linter = (this.linter = new Linter())
 

docs/rules/README.md

@@ -157,7 +157,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  |
 | [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
 | [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
-| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template |  |
+| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: |
 
 ## Priority A: Essential (Error Prevention) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>
 
@@ -267,7 +267,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  |
 | [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
 | [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
-| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template |  |
+| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: |
 
 ## Uncategorized
 

docs/rules/this-in-template.md

@@ -10,12 +10,13 @@ since: v3.13.0
 > disallow usage of `this` in template
 
 - :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
 This rule aims at preventing usage of `this` in Vue templates.
 
-<eslint-code-block :rules="{'vue/this-in-template': ['error']}">
+<eslint-code-block fix :rules="{'vue/this-in-template': ['error']}">
 
 ```vue
 <template>
@@ -45,7 +46,7 @@ This rule aims at preventing usage of `this` in Vue templates.
 
 ### `"always"`
 
-<eslint-code-block :rules="{'vue/this-in-template': ['error', 'always']}">
+<eslint-code-block fix :rules="{'vue/this-in-template': ['error', 'always']}">
 
 ```vue
 <template>

lib/rules/attributes-order.js

@@ -271,10 +271,8 @@ function create(context) {
         return
       }
 
-      let {
-        attr: previousNode,
-        position: previousPosition
-      } = attributeAndPositions[0]
+      let { attr: previousNode, position: previousPosition } =
+        attributeAndPositions[0]
       for (let index = 1; index < attributeAndPositions.length; index++) {
         const { attr, position } = attributeAndPositions[index]
 

lib/rules/component-definition-name-casing.js

@@ -18,8 +18,7 @@ module.exports = {
     docs: {
       description: 'enforce specific casing for component definition name',
       categories: ['vue3-strongly-recommended', 'strongly-recommended'],
-      url:
-        'https://eslint.vuejs.org/rules/component-definition-name-casing.html'
+      url: 'https://eslint.vuejs.org/rules/component-definition-name-casing.html'
     },
     fixable: 'code', // or "code" or "whitespace"
     schema: [

lib/rules/component-name-in-template-casing.js

@@ -30,8 +30,7 @@ module.exports = {
       description:
         'enforce specific casing for the component naming style in template',
       categories: undefined,
-      url:
-        'https://eslint.vuejs.org/rules/component-name-in-template-casing.html'
+      url: 'https://eslint.vuejs.org/rules/component-name-in-template-casing.html'
     },
     fixable: 'code',
     schema: [

lib/rules/experimental-script-setup-vars.js

@@ -161,8 +161,9 @@ function parseSetup(code, espree, eslintScope) {
     fallback: AST.getFallbackKeys
   })
 
-  const variables = /** @type {Variable[]} */ (result.globalScope.childScopes[0]
-    .variables)
+  const variables = /** @type {Variable[]} */ (
+    result.globalScope.childScopes[0].variables
+  )
 
   return variables.map((v) => v.name)
 }

lib/rules/html-self-closing.js

@@ -164,7 +164,8 @@ module.exports = {
                 name: node.rawName
               },
               fix(fixer) {
-                const tokens = context.parserServices.getTemplateBodyTokenStore()
+                const tokens =
+                  context.parserServices.getTemplateBodyTokenStore()
                 const close = tokens.getLastToken(node.startTag)
                 if (close.type !== 'HTMLTagClose') {
                   return null
@@ -188,7 +189,8 @@ module.exports = {
                 name: node.rawName
               },
               fix(fixer) {
-                const tokens = context.parserServices.getTemplateBodyTokenStore()
+                const tokens =
+                  context.parserServices.getTemplateBodyTokenStore()
                 const close = tokens.getLastToken(node.startTag)
                 if (close.type !== 'HTMLSelfClosingTagClose') {
                   return null

lib/rules/max-attributes-per-line.js

@@ -177,12 +177,11 @@ module.exports = {
 
             // Find the closest token before the current prop
             // that is not a white space
-            const prevToken = /** @type {Token} */ (template.getTokenBefore(
-              prop,
-              {
+            const prevToken = /** @type {Token} */ (
+              template.getTokenBefore(prop, {
                 filter: (token) => token.type !== 'HTMLWhitespace'
-              }
-            ))
+              })
+            )
 
             /** @type {Range} */
             const range = [prevToken.range[1], prop.range[0]]

lib/rules/max-len.js

@@ -209,8 +209,7 @@ module.exports = {
       OPTIONS_SCHEMA
     ],
     messages: {
-      max:
-        'This line has a length of {{lineLength}}. Maximum allowed is {{maxLength}}.',
+      max: 'This line has a length of {{lineLength}}. Maximum allowed is {{maxLength}}.',
       maxComment:
         'This line has a comment length of {{lineLength}}. Maximum allowed is {{maxCommentLength}}.'
     }

lib/rules/multiline-html-element-content-newline.js

@@ -72,8 +72,7 @@ module.exports = {
       description:
         'require a line break before and after the contents of a multiline element',
       categories: ['vue3-strongly-recommended', 'strongly-recommended'],
-      url:
-        'https://eslint.vuejs.org/rules/multiline-html-element-content-newline.html'
+      url: 'https://eslint.vuejs.org/rules/multiline-html-element-content-newline.html'
     },
     fixable: 'whitespace',
     schema: [
@@ -179,14 +178,12 @@ module.exports = {
           return
         }
 
-        const contentFirst = /** @type {Token} */ (template.getTokenAfter(
-          element.startTag,
-          getTokenOption
-        ))
-        const contentLast = /** @type {Token} */ (template.getTokenBefore(
-          element.endTag,
-          getTokenOption
-        ))
+        const contentFirst = /** @type {Token} */ (
+          template.getTokenAfter(element.startTag, getTokenOption)
+        )
+        const contentLast = /** @type {Token} */ (
+          template.getTokenBefore(element.endTag, getTokenOption)
+        )
 
         const beforeLineBreaks =
           contentFirst.loc.start.line - element.startTag.loc.end.line

lib/rules/new-line-between-multi-line-property.js

@@ -55,8 +55,7 @@ module.exports = {
       description:
         'enforce new lines between multi-line properties in Vue components',
       categories: undefined,
-      url:
-        'https://eslint.vuejs.org/rules/new-line-between-multi-line-property.html'
+      url: 'https://eslint.vuejs.org/rules/new-line-between-multi-line-property.html'
     },
     fixable: 'whitespace', // or "code" or "whitespace"
     schema: [

lib/rules/no-deprecated-data-object-declaration.js

@@ -52,8 +52,7 @@ module.exports = {
       description:
         'disallow using deprecated object declaration on data (in Vue.js 3.0.0+)',
       categories: ['vue3-essential'],
-      url:
-        'https://eslint.vuejs.org/rules/no-deprecated-data-object-declaration.html'
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-data-object-declaration.html'
     },
     fixable: 'code',
     schema: [],

lib/rules/no-deprecated-destroyed-lifecycle.js

@@ -21,8 +21,7 @@ module.exports = {
       description:
         'disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+)',
       categories: ['vue3-essential'],
-      url:
-        'https://eslint.vuejs.org/rules/no-deprecated-destroyed-lifecycle.html'
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-destroyed-lifecycle.html'
     },
     fixable: null,
     schema: [],

lib/rules/no-deprecated-dollar-listeners-api.js

@@ -20,8 +20,7 @@ module.exports = {
     docs: {
       description: 'disallow using deprecated `$listeners` (in Vue.js 3.0.0+)',
       categories: ['vue3-essential'],
-      url:
-        'https://eslint.vuejs.org/rules/no-deprecated-dollar-listeners-api.html'
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-dollar-listeners-api.html'
     },
     fixable: null,
     schema: [],

lib/rules/no-deprecated-dollar-scopedslots-api.js

@@ -21,8 +21,7 @@ module.exports = {
       description:
         'disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)',
       categories: ['vue3-essential'],
-      url:
-        'https://eslint.vuejs.org/rules/no-deprecated-dollar-scopedslots-api.html'
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-dollar-scopedslots-api.html'
     },
     fixable: 'code',
     schema: [],

lib/rules/no-deprecated-functional-template.js

@@ -21,8 +21,7 @@ module.exports = {
       description:
         'disallow using deprecated the `functional` template (in Vue.js 3.0.0+)',
       categories: ['vue3-essential'],
-      url:
-        'https://eslint.vuejs.org/rules/no-deprecated-functional-template.html'
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-functional-template.html'
     },
     fixable: null,
     schema: [],

lib/rules/no-deprecated-props-default-this.js

@@ -20,8 +20,7 @@ module.exports = {
     docs: {
       description: 'disallow props default function `this` access',
       categories: ['vue3-essential'],
-      url:
-        'https://eslint.vuejs.org/rules/no-deprecated-props-default-this.html'
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-props-default-this.html'
     },
     fixable: null,
     schema: [],

lib/rules/no-deprecated-scope-attribute.js

@@ -23,9 +23,8 @@ module.exports = {
   },
   /** @param {RuleContext} context */
   create(context) {
-    const templateBodyVisitor = scopeAttribute.createTemplateBodyVisitor(
-      context
-    )
+    const templateBodyVisitor =
+      scopeAttribute.createTemplateBodyVisitor(context)
     return utils.defineTemplateBodyVisitor(context, templateBodyVisitor)
   }
 }

lib/rules/no-deprecated-slot-scope-attribute.js

@@ -14,8 +14,7 @@ module.exports = {
       description:
         'disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+)',
       categories: ['vue3-essential'],
-      url:
-        'https://eslint.vuejs.org/rules/no-deprecated-slot-scope-attribute.html'
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-slot-scope-attribute.html'
     },
     fixable: 'code',
     schema: [],

lib/rules/no-deprecated-v-on-native-modifier.js

@@ -21,8 +21,7 @@ module.exports = {
       description:
         'disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+)',
       categories: ['vue3-essential'],
-      url:
-        'https://eslint.vuejs.org/rules/no-deprecated-v-on-native-modifier.html'
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-v-on-native-modifier.html'
     },
     fixable: null,
     schema: [],

lib/rules/no-deprecated-v-on-number-modifiers.js

@@ -22,8 +22,7 @@ module.exports = {
       description:
         'disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)',
       categories: ['vue3-essential'],
-      url:
-        'https://eslint.vuejs.org/rules/no-deprecated-v-on-number-modifiers.html'
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-v-on-number-modifiers.html'
     },
     fixable: 'code',
     schema: [],

lib/rules/no-deprecated-vue-config-keycodes.js

@@ -17,8 +17,7 @@ module.exports = {
       description:
         'disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+)',
       categories: ['vue3-essential'],
-      url:
-        'https://eslint.vuejs.org/rules/no-deprecated-vue-config-keycodes.html'
+      url: 'https://eslint.vuejs.org/rules/no-deprecated-vue-config-keycodes.html'
     },
     fixable: null,
     schema: [],

lib/rules/no-extra-parens.js

@@ -176,7 +176,8 @@ function createForVueSyntax(context) {
   }
 
   return {
-    "VAttribute[directive=true][key.name.name='bind'] > VExpressionContainer": verify,
+    "VAttribute[directive=true][key.name.name='bind'] > VExpressionContainer":
+      verify,
     'VElement > VExpressionContainer': verify
   }
 }

lib/rules/no-irregular-whitespace.js

@@ -15,8 +15,10 @@ const utils = require('../utils')
 // Constants
 // ------------------------------------------------------------------------------
 
-const ALL_IRREGULARS = /[\f\v\u0085\ufeff\u00a0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u202f\u205f\u3000\u2028\u2029]/u
-const IRREGULAR_WHITESPACE = /[\f\v\u0085\ufeff\u00a0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u202f\u205f\u3000]+/gmu
+const ALL_IRREGULARS =
+  /[\f\v\u0085\ufeff\u00a0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u202f\u205f\u3000\u2028\u2029]/u
+const IRREGULAR_WHITESPACE =
+  /[\f\v\u0085\ufeff\u00a0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u202f\u205f\u3000]+/gmu
 const IRREGULAR_LINE_TERMINATORS = /[\u2028\u2029]/gmu
 
 // ------------------------------------------------------------------------------
@@ -195,7 +197,8 @@ module.exports = {
     const bodyVisitor = utils.defineTemplateBodyVisitor(context, {
       ...(skipHTMLAttributeValues
         ? {
-            'VAttribute[directive=false] > VLiteral': removeInvalidNodeErrorsInHTMLAttributeValue
+            'VAttribute[directive=false] > VLiteral':
+              removeInvalidNodeErrorsInHTMLAttributeValue
           }
         : {}),
       ...(skipHTMLTextContents

lib/rules/no-potential-component-option-typo.js

@@ -17,8 +17,7 @@ module.exports = {
       description: 'disallow a potential typo in your component property',
       categories: undefined,
       recommended: false,
-      url:
-        'https://eslint.vuejs.org/rules/no-potential-component-option-typo.html'
+      url: 'https://eslint.vuejs.org/rules/no-potential-component-option-typo.html'
     },
     fixable: null,
     schema: [

lib/rules/no-restricted-v-bind.js

@@ -137,9 +137,8 @@ module.exports = {
   /** @param {RuleContext} context */
   create(context) {
     /** @type {ParsedOption[]} */
-    const options = (context.options.length === 0
-      ? DEFAULT_OPTIONS
-      : context.options
+    const options = (
+      context.options.length === 0 ? DEFAULT_OPTIONS : context.options
     ).map(parseOption)
 
     return utils.defineTemplateBodyVisitor(context, {

lib/rules/no-side-effects-in-computed-properties.js

@@ -21,8 +21,7 @@ module.exports = {
     docs: {
       description: 'disallow side effects in computed properties',
       categories: ['vue3-essential', 'essential'],
-      url:
-        'https://eslint.vuejs.org/rules/no-side-effects-in-computed-properties.html'
+      url: 'https://eslint.vuejs.org/rules/no-side-effects-in-computed-properties.html'
     },
     fixable: null,
     schema: []
@@ -104,9 +103,9 @@ module.exports = {
           }
           const targetBody = scopeStack.body
 
-          const computedProperty = /** @type {ComponentComputedProperty[]} */ (computedPropertiesMap.get(
-            vueNode
-          )).find((cp) => {
+          const computedProperty = /** @type {ComponentComputedProperty[]} */ (
+            computedPropertiesMap.get(vueNode)
+          ).find((cp) => {
             return (
               cp.value &&
               node.loc.start.line >= cp.value.loc.start.line &&

lib/rules/no-spaces-around-equal-signs-in-attribute.js

@@ -20,8 +20,7 @@ module.exports = {
     docs: {
       description: 'disallow spaces around equal signs in attribute',
       categories: ['vue3-strongly-recommended', 'strongly-recommended'],
-      url:
-        'https://eslint.vuejs.org/rules/no-spaces-around-equal-signs-in-attribute.html'
+      url: 'https://eslint.vuejs.org/rules/no-spaces-around-equal-signs-in-attribute.html'
     },
     fixable: 'whitespace',
     schema: []