vuejs / eslint-plugin-vue

Official ESLint plugin for Vue.js
https://eslint.vuejs.org/
MIT License
4.47k stars 667 forks source link

`vue/no-ref-as-operand` to support `ref` from composable #2519

Open kong-troop opened 3 months ago

kong-troop commented 3 months ago

Please describe what the rule should do:

Current vue/no-ref-as-operand rule only support the local ref. If a ref is being returned from a composable and being use with operand (eg: returnedRef++) , it didnt throw any warning as expected.

What category should the rule belong to?

[ ] Enforces code style (layout) [x] Warns about a potential error (problem) [ ] Suggests an alternate way of doing something (suggestion) [ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

const ok = ref(true)
const msg = ok ? 'yes' : 'no' // this throws warning as expected

// ---- //

const ok = useOk() // returned as Ref<boolean>
const msg = ok ? 'yes' : 'no' // No warning was shown

Additional context

FloEdelmann commented 3 months ago

ESLint and thus eslint-plugin-vue only has access to the current file while linting, so checking what might be returned from some other file is difficult.

Maybe if typescript-eslint's parser is used, we have access to the types and can report those cases then? Feel free to try that and submit a PR.

Flareonn commented 1 month ago

I have a similar problem. Based on the comment above, for the test I made a composable in one file

My example of playback:

import { defineComponent, ref } from 'vue'

const useMyRef = () => ref(true)

export const TestComponent = defineComponent({
    name: 'TestComponent',
    setup() {
        const test2 = ref(true)
        const ctx = useMyRef()

        // Not valid - true
        if (test2) {
            console.log('')
        }

        // Valid - wtf?
        if (ctx) {
            console.log('')
        }

        return () => null
    },
})