告别恼人CRLF:从根源解析与修复ESLint/Prettier的Delete `␍`报错
1. 为什么会出现Delete␍报错当你第一次在VSCode里看到Delete␍eslint(prettier/prettier)这个红色波浪线报错时可能会一头雾水。这个看似神秘的错误其实源于一个历史悠久的换行符战争——不同操作系统对文本文件换行符的处理方式不同。Windows系统使用CRLF\r\n作为换行符而Linux/macOS则使用LF\n。当你在Windows上开发的项目被提交到Git仓库其他使用macOS的同事拉取代码后ESLint和Prettier就会因为检测到不一致的换行符而报错。我曾经在一个跨平台团队中因为这个看似小问题导致整个CI/CD流水线失败浪费了整整半天时间排查。更复杂的是现代前端开发工具链中的各个环节都可能影响换行符Git的自动换行符转换功能core.autocrlf编辑器的默认换行符设置ESLint和Prettier的endOfLine配置甚至SSH传输文件时也可能修改换行符2. 彻底解决方案从配置到协作规范2.1 项目级配置一劳永逸的基础设置首先在项目根目录创建.editorconfig文件这是最底层的换行符控制root true [*] charset utf-8 end_of_line lf indent_style space indent_size 2 trim_trailing_whitespace true insert_final_newline true接着配置Prettier创建或修改.prettierrc.jsmodule.exports { endOfLine: lf, // 强制使用LF换行符 // 其他Prettier配置... }对于ESLint确保你的.eslintrc.js正确扩展了Prettier配置module.exports { extends: [ plugin:prettier/recommended // 这行很关键 ], rules: { linebreak-style: [error, unix] // 强制Unix换行风格 } }2.2 Git配置团队协作的关键在项目根目录添加.gitattributes文件* textauto eollf这个配置会告诉Git将所有文件视为文本文件* textauto在检出时统一转换为LF换行符eollf每个团队成员还需要设置本地Git配置git config --global core.autocrlf input这个设置的含义是提交时CRLF转换为LF保证仓库统一检出时不转换保持开发者本地环境原始格式3. 编辑器配置最后一公里保障3.1 VSCode设置在项目或工作区的.vscode/settings.json中添加{ files.eol: \n, prettier.endOfLine: lf, eslint.enable: true, editor.codeActionsOnSave: { source.fixAll.eslint: true } }3.2 WebStorm/IntelliJ设置进入Preferences → Editor → Code Style将Line separator设置为Unix and macOS (\n)在ESLint设置中勾选Run eslint --fix on save4. 疑难排查与进阶技巧4.1 如何修复已存在的文件对于已有大量CRLF文件的项目可以运行以下命令批量转换# 查找所有包含CRLF的文件 find . -type f -not -path ./node_modules/* -not -path ./.git/* -exec grep -l $\r {} # 批量转换为LFMac/Linux find . -type f -not -path ./node_modules/* -not -path ./.git/* -exec dos2unix {} # Windows用户可以使用PowerShell Get-ChildItem -Recurse -File | ForEach-Object { (Get-Content $_.FullName -Raw).Replace(rn,n) | Set-Content $_.FullName -NoNewline }4.2 忽略特定文件类型有些二进制文件如PNG、PDF不应该被转换在.gitattributes中添加*.png binary *.pdf binary4.3 与Docker的兼容性问题如果在Docker容器中运行遇到换行符问题可以在Dockerfile中设置环境变量ENV SHELL/bin/bash ENV LANGC.UTF-8 ENV LC_ALLC.UTF-8挂载卷时添加一致性选项docker run -v $(pwd):/app:consistent ...5. 团队协作最佳实践在项目README.md中加入换行符规范说明## 开发环境规范 - 换行符: LF (Unix风格) - 字符编码: UTF-8 - 缩进: 2个空格非Tab 请确保 1. 已配置.gitattributes 2. 本地Git设置git config core.autocrlf input 3. 编辑器设置为LF换行符建议新成员入职时运行以下检查脚本#!/bin/bash echo 检查Git配置... git config core.autocrlf echo 检查当前文件换行符... find . -type f -not -path ./node_modules/* -not -path ./.git/* -exec file {} | grep CRLF echo 检查编辑器配置... cat .vscode/settings.json | grep eol对于大型老项目迁移建议分阶段进行先添加.editorconfig和.prettierrc然后添加.gitattributes最后批量转换历史文件在团队周会上同步变更确保所有人更新配置