Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from Jan 3, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c85a493
Make no-ref-as-operand fixable close #1394
sapphi-red Dec 29, 2020
5fa9ea3
dont use array for returning a single fix data
sapphi-red Jan 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/rules/README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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