feat: rule fixer for require-name-property (#2034)

Co-authored-by: sunxinyu <[email protected]>
vuejs · Nov 16, 2022 · cc1b8d9 · cc1b8d9
1 parent 9673a61
commit cc1b8d9
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 6 deletions.
diff --git a/docs/rules/README.md b/docs/rules/README.md
@@ -259,7 +259,7 @@ For example:
 | [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  | :hammer: |
 | [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | :bulb: | :hammer: |
 | [vue/require-expose](./require-expose.md) | require declare public properties using `expose` | :bulb: | :hammer: |
-| [vue/require-name-property](./require-name-property.md) | require a name property in Vue components |  | :hammer: |
+| [vue/require-name-property](./require-name-property.md) | require a name property in Vue components | :bulb: | :hammer: |
 | [vue/require-prop-comment](./require-prop-comment.md) | require props to have a comment |  | :hammer: |
 | [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
 | [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  | :hammer: |

diff --git a/docs/rules/require-name-property.md b/docs/rules/require-name-property.md
@@ -9,6 +9,8 @@ since: v6.1.0
 
 > require a name property in Vue components
 
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
 ## :book: Rule Details
 
 This rule requires a `name` property to be set on components.

diff --git a/lib/rules/require-name-property.js b/lib/rules/require-name-property.js
@@ -4,9 +4,31 @@
  */
 'use strict'
 
+const path = require('path')
 const utils = require('../utils')
 const { getVueComponentDefinitionType } = require('../utils')
+/**
+ * Get the text of the empty indentation part of the line which the given token is on.
+ * @param {SourceCode} sourceCode the source code object
+ * @param {Token} token the token to get the indentation text of the line which the token is on
+ * @returns {string} The text of indentation part.
+ */
+function getLineEmptyIndent(sourceCode, token) {
+  const LT_CHAR = /[\n\r\u2028\u2029]/
+  const EMPTY_CHAR = /\s/
+  const text = sourceCode.text
+  let i = token.range[0] - 1
 
+  while (i >= 0 && !LT_CHAR.test(text[i])) {
+    i -= 1
+  }
+  let j = i
+  while (EMPTY_CHAR.test(text[j])) {
+    j += 1
+  }
+
+  return text.slice(i + 1, j)
+}
 /**
  * @param {Property | SpreadElement} node
  * @returns {node is ObjectExpressionProperty}
@@ -28,6 +50,7 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/require-name-property.html'
     },
     fixable: null,
+    hasSuggestions: true,
     schema: []
   },
   /** @param {RuleContext} context */
@@ -47,7 +70,41 @@ module.exports = {
 
       context.report({
         node: component,
-        message: 'Required name property is not set.'
+        message: 'Required name property is not set.',
+        suggest: [
+          {
+            desc: 'Add name property to component.',
+            fix(fixer) {
+              const extension = path.extname(context.getFilename())
+              const filename = path.basename(context.getFilename(), extension)
+              const sourceCode = context.getSourceCode()
+              // fix only when property is not empty
+              if (component.properties.length > 0) {
+                const firstToken = sourceCode.getFirstToken(
+                  component.properties[0]
+                )
+                const indentText = getLineEmptyIndent(sourceCode, firstToken)
+                // insert name property before the first property
+                return fixer.insertTextBefore(
+                  component.properties[0],
+                  `name: '${filename}',\n${indentText}`
+                )
+              }
+
+              const firstToken = sourceCode.getFirstToken(component)
+              const lastToken = sourceCode.getLastToken(component)
+              // if the component is empty, insert name property and indent
+              if (firstToken.value === '{' && lastToken.value === '}') {
+                const indentText = getLineEmptyIndent(sourceCode, firstToken)
+                return fixer.replaceTextRange(
+                  [firstToken.range[1], lastToken.range[0]],
+                  `\n${indentText}  name: '${filename}'\n${indentText}`
+                )
+              }
+              return null
+            }
+          }
+        ]
       })
     })
   }

diff --git a/tests/lib/rules/require-name-property.js b/tests/lib/rules/require-name-property.js
@@ -78,25 +78,143 @@ ruleTester.run('require-name-property', rule, {
       errors: [
         {
           message: 'Required name property is not set.',
-          type: 'ObjectExpression'
+          type: 'ObjectExpression',
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default {
+          name: 'InvalidComponent'
+        }
+      `
+            }
+          ]
         }
       ]
     },
     {
       filename: 'InvalidComponent.vue',
       code: `
+        export default defineComponent({
+        })
+      `,
+      parserOptions,
+      errors: [
+        {
+          message: 'Required name property is not set.',
+          type: 'ObjectExpression',
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default defineComponent({
+          name: 'InvalidComponent'
+        })
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'InvalidComponent.vue',
+      code: `
+        export default defineComponent({ })
+      `,
+      parserOptions,
+      errors: [
+        {
+          message: 'Required name property is not set.',
+          type: 'ObjectExpression',
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default defineComponent({
+          name: 'InvalidComponent'
+        })
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'InvalidComponent.vue',
+      code: `
+        export default { }
+      `,
+      parserOptions,
+      errors: [
+        {
+          message: 'Required name property is not set.',
+          type: 'ObjectExpression',
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
         export default {
+          name: 'InvalidComponent'
+        }
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'InvalidComponent.vue',
+      code: `
+        export default {
+        nameNot: 'IssaNameNot'
+        }
+      `,
+      parserOptions,
+      errors: [
+        {
+          message: 'Required name property is not set.',
+          type: 'ObjectExpression',
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default {
+        name: 'InvalidComponent',
         nameNot: 'IssaNameNot'
         }
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'InvalidComponent.vue',
+      code: `
+        export default defineComponent({
+          nameNot: 'IssaNameNot'
+        })
       `,
       parserOptions,
       errors: [
         {
           message: 'Required name property is not set.',
-          type: 'ObjectExpression'
+          type: 'ObjectExpression',
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default defineComponent({
+          name: 'InvalidComponent',
+          nameNot: 'IssaNameNot'
+        })
+      `
+            }
+          ]
         }
       ]
     },
+
     {
       filename: 'InvalidComponent.vue',
       code: `
@@ -110,7 +228,20 @@ ruleTester.run('require-name-property', rule, {
       errors: [
         {
           message: 'Required name property is not set.',
-          type: 'ObjectExpression'
+          type: 'ObjectExpression',
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default {
+          name: 'InvalidComponent',
+          computed: {
+            name() { return 'name' }
+          }
+        }
+      `
+            }
+          ]
         }
       ]
     },
@@ -125,7 +256,18 @@ ruleTester.run('require-name-property', rule, {
       errors: [
         {
           message: 'Required name property is not set.',
-          type: 'ObjectExpression'
+          type: 'ObjectExpression',
+          suggestions: [
+            {
+              desc: 'Add name property to component.',
+              output: `
+        export default {
+          name: 'InvalidComponent',
+          [name]: 'IssaName'
+        }
+      `
+            }
+          ]
         }
       ]
     }