Make no-ref-as-operand fixable close #1394

docs/rules/README.md

@@ -64,7 +64,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks |  |
 | [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  |
 | [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
-| [vue/no-ref-as-operand](./no-ref-as-operand.md) | disallow use of value wrapped by `ref()` (Composition API) as an operand |  |
+| [vue/no-ref-as-operand](./no-ref-as-operand.md) | disallow use of value wrapped by `ref()` (Composition API) as an operand | :wrench: |
 | [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
 | [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | disallow destructuring of `props` passed to `setup` |  |
 | [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |

docs/rules/no-ref-as-operand.md

@@ -10,13 +10,14 @@ since: v7.0.0
 > disallow use of value wrapped by `ref()` (Composition API) as an operand
 
 - :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-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 reports cases where a ref is used incorrectly as an operand.  
 You must use `.value` to access the `Ref` value.
 
-<eslint-code-block :rules="{'vue/no-ref-as-operand': ['error']}">
+<eslint-code-block fix :rules="{'vue/no-ref-as-operand': ['error']}">
 
 ```vue
 <script>

lib/rules/no-ref-as-operand.js

@@ -15,7 +15,7 @@ module.exports = {
       categories: ['vue3-essential'],
       url: 'https://eslint.vuejs.org/rules/no-ref-as-operand.html'
     },
-    fixable: null,
+    fixable: 'code',
     schema: [],
     messages: {
       requireDotValue:
@@ -46,6 +46,9 @@ module.exports = {
         messageId: 'requireDotValue',
         data: {
           method: data.method
+        },
+        fix(fixer) {
+          return fixer.insertTextAfter(node, '.value')
         }
       })
     }

tests/lib/rules/no-ref-as-operand.js

@@ -150,6 +150,14 @@ tester.run('no-ref-as-operand', rule, {
       console.log(count + 1) // error
       console.log(1 + count) // error
       `,
+      output: `
+      import { ref } from 'vue'
+      let count = ref(0)
+
+      count.value++ // error
+      console.log(count.value + 1) // error
+      console.log(1 + count.value) // error
+      `,
       errors: [
         {
           message:
@@ -195,6 +203,23 @@ tester.run('no-ref-as-operand', rule, {
         }
       </script>
       `,
+      output: `
+      <script>
+        import { ref } from 'vue'
+        export default {
+          setup() {
+            let count = ref(0)
+
+            count.value++ // error
+            console.log(count.value + 1) // error
+            console.log(1 + count.value) // error
+            return {
+              count
+            }
+          }
+        }
+      </script>
+      `,
       errors: [
         {
           messageId: 'requireDotValue',
@@ -237,6 +262,23 @@ tester.run('no-ref-as-operand', rule, {
         }
       </script>
       `,
+      output: `
+      <script>
+        import { ref } from '@vue/composition-api'
+        export default {
+          setup() {
+            let count = ref(0)
+
+            count.value++ // error
+            console.log(count.value + 1) // error
+            console.log(1 + count.value) // error
+            return {
+              count
+            }
+          }
+        }
+      </script>
+      `,
       errors: [
         {
           messageId: 'requireDotValue',
@@ -269,6 +311,13 @@ tester.run('no-ref-as-operand', rule, {
         //
       }
       `,
+      output: `
+      import { ref } from 'vue'
+      const foo = ref(true)
+      if (foo.value) {
+        //
+      }
+      `,
       errors: [
         {
           messageId: 'requireDotValue',
@@ -284,6 +333,13 @@ tester.run('no-ref-as-operand', rule, {
         //
       }
       `,
+      output: `
+      import { ref } from 'vue'
+      const foo = ref(true)
+      switch (foo.value) {
+        //
+      }
+      `,
       errors: [
         {
           messageId: 'requireDotValue',
@@ -300,6 +356,14 @@ tester.run('no-ref-as-operand', rule, {
       var c = !foo
       var d = ~foo
       `,
+      output: `
+      import { ref } from 'vue'
+      const foo = ref(0)
+      var a = -foo.value
+      var b = +foo.value
+      var c = !foo.value
+      var d = ~foo.value
+      `,
       errors: [
         {
           messageId: 'requireDotValue',
@@ -328,6 +392,14 @@ tester.run('no-ref-as-operand', rule, {
       baz += foo
       baz -= foo
       `,
+      output: `
+      import { ref } from 'vue'
+      let foo = ref(0)
+      foo.value += 1
+      foo.value -= 1
+      baz += foo.value
+      baz -= foo.value
+      `,
       errors: [
         {
           messageId: 'requireDotValue',
@@ -354,6 +426,12 @@ tester.run('no-ref-as-operand', rule, {
       var a = foo || other
       var b = foo && other
       `,
+      output: `
+      import { ref } from 'vue'
+      const foo = ref(true)
+      var a = foo.value || other
+      var b = foo.value && other
+      `,
       errors: [
         {
           messageId: 'requireDotValue',
@@ -371,6 +449,11 @@ tester.run('no-ref-as-operand', rule, {
       let foo = ref(true)
       var a = foo ? x : y
       `,
+      output: `
+      import { ref } from 'vue'
+      let foo = ref(true)
+      var a = foo.value ? x : y
+      `,
       errors: [
         {
           messageId: 'requireDotValue',
@@ -395,6 +478,22 @@ tester.run('no-ref-as-operand', rule, {
         }
       </script>
       `,
+      output: `
+      <script>
+        import { ref } from 'vue'
+        let count = ref(0)
+        export default {
+          setup() {
+            count.value++ // error
+            console.log(count.value + 1) // error
+            console.log(1 + count.value) // error
+            return {
+              count
+            }
+          }
+        }
+      </script>
+      `,
       errors: [
         {
           messageId: 'requireDotValue',
@@ -451,6 +550,46 @@ tester.run('no-ref-as-operand', rule, {
         const n = foo + 1 // error
       </script>
       `,
+      output: `
+      <script>
+        import { ref, computed, toRef, customRef, shallowRef } from 'vue'
+        let count = ref(0)
+        let cntcnt = computed(()=>count.value+count.value)
+
+        const state = reactive({
+          foo: 1,
+          bar: 2
+        })
+
+        const fooRef = toRef(state, 'foo')
+
+        let value = 'hello'
+        const cref = customRef((track, trigger) => {
+          return {
+            get() {
+              track()
+              return value
+            },
+            set(newValue) {
+              clearTimeout(timeout)
+              timeout = setTimeout(() => {
+                value = newValue
+                trigger()
+              }, delay)
+            }
+          }
+        })
+
+        const foo = shallowRef({})
+
+        count.value++ // error
+        cntcnt.value++ // error
+
+        const s = \`\${fooRef.value} : \${cref.value}\` // error x 2
+
+        const n = foo.value + 1 // error
+      </script>
+      `,
       errors: [
         {
           message:
@@ -487,6 +626,13 @@ tester.run('no-ref-as-operand', rule, {
         foo.bar = 123
       </script>
       `,
+      output: `
+      <script>
+        import { ref, computed, toRef, customRef, shallowRef } from 'vue'
+        const foo = shallowRef({})
+        foo.value.bar = 123
+      </script>
+      `,
       errors: [
         {
           messageId: 'requireDotValue'
@@ -501,6 +647,13 @@ tester.run('no-ref-as-operand', rule, {
         const bar = foo?.bar
       </script>
       `,
+      output: `
+      <script>
+        import { ref } from 'vue'
+        const foo = ref(123)
+        const bar = foo.value?.bar
+      </script>
+      `,
       errors: [
         {
           messageId: 'requireDotValue'