探究项目中的【lf】与【crlf】的冲突原因

440 阅读1分钟

起因

最近承接了兄弟部门的项目,因为两个部门使用的开发机分别为windows与mac, 导致在项目运行时出现如下场景:

image.png

开发人员并没有修改代码,却有大量的pending change,导致每次都要先checkout . ,导致非常不便。

排查过程

  1. 首先定位这些change代码改动, 对比更改前后的代码,发现如下差异:

改动前:

image.png

改动后:

image.png

最终确认,是所有文件的换行符,从CRLF(\r\n)变成LF了(\n)

  1. 为什么会发生变化呢?

为什么vscode会自动更改文件?

首先看看vue-cli-service lint的官网说明

image.png

简单来说就是会通过.eslintrc校验.js文件,并且通过eslint-plugin-prettier进行代码格式修改。

最终在.editorconfig找到end-of-line配置

image.png

但是我不理解为什么lint的时候会执行editorConfig格式过滤!!

也就是说vscode根据editorConfig的规则修改了end-of-line标识。但是还有一个问题:

为什么远程仓库中是lf,windows拉取的代码是crlf?

这时候就可以看到git对end-of-line的兼容配置: core.autocrlf

image.png 翻译一下:

标题
true(windows推荐)git会将远程仓库中的lf在工作区转化成crlf,在提交将crlf时转成lf
inputgit在远程仓库原有的回车字符导入工作区,在提交时将crlf转成lf
falsewindows转为crlf,mac转为lf,对于仅使用windows开发的项目可以使用这个配置

image.png 所以就懂了,虽然远程仓库里的回车存的是lf,但是因为autocrlf配置,在工作区被转为crlf,又被editorConfig转为lf,所以造成了大量的pending change.

参考文档