Skip to content

Commit

Permalink
Add check for watchEffect.
Browse files Browse the repository at this point in the history
  • Loading branch information
ota-meshi committed Mar 15, 2020
1 parent 21f7e0d commit 6bea92e
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 2 deletions.
2 changes: 1 addition & 1 deletion docs/rules/README.md
Expand Up @@ -58,6 +58,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates | |
| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes | |
| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for | |
| [vue/no-watch-after-await](./no-watch-after-await.md) | disallow asynchronously registered `watch` | |
| [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements | |
| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: |
| [vue/require-render-return](./require-render-return.md) | enforce render function to always return value | |
Expand Down Expand Up @@ -273,7 +274,6 @@ For example:
| [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax | |
| [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes | |
| [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |
| [vue/no-watch-after-await](./no-watch-after-await.md) | disallow asynchronously registered `watch` | |
| [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces | :wrench: |
| [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: |
| [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported | |
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/no-watch-after-await.md
Expand Up @@ -7,6 +7,8 @@ description: disallow asynchronously registered `watch`
# vue/no-watch-after-await
> disallow asynchronously registered `watch`
- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.

## :book: Rule Details

This rule reports the `watch()` after `await` expression.
Expand Down
1 change: 1 addition & 0 deletions lib/configs/vue3-essential.js
Expand Up @@ -26,6 +26,7 @@ module.exports = {
'vue/no-unused-components': 'error',
'vue/no-unused-vars': 'error',
'vue/no-use-v-if-with-v-for': 'error',
'vue/no-watch-after-await': 'error',
'vue/require-component-is': 'error',
'vue/require-prop-type-constructor': 'error',
'vue/require-render-return': 'error',
Expand Down
5 changes: 4 additions & 1 deletion lib/rules/no-watch-after-await.js
Expand Up @@ -11,7 +11,7 @@ module.exports = {
type: 'suggestion',
docs: {
description: 'disallow asynchronously registered `watch`',
category: undefined,
categories: ['vue3-essential'],
url: 'https://eslint.vuejs.org/rules/no-watch-after-await.html'
},
fixable: null,
Expand Down Expand Up @@ -45,6 +45,9 @@ module.exports = {
[ReferenceTracker.ESM]: true,
watch: {
[ReferenceTracker.CALL]: true
},
watchEffect: {
[ReferenceTracker.CALL]: true
}
}
}
Expand Down
41 changes: 41 additions & 0 deletions tests/lib/rules/no-watch-after-await.js
Expand Up @@ -41,6 +41,21 @@ tester.run('no-watch-after-await', rule, {
</script>
`
},
{
filename: 'test.vue',
code: `
<script>
import {watch, watchEffect} from 'vue'
export default {
async setup() {
watchEffect(() => { /* ... */ })
watch(() => { /* ... */ })
await doSomething()
}
}
</script>
`
},
{
filename: 'test.vue',
code: `
Expand Down Expand Up @@ -82,6 +97,32 @@ tester.run('no-watch-after-await', rule, {
}
]
},
{
filename: 'test.vue',
code: `
<script>
import {watch, watchEffect} from 'vue'
export default {
async setup() {
await doSomething()
watchEffect(() => { /* ... */ })
watch(() => { /* ... */ })
}
}
</script>
`,
errors: [
{
messageId: 'forbidden',
line: 8
},
{
messageId: 'forbidden',
line: 9
}
]
},
{
filename: 'test.vue',
code: `
Expand Down

0 comments on commit 6bea92e

Please sign in to comment.