feat: 🎸 #1492 (#1493)

* feat: 🎸 #1492

* docs: ✏️ update doc

* fix: 🐛 fix eslint

Author: IWANABETHATGUY

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}}.'
     }