如何在Vue模板中禁用控制台日志？

Question

$log的起源：

Vue.prototype.$log = console.log

被禁止的地方：

<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>

以下是一些可能有帮助的额外信息：

• ESLint - 如何限制 this 的属性
• no-restricted-syntax
• vue/no-restricted-syntax

- Wenfang Du

---

澄清一下，您的意思是如何让eslint将“$log”标记为不允许，而不是如何禁用该函数的调用。我理解得对吗？ - apokryfos

@apokryfos 是的，目标是禁止所有 $log 的使用。 - Wenfang Du

@apokryfos 我已经搞定了。 - Wenfang Du

Answer 1

在深入研究no-restricted-syntax、vue/no-restricted-syntax规则和AST之后，我最终使其成功运行。下面是具体的规则：

{
  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.",
      },
    ],
  },
}

- Wenfang Du