How to ban console log in the Vue template?

Question

Origin of $log:

Vue.prototype.$log = console.log

Places to be banned:

<template>
  <!-- Place 1 -->
  <div @click="$log">
    <!-- Place 2 -->
    {{ $log }}
    <!-- Place 3 -->
    {{ $log('foo') }}
  </div>
</template>

<script>
import Vue from 'vue'

// Place 4
Vue.prototype.$log('foo')

export default {
  created() {
    // Place 5
    this.$log('foo')
  },
}
</script>

Some additional information that might help:

To clarify, you mean how to get eslint to flag $log as not allowed, not how to disable the call of that function. Am I understanding this correctly? — apokryfos
– apokryfos, Commented Dec 24, 2020 at 6:57

Wenfang Du · Accepted Answer · 2021-02-08 02:13:58Z

5

After digging into no-restricted-syntax, vue/no-restricted-syntax rules, and ASTs, I finally got this working, here're the working rules:

{
  rules: {
    'no-restricted-syntax': [
      'error',
      {
        selector: '[name=$log]',
        message: "Using '$log' is not allowed.",
      },
    ],
    'vue/no-restricted-syntax': [
      'error',
      {
        selector: '[name=$log]',
        message: "Using '$log' is not allowed.",
      },
    ],
  },
}

edited Feb 8, 2021 at 2:13

answered Dec 26, 2020 at 5:54

Wenfang Du

12k13 gold badges80 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to ban console log in the Vue template?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related