Vue.js项目中debugger触发ESLint报错，如何正常使用debugger？

嘿，我太懂你这个糟心事儿了——给Vue输入框绑了demo方法，想加个debugger调试，结果被ESLint揪着报错，好好的调试流程被打断！别慌，这都是ESLint的默认规则在搞怪，咱们有好几种解决办法：

方法一：临时忽略单行的ESLint规则 #

如果你只是临时在这个函数里用debugger，不想改动全局配置，直接在debugger上方加一行ESLint忽略注释就行：

export default {
  name: "Demo",
  methods: {
    demo: function () {
      console.log('Running demo')
      // eslint-disable-next-line no-debugger
      debugger
    }
  }
}

这条注释的作用是告诉ESLint：“忽略下一行的no-debugger检查”，精准解决单处的报错。

方法二：全局配置，仅开发环境允许debugger #

更合理的做法是只在开发阶段放开debugger限制，生产环境依然严格禁止（避免把调试代码打包上线）。找到项目根目录的ESLint配置文件（比如.eslintrc.js或者.eslintrc），修改rules字段：

module.exports = {
  // 其他原有配置...
  rules: {
    // 其他规则...
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

这样配置后，开发时ESLint不会因为debugger报错，生产打包时则会触发错误提醒你清理调试代码，一举两得。

顺带解决Prettier的格式警告 #

你报错里还有Insert ···这类提示，这是Prettier的格式检查在提醒代码缩进不符合规范。最简单的解决办法是运行项目里的lint修复命令：

npm run lint --fix

它会自动帮你调整缩进、空格这些格式问题，省得手动改。

内容的提问来源于stack exchange，提问作者Lukasz Dynowski