docs/rules/index.md

@@ -181,7 +181,7 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 | [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  | :three::two::warning: |
 | [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  | :three::two::warning: |
 | [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  | :three::two::hammer: |
-| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: | :three::two::hammer: |
+| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench::bulb: | :three::two::hammer: |
 | [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: | :three::two::hammer: |
 
 </rules-table>

docs/rules/no-v-html.md

@@ -38,10 +38,6 @@ Nothing.
 
 If you are certain the content passed to `v-html` is sanitized HTML you can disable this rule.
 
-## :books: Further Reading
-
-- [XSS in Vue.js](https://blog.sqreen.io/xss-in-vue-js/)
-
 ## :rocket: Version
 
 This rule was introduced in eslint-plugin-vue v4.7.0

docs/rules/order-in-components.md

@@ -12,6 +12,7 @@ since: v3.2.0
 
 - :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.
+- :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
 

docs/user-guide/index.md

@@ -1,3 +1,7 @@
+---
+outline: deep
+---
+
 # User Guide
 
 ## :cd: Installation
@@ -318,7 +322,7 @@ If you are using JSX, you need to enable JSX in your ESLint configuration.
 See also [ESLint - Specifying Parser Options](https://eslint.org/docs/user-guide/configuring#specifying-parser-options).
 
 The same configuration is required when using JSX with TypeScript (TSX) in the `.vue` file.  
-See also [here](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/parser/README.md#parseroptionsecmafeaturesjsx).  
+See also [here](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/README.md#parseroptionsecmafeaturesjsx).  
 Note that you cannot use angle-bracket type assertion style (`var x = <foo>bar;`) when using `jsx: true`.
 
 ### Trouble with Visual Studio Code
@@ -386,3 +390,41 @@ Try searching for existing issues.
 If it does not exist, you should open a new issue and share your repository to reproduce the issue.
 
 [vue-eslint-parser]: https://github.com/vuejs/vue-eslint-parser
+
+### Auto Imports Support
+
+In [Nuxt 3](https://nuxt.com/) or with [`unplugin-auto-import`](https://github.com/unplugin/unplugin-auto-import), Vue APIs can be auto imported. To make rules like [`vue/no-ref-as-operand`](/rules/no-ref-as-operand.html) or [`vue/no-watch-after-await`](/rules/no-watch-after-await.html) work correctly with them, you can specify them in ESLint's [`globals`](https://eslint.org/docs/latest/use/configure/configuration-files-new#configuring-global-variables) options:
+
+::: code-group
+
+```json [Legacy Config]
+// .eslintrc
+{
+  "globals": {
+    "ref": "readonly",
+    "computed": "readonly",
+    "watch": "readonly",
+    "watchEffect": "readonly",
+    // ...more APIs
+  }
+}
+```
+
+```js [Flat Config]
+// eslint.config.js
+export default [
+  {
+    languageOptions: {
+      globals: {
+        ref: 'readonly',
+        computed: 'readonly',
+        watch: 'readonly',
+        watchEffect: 'readonly',
+        // ...more APIs
+      }
+    }
+  }
+]
+```
+
+:::

lib/rules/enforce-style-attribute.js

@@ -92,9 +92,9 @@ module.exports = {
       return {}
     }
 
-    const topLevelElements = documentFragment.children.filter(isVElement)
-    const topLevelStyleTags = topLevelElements.filter(
-      (element) => element.rawName === 'style'
+    const topLevelStyleTags = documentFragment.children.filter(
+      /** @returns {element is VElement} */
+      (element) => isVElement(element) && element.rawName === 'style'
     )
 
     if (topLevelStyleTags.length === 0) {

lib/rules/no-async-in-computed-properties.js

@@ -263,14 +263,11 @@ module.exports = {
         /** @param {Program} program */
         Program(program) {
           const tracker = new ReferenceTracker(utils.getScope(context, program))
-          const traceMap = utils.createCompositionApiTraceMap({
-            [ReferenceTracker.ESM]: true,
+          for (const { node } of utils.iterateReferencesTraceMap(tracker, {
             computed: {
               [ReferenceTracker.CALL]: true
             }
-          })
-
-          for (const { node } of tracker.iterateEsmReferences(traceMap)) {
+          })) {
             if (node.type !== 'CallExpression') {
               continue
             }

lib/rules/no-lifecycle-after-await.js

@@ -63,19 +63,18 @@ module.exports = {
         /** @param {Program} program */
         Program(program) {
           const tracker = new ReferenceTracker(utils.getScope(context, program))
-          const traceMap = {
-            /** @type {TraceMap} */
-            vue: {
-              [ReferenceTracker.ESM]: true
-            }
-          }
+          /** @type {TraceMap} */
+          const traceMap = {}
           for (const lifecycleHook of LIFECYCLE_HOOKS) {
-            traceMap.vue[lifecycleHook] = {
+            traceMap[lifecycleHook] = {
               [ReferenceTracker.CALL]: true
             }
           }
 
-          for (const { node } of tracker.iterateEsmReferences(traceMap)) {
+          for (const { node } of utils.iterateReferencesTraceMap(
+            tracker,
+            traceMap
+          )) {
             lifecycleHookCallNodes.add(node)
           }
         }

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

@@ -183,14 +183,12 @@ module.exports = {
         /** @param {Program} program */
         Program(program) {
           const tracker = new ReferenceTracker(utils.getScope(context, program))
-          const traceMap = utils.createCompositionApiTraceMap({
-            [ReferenceTracker.ESM]: true,
+
+          for (const { node } of utils.iterateReferencesTraceMap(tracker, {
             computed: {
               [ReferenceTracker.CALL]: true
             }
-          })
-
-          for (const { node } of tracker.iterateEsmReferences(traceMap)) {
+          })) {
             if (node.type !== 'CallExpression') {
               continue
             }

lib/rules/no-watch-after-await.js

@@ -78,19 +78,15 @@ module.exports = {
         /** @param {Program} program */
         Program(program) {
           const tracker = new ReferenceTracker(utils.getScope(context, program))
-          const traceMap = {
-            vue: {
-              [ReferenceTracker.ESM]: true,
-              watch: {
-                [ReferenceTracker.CALL]: true
-              },
-              watchEffect: {
-                [ReferenceTracker.CALL]: true
-              }
-            }
-          }
 
-          for (const { node } of tracker.iterateEsmReferences(traceMap)) {
+          for (const { node } of utils.iterateReferencesTraceMap(tracker, {
+            watch: {
+              [ReferenceTracker.CALL]: true
+            },
+            watchEffect: {
+              [ReferenceTracker.CALL]: true
+            }
+          })) {
             watchCallNodes.add(node)
           }
         }

lib/rules/order-in-components.js

@@ -218,6 +218,7 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/order-in-components.html'
     },
     fixable: 'code', // null or "code" or "whitespace"
+    hasSuggestions: true,
     schema: [
       {
         type: 'object',
@@ -231,7 +232,9 @@ module.exports = {
     ],
     messages: {
       order:
-        'The "{{name}}" property should be above the "{{firstUnorderedPropertyName}}" property on line {{line}}.'
+        'The "{{name}}" property should be above the "{{firstUnorderedPropertyName}}" property on line {{line}}.',
+      reorderWithSideEffects:
+        'Manually move "{{name}}" property above "{{firstUnorderedPropertyName}}" property on line {{line}} (might break side effects).'
     }
   },
   /** @param {RuleContext} context */
@@ -255,6 +258,30 @@ module.exports = {
       return num == null ? -1 : num
     }
 
+    /**
+     * @param {Property} propertyNode
+     * @param {Property} unorderedPropertyNode
+     */
+    function* handleFix(fixer, propertyNode, unorderedPropertyNode) {
+      const afterComma = sourceCode.getTokenAfter(propertyNode)
+      const hasAfterComma = isComma(afterComma)
+
+      const beforeComma = sourceCode.getTokenBefore(propertyNode)
+      const codeStart = beforeComma.range[1] // to include comments
+      const codeEnd = hasAfterComma
+        ? afterComma.range[1]
+        : propertyNode.range[1]
+
+      const removeStart = hasAfterComma ? codeStart : beforeComma.range[0]
+      yield fixer.removeRange([removeStart, codeEnd])
+
+      const propertyCode =
+        sourceCode.text.slice(codeStart, codeEnd) + (hasAfterComma ? '' : ',')
+      const insertTarget = sourceCode.getTokenBefore(unorderedPropertyNode)
+
+      yield fixer.insertTextAfter(insertTarget, propertyCode)
+    }
+
     /**
      * @param {(Property | SpreadElement)[]} propertiesNodes
      */
@@ -287,6 +314,18 @@ module.exports = {
 
         if (firstUnorderedProperty) {
           const line = firstUnorderedProperty.node.loc.start.line
+          const propertyNode = property.node
+          const firstUnorderedPropertyNode = firstUnorderedProperty.node
+          const hasSideEffectsPossibility = propertiesNodes
+            .slice(
+              propertiesNodes.indexOf(firstUnorderedPropertyNode),
+              propertiesNodes.indexOf(propertyNode) + 1
+            )
+            .some(
+              (property) =>
+                !isNotSideEffectsNode(property, sourceCode.visitorKeys)
+            )
+
           context.report({
             node: property.node,
             messageId: 'order',
@@ -295,44 +334,24 @@ module.exports = {
               firstUnorderedPropertyName: firstUnorderedProperty.name,
               line
             },
-            *fix(fixer) {
-              const propertyNode = property.node
-              const firstUnorderedPropertyNode = firstUnorderedProperty.node
-              const hasSideEffectsPossibility = propertiesNodes
-                .slice(
-                  propertiesNodes.indexOf(firstUnorderedPropertyNode),
-                  propertiesNodes.indexOf(propertyNode) + 1
-                )
-                .some(
-                  (property) =>
-                    !isNotSideEffectsNode(property, sourceCode.visitorKeys)
-                )
-              if (hasSideEffectsPossibility) {
-                return
-              }
-              const afterComma = sourceCode.getTokenAfter(propertyNode)
-              const hasAfterComma = isComma(afterComma)
-
-              const beforeComma = sourceCode.getTokenBefore(propertyNode)
-              const codeStart = beforeComma.range[1] // to include comments
-              const codeEnd = hasAfterComma
-                ? afterComma.range[1]
-                : propertyNode.range[1]
-
-              const removeStart = hasAfterComma
-                ? codeStart
-                : beforeComma.range[0]
-              yield fixer.removeRange([removeStart, codeEnd])
-
-              const propertyCode =
-                sourceCode.text.slice(codeStart, codeEnd) +
-                (hasAfterComma ? '' : ',')
-              const insertTarget = sourceCode.getTokenBefore(
-                firstUnorderedPropertyNode
-              )
-
-              yield fixer.insertTextAfter(insertTarget, propertyCode)
-            }
+            fix: hasSideEffectsPossibility
+              ? undefined
+              : (fixer) =>
+                  handleFix(fixer, propertyNode, firstUnorderedPropertyNode),
+            suggest: hasSideEffectsPossibility
+              ? [
+                  {
+                    messageId: 'reorderWithSideEffects',
+                    data: {
+                      name: property.name,
+                      firstUnorderedPropertyName: firstUnorderedProperty.name,
+                      line
+                    },
+                    fix: (fixer) =>
+                      handleFix(fixer, propertyNode, firstUnorderedPropertyNode)
+                  }
+                ]
+              : undefined
           })
         }
       }

lib/rules/require-explicit-slots.js

@@ -59,9 +59,10 @@ module.exports = {
     if (!documentFragment) {
       return {}
     }
-    const scripts = documentFragment.children
-      .filter(utils.isVElement)
-      .filter((element) => element.name === 'script')
+    const scripts = documentFragment.children.filter(
+      /** @returns {element is VElement} */
+      (element) => utils.isVElement(element) && element.name === 'script'
+    )
     if (scripts.every((script) => !utils.hasAttribute(script, 'lang', 'ts'))) {
       return {}
     }

lib/rules/return-in-computed-property.js

@@ -57,14 +57,16 @@ module.exports = {
         /** @param {Program} program */
         Program(program) {
           const tracker = new ReferenceTracker(utils.getScope(context, program))
-          const traceMap = utils.createCompositionApiTraceMap({
-            [ReferenceTracker.ESM]: true,
+          const map = {
             computed: {
               [ReferenceTracker.CALL]: true
             }
-          })
+          }
 
-          for (const { node } of tracker.iterateEsmReferences(traceMap)) {
+          for (const { node } of utils.iterateReferencesTraceMap(
+            tracker,
+            map
+          )) {
             if (node.type !== 'CallExpression') {
               continue
             }

lib/rules/v-bind-style.js

@@ -13,6 +13,14 @@ const casing = require('../utils/casing')
  * @typedef { VDirective & { key: VBindDirectiveKey } } VBindDirective
  */
 
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+function kebabCaseToCamelCase(name) {
+  return casing.isKebabCase(name) ? casing.camelCase(name) : name
+}
+
 /**
  * @param {VBindDirective} node
  * @returns {boolean}
@@ -24,11 +32,10 @@ function isSameName(node) {
     node.value?.expression?.type === 'Identifier'
       ? node.value.expression.name
       : null
-  return Boolean(
-    attrName &&
-      valueName &&
-      casing.camelCase(attrName) === casing.camelCase(valueName)
-  )
+
+  if (!attrName || !valueName) return false
+
+  return kebabCaseToCamelCase(attrName) === kebabCaseToCamelCase(valueName)
 }
 
 /**
@@ -144,7 +151,7 @@ module.exports = {
           } else if (node.key.argument.type === 'VIdentifier') {
             yield fixer.insertTextAfter(
               node,
-              `="${casing.camelCase(node.key.argument.rawName)}"`
+              `="${kebabCaseToCamelCase(node.key.argument.rawName)}"`
             )
           }
         }