Skip to content

Commit

Permalink
Make no-ref-as-operand fixable close #1394 (#1396)
Browse files Browse the repository at this point in the history 
* Make no-ref-as-operand fixable close #1394

* dont use array for returning a single fix data

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>
  • Loading branch information
@sapphi-red @ota-meshi
sapphi-red and ota-meshi committed Jan 3, 2021
1 parent b5b6347 commit 42a543d
Show file tree
Hide file tree
Showing 4 changed files with 160 additions and 3 deletions.
2 changes: 1 addition & 1 deletion docs/rules/README.md
View file
Expand Up @@ -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: |
Expand Down
3 changes: 2 additions & 1 deletion docs/rules/no-ref-as-operand.md
View file
Expand Up @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion lib/rules/no-ref-as-operand.js
View file
Expand Up @@ -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:
Expand Down Expand Up @@ -46,6 +46,9 @@ module.exports = {
messageId: 'requireDotValue',
data: {
method: data.method
},
fix(fixer) {
return fixer.insertTextAfter(node, '.value')
}
})
}
Expand Down
153 changes: 153 additions & 0 deletions tests/lib/rules/no-ref-as-operand.js
View file
Expand Up @@ -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:
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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'
Expand All @@ -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'
Expand Down

0 comments on commit 42a543d

Please sign in to comment.