1、問題描述：

其一、報錯為：

Unexpected 'debugger' statement.eslint(no-debugger)

中文為：

意外的“調試器”語句.eslint（無調試器）

其二、問題描述為：

在正常的 vue 項目中使用 debugger 的調試過程中，突然發現在頁面出現 debugger 后，標紅用法不正確，但項目運行后的頁面調試沒問題;

其三、標紅頁面顯示為：

2、問題分析：

根據提示應該是 eslint 的問題，找到相應的位置給 rules 加相應的規則應該就能解決該問題；

3、問題解決：

其一、兩種解決方式：

方式一、找到 .eslintrc.js 文件添加 rules 規則(親測)：

// 即：將 .eslintrc.js 中的 rules 規則的 no-debugger (規則名) 設置成 0 ;

// 代碼為：

rules: {
    "no-debugger": 0 
  },

方式二、找到 package.json 文件添加規則：

A、找到 package.json 文件；

B、找到 eslintConfig 配置參數；

C、在 eslintConfig 下的 rules 添加 “no-debugger”: “off”;

其二、ESLint - rules自定義規則配置方法：

A、配置語法：

// 配置參數
rules: {
    "規則名1": [規則值, 規則配置],
    "規則名2": [規則值, 規則配置]
}

B、規則值（決定了是否開啟/關閉）：

"off"或者0    //關閉規則
"warn"或者1    //在打開的規則作為警告（不影響退出代碼）
"error"或者2    //把規則作為一個錯誤（退出代碼觸發時為1）

C、規則名（每個規則對應一個規則名，就像前言提到的空格縮進規則對應 indent 一樣）：

這里列出了規則名大全，分別是博主匯總與官網闡述：
官網(推薦)：https://cn.eslint.org/docs/rules/
博主匯總：https://blog.csdn.net/weixin_44198965/article/details/99839604

D、案例展示：

// add your custom rules here
rules: {
    "indent": ["off", 2] // off:禁用空格縮進規則
}

4、小結：

其一、哪里有不對或不合適的地方，還請大佬們多多指點和交流！
其二、若有轉發或引用本文章內容，請注明本博客地址(直接點擊下面 url 跳轉) https://blog.csdn.net/weixin_43405300,創作不易，且行且珍惜！
其三、有興趣的話，可以多多關注這個專欄(Vue(Vue2+Vue3)面試必備專欄)(直接點擊下面 url 跳轉)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482