### WebStorm 中解决 ESLint 提示 Insert `··` (prettier/prettier) 导致文件报错的问题 在 WebStorm 中，当使用 ESLint 和 Prettier 进行代码格式化时，可能会遇到类似 “Insert `··`” 的错误提示。这通常是因为 ESLint 和 Prettier 的规则存在冲突或者未正确配置所致。 以下是解决问题的具体方法： #### 1. 安装必要的依赖 确保已安装以下依赖包： ```bash npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier ``` 这些依赖的作用分别是： - **prettier**: 负责代码格式化的工具。 - **eslint-config-prettier**: 关闭可能与 Prettier 冲突的 ESLint 规则[^2]。 - **eslint-plugin-prettier**: 将 Prettier 集成到 ESLint 中，使其能够在 linting 期间应用 Prettier 的规则[^1]。 #### 2. 修改 `.eslintrc.js` 配置文件 更新项目的 `.eslintrc.js` 文件以支持 Prettier 的规则。以下是一个推荐的配置示例： ```javascript module.exports = { root: true, env: { node: true, }, extends: [ 'eslint:recommended', 'plugin:prettier/recommended', // 确保此扩展位于最后一位[^2] ], plugins: ['prettier'], rules: { 'prettier/prettier': 'error', // 启用 Prettier 的规则并设置为强制执行 'arrow-body-style': 'off', // 取消箭头函数体样式检查 'prefer-arrow-callback': 'off',// 取消回调函数优先使用箭头函数的要求 }, }; ``` #### 3. 创建或更新 `.prettierrc.json` 文件 `.prettierrc.json` 是用于定义 Prettier 格式化规则的配置文件。如果尚未创建该文件，可以通过以下命令初始化一个空文件： ```bash echo {} > .prettierrc.json ``` 随后，在其中添加所需的规则。例如： ```json { "tabWidth": 2, // 缩进级别为空格数，默认为 2 "semi": false, // 不在语句末尾添加分号 "singleQuote": true, // 使用单引号代替双引号 "trailingComma": "none", // 不允许尾随逗号 "htmlWhitespaceSensitivity": "ignore", // HTML 空白字符不敏感 "printWidth": 130, // 行宽超过 130 字符时换行 "bracketSameLine": true // JSX 属性在同一行显示 } ``` 以上配置可以根据实际需求进行调整[^3]。 #### 4. 配置 WebStorm 为了使 WebStorm 正确识别并应用 ESLint 和 Prettier 的规则，请按照以下步骤操作： - 打开 WebStorm 设置 (`File -> Settings`)。 - 前往 `Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint`。 - 确认选择了 `Automatic configuration` 或手动指定 ESLint 的路径。 - 如果启用了自动修复功能，则勾选 `Run eslint --fix on save` 选项，以便保存文件时自动修正问题[^5]。 #### 5. 解决红色波浪线问题 如果仍然存在红色波浪线下划线提示，可以尝试以下措施： - 清理缓存并重启 WebStorm (`File -> Invalidate Caches / Restart`)。 - 检查 `.eslintrc.js` 是否遗漏了 `"extends"` 数组中的 `'plugin:prettier/recommended'`[^4]。 - 删除 `node_modules` 并重新安装依赖： ```bash rm -rf node_modules package-lock.json npm install ``` --- ### 总结 通过正确安装和配置相关依赖以及合理调整 WebStorm 的设置，可以有效解决因 Prettier 和 ESLint 规则冲突而导致的红色波浪线问题。最终目标是实现两者无缝协作，从而提升开发效率和代码质量。 ---