企业官网建设流程全解析

1. 问题背景：当Prettier遇上ESLint

在IntelliJ IDEA中同时使用Prettier和ESLint时，经常会遇到格式化冲突的红色波浪线警告。这本质上是因为两个工具对代码风格的校验规则不一致——Prettier作为固执己见的格式化工具，会强制按自己的规则重新排版代码；而ESLint作为静态检查工具，也有自己的一套风格规则。当两者规则存在差异时，IDEA就会在编辑器里标出这些"错误"。

典型的报错信息可能包含：

• prettier/prettier: Insert ··
• prettier/prettier: Delete␍``
• prettier/prettier: Replace"with'``

这些错误虽然不影响代码运行，但会干扰开发体验。特别是在团队协作中，如果成员使用的IDE配置不同，可能同一段代码在不同机器上显示为不同状态。

2. 方法一：统一工具配置优先级

2.1 配置ESLint集成Prettier规则

最彻底的解决方案是让ESLint直接使用Prettier的规则，这需要安装和配置eslint-plugin-prettier：

npm install --save-dev eslint-plugin-prettier

然后在.eslintrc.js中添加配置：

module.exports = { plugins: ['prettier'], rules: { 'prettier/prettier': 'error' } }

2.2 关闭冲突的ESLint规则

同时安装eslint-config-prettier来关闭ESLint中与Prettier冲突的规则：

npm install --save-dev eslint-config-prettier

配置扩展：

module.exports = { extends: [ 'some-other-config', 'prettier' // 必须放在最后 ] }

提示：配置顺序很重要，prettier必须出现在extends数组的最后位置，才能正确覆盖之前的规则。

3. 方法二：调整IDEA的代码风格设置

3.1 启用Prettier作为默认格式化器

1. 打开设置：File > Settings > Languages & Frameworks > JavaScript > Prettier
2. 勾选"On code reformat"和"On save"
3. 确保"Run for files"包含你的文件类型（如{**/*,*}.{js,ts,jsx,tsx,vue}）

3.2 禁用ESLint的自动修复

有时ESLint会在保存时自动修复问题，与Prettier产生竞争：

1. 进入：File > Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
2. 取消勾选"Run eslint --fix on save"

4. 方法三：配置文件覆盖策略

4.1 项目级配置文件优先级

IDEA会按以下顺序查找配置文件：

1. 项目根目录下的.prettierrc或.eslintrc
2. 父目录中的配置文件（直到系统根目录）
3. 用户主目录的全局配置
4. IDE内置默认配置

建议在项目根目录显式创建配置文件，避免继承不预期的规则。

4.2 多编辑器兼容配置

对于需要跨编辑器协作的项目，推荐使用overrides字段：

{ "overrides": [ { "files": ["*.vue"], "options": { "parser": "vue" } } ] }

5. 方法四：处理行尾和缩进问题

5.1 统一行尾符

Windows和Unix系统的换行符差异是常见冲突源。在.prettierrc中明确指定：

{ "endOfLine": "lf" }

或者在.editorconfig中设置：

[*] end_of_line = lf

5.2 解决缩进冲突

当ESLint要求2空格而Prettier默认4空格时，可以这样统一：

{ "tabWidth": 2, "useTabs": false }

对应的ESLint规则：

rules: { 'indent': ['error', 2] }

6. 方法五：处理引号和分号争议

6.1 单双引号统一

Prettier默认双引号，但许多ESLint配置要求单引号。可以在Prettier配置中妥协：

{ "singleQuote": true }

6.2 分号配置

同样处理分号问题：

{ "semi": false }

对应的ESLint规则应保持一致：

rules: { 'quotes': ['error', 'single'], 'semi': ['error', 'never'] }

7. 方法六：高级调试技巧

7.1 查看实际生效规则

在项目根目录运行：

npx eslint --print-config path/to/file.js > eslint-config.json

这会输出ESLint对该文件实际应用的所有规则，方便排查冲突。

7.2 禁用特定文件的检查

对于自动生成的或第三方代码，可以添加注释：

// eslint-disable-next-line prettier/prettier const weirdFormatting = { key : 'value' }

或者在整个文件中禁用：

/* eslint-disable prettier/prettier */

7.3 检查插件版本冲突

有时问题源于版本不兼容：

npm ls eslint-plugin-prettier npm ls eslint-config-prettier

确保这些关键依赖的版本是兼容的，特别是当项目使用较旧的ESLint版本时。

8. 个人实战经验总结

经过多个项目的实践，我发现最稳定的配置组合是：

1. 使用eslint-config-prettier禁用所有冲突规则
2. 将Prettier作为保存时的格式化器
3. 在项目根目录显式声明所有风格规则
4. 在团队文档中记录这些配置决策

一个常见的坑是：当项目同时存在.editorconfig和Prettier配置时，某些编辑器会优先读取.editorconfig中的缩进设置，导致格式化结果不一致。解决方法是在Prettier配置中明确设置tabWidth，并添加：

{ "editorconfig": false }

另一个实用技巧是：在IDEA的File Watchers中添加Prettier任务，配合onchange钩子，可以在文件修改时自动格式化，而不必等到保存。