Skip to content

/ eslint-plugin-vue

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.

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

vue/no-arrow-functions-in-watch with deep. #1299

Open
jens-morten-mikkelsen opened this issue Sep 14, 2020 · 1 comment
Open

vue/no-arrow-functions-in-watch with deep. #1299

jens-morten-mikkelsen opened this issue Sep 14, 2020 · 1 comment
Labels
bug semver-minor

Comments

@jens-morten-mikkelsen
Copy link

@jens-morten-mikkelsen jens-morten-mikkelsen commented Sep 14, 2020

Tell us about your environment

  • ESLint version: ^6.7.2
  • eslint-plugin-vue version: ^7.0.0-0
  • Node version: 10.18.0
  • Operating System: Windows 10
  • vue 3 CLI default environment

Please show your full configuration:

env: {
        browser: true,
        es6: true,
        node: true
    },
    extends: [
        'eslint:recommended',
        '@vue/typescript',
        'plugin:vue/vue3-recommended'
    ],
    plugins: [
        '@typescript-eslint'
    ],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
    },
    parserOptions: {
        ecmaVersion: 2018,
        parser: '@typescript-eslint/parser',
        sourceType: 'module'
    },
    rules: {
        indent: ['error', 4],
        quotes: ['error', 'single'],
        semi: ['error', 'always'],
        'block-spacing': ['error'],
        'brace-style': ['error'],
        'comma-dangle': ['error'],
        'comma-spacing': ['error'],
        'comma-style': ['error'],
        'computed-property-spacing': ['error'],
        'func-call-spacing': ['error'],

        'eqeqeq': ['error', 'smart'],
        'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],

        'space-infix-ops': ['error'],
        'no-multiple-empty-lines': ['warn', {
            max: 1,
            maxEOF: 1,
            maxBOF: 0
        }],

        'vue/no-arrow-functions-in-watch': ['error']
    }

What did you do?

<template>
    <div class="hello">
        <h1>
            {{ msg }}
        </h1>
        <p>
            For a guide and recipes on how to configure / customize this project,<br />
            check out the
            <a href="https://cli.vuejs.org"
               rel="noopener"
               target="_blank">
                vue-cli documentation
            </a>
            .
        </p>
        <h3>
            Installed CLI Plugins
        </h3>
        <ul>
            <li>
                <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
                   rel="noopener"
                   target="_blank">
                    babel
                </a>
            </li>
            <li>
                <a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
                   rel="noopener"
                   target="_blank">
                    eslint
                </a>
            </li>
        </ul>
        <h3>
            Essential Links
        </h3>
        <ul>
            <li>
                <a href="https://vuejs.org"
                   rel="noopener"
                   target="_blank">
                    Core Docs
                </a>
            </li>
            <li>
                <a href="https://forum.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    Forum
                </a>
            </li>
            <li v-for="a in arr"
                :key="a">
                <p v-for="b in arrProp"
                   :key="b">
                    a
                </p>
                <a v-for="aasdf in arr"
                   :key="aasdf"
                   href="https://chat.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    Community Chat
                </a>
            </li>
            <li>
                <a href="https://twitter.com/vuejs"
                   rel="noopener"
                   target="_blank">
                    Twitter
                </a>
            </li>
            <li>
                <a href="https://news.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    News
                </a>
            </li>
        </ul>
        <h3>
            Ecosystem
        </h3>
        <ul>
            <li>
                <a href="https://router.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    vue-router
                </a>
            </li>
            <li>
                <a v-if="asdf"
                   href="https://vuex.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    vuex
                </a>
            </li>
            <li>
                <a href="https://github.com/vuejs/vue-devtools#vue-devtools"
                   rel="noopener"
                   target="_blank"
                   @click="bar">
                    vue-devtools
                </a>
            </li>
            <li>
                <a href="https://vue-loader.vuejs.org"
                   rel="noopener"
                   target="_blank">
                    vue-loader
                </a>
            </li>
            <li>
                <a :class="{
                       'lil': asdf,
                       'lul': !asdf
                   }"
                   href="https://github.com/vuejs/awesome-vue"
                   rel="noopener"
                   target="_blank">
                    awesom
                    vue
                </a>
            </li>
        </ul>
        <div>
            asdf
            asdf
        </div>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    props: {
        msgProp: {
            default: '',
            type: String
        },
        arrProp: {
            default: () => [],
            type: Array
        }
    },
    data() {
        return {
            arr: [
                '1',
                '2'
            ]
        };
    },
    computed: {
        revMsg: function() {
            return this.arr.slice(0).reverse();
        },
        asdf: function () {
            if (this.msg === 'asdf') {
                this.bar();
            } else {
                this.baz();
            }

            if (this.msg === 'asdf') {
                this.bar();
            } else {
                this.baz();
            }

            if (this.msg === 'asdf') {
                this.bar();
            } else {
                this.baz();
            }
            if (this.msg === 'asdf') {
                return false;
            }
            return false;
        }
    },

    watch: {
        arr: {
            deep: true,
            handler: (oldVal, newVal) => { /* **(mark 1)** */
                this.bar();
            }
        },
        revMsg: {
            deep: true,
            handler: function (oldVal, newVal) {
                this.bar();
            }
        },
        asdf: (oldVal, newVal) => { /* **(mark 2)** */
            this.bar();
        }
    },

    bar: function () {
        let a = 1;
        a = a + 4;
        console.log('bar');
    },

    baz: function () {
        console.log('baz');
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
</style>

What did you expect to happen?
I expected that the linter would have given me errors on (mark 1) and (mark 2)

What actually happened?
145:22 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
149:5 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
158:17 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
161:15 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
189:22 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
189:23 warning 'oldVal' is defined but never used @typescript-eslint/no-unused-vars
189:23 warning Argument 'oldVal' should be typed @typescript-eslint/explicit-module-boundary-types
189:31 warning Argument 'newVal' should be typed @typescript-eslint/explicit-module-boundary-types
189:31 warning 'newVal' is defined but never used @typescript-eslint/no-unused-vars
195:22 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
195:32 warning Argument 'oldVal' should be typed @typescript-eslint/explicit-module-boundary-types
195:32 warning 'oldVal' is defined but never used @typescript-eslint/no-unused-vars
195:40 warning 'newVal' is defined but never used @typescript-eslint/no-unused-vars
195:40 warning Argument 'newVal' should be typed @typescript-eslint/explicit-module-boundary-types
199:9 error You should not use an arrow function to define a watcher vue/no-arrow-functions-in-watch
199:15 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
199:16 warning Argument 'oldVal' should be typed @typescript-eslint/explicit-module-boundary-types
199:16 warning 'oldVal' is defined but never used @typescript-eslint/no-unused-vars
199:24 warning 'newVal' is defined but never used @typescript-eslint/no-unused-vars
199:24 warning Argument 'newVal' should be typed @typescript-eslint/explicit-module-boundary-types
204:10 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types
205:13 warning 'a' is assigned a value but never used @typescript-eslint/no-unused-vars
210:10 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types

Repository to reproduce this issue
I'll try and put out a repo in the next counple of days
@ota-meshi
Copy link
Member

@ota-meshi ota-meshi commented Sep 19, 2020

Thank you for this issue!

The current no-arrow-functions-in-watch rule doesn't seem to check the handler. We need to change the no-arrow-functions-in-watch rule.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug semver-minor
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
@ota-meshi @jens-morten-mikkelsen
You can’t perform that action at this time.