3

I'm using Prettier In my TypeScript project. I format all files on save in Visual Studio Code. I also configured a pre-commit git hook with Husky which checks the formatting of all files.

This is how my pre-commit hook file looks like:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

cd ./MyApp/ClientApp

npx prettier --check .

Now comes the fun part. I work with files in MyApp/ClientApp directory with VS Code, which does all the formatting on save. So far so good.

However, when I'm trying to make a commit, Prettier pre-commit hook gets executed and I get the following error:

git commit
Checking formatting...
[warn] src\dataTypes\numeratorObjectType.ts
[warn] src\viewModels\numeratorViewModel.ts
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
husky - pre-commit hook exited with code 1 (error)

If I open these files in VS Code and save them, nothing happens as they have already been formatted.

So I execute Prettier manually by running the following command in MyApp/ClientApp directory:

npx prettier --write .

This command outputs all the files, with the two problematic ones apparently reformatted:

enter image description here

I also see these files changed in git. However, git diff shows nothing. When I execute git add ., I'm getting the following warning:

The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF

Which means these files only had issues with line endings. According to this thread, I set the following config parameters in my git repository:

git config core.autocrlf true
git config core.safecrlf false

It seems to make the warning with CRLF disappear when doing git add, but it still doesn't solve the issue with Prettier. It still shows code style issues, even though there are no real differences/styling issues in the files.

I'm on Windows, as that might be important I guess.

Any idea what can be wrong here? Currently, checking Prettier formatting on pre-commit hook makes no sense.

Dawid Sibiński
  • 1,657
  • 3
  • 21
  • 40
  • Do you have **multiple formatters** installed? For example the *beautify* plugin in VS Code? Because it might interfere with prettier. Otherwise try running `yarn prettier path/to/file.js` to check the output of the prettier. – eDonkey Jan 18 '22 at 07:21
  • It seems likely that the code formatter you ran switched the line endings from LF-only to CRLF or vice versa. Because you're *also* having *Git* switch line endings, the two programs are competing for how the files are stored in your working tree. But Git doesn't *use* the working tree copy, except to produce the index copy when running `git add`; Git produces the index copy during `git add` by doing the line-ending editing that you called for. The working tree copy is not changed in the process, but Git warns you that a future `git checkout` would be different. – torek Jan 18 '22 at 21:29
  • In particular, your working tree files are *yours* to do with as you will, but when you use `git checkout` or `git switch`, you're asking that *Git* should *replace* your existing working tree files with those from the commit you have asked Git to check out. If you're also having Git do line-ending mucking-about, that might mean *replace LF-only line endings as stored in the repository with CRLF line endings in my working tree copy*. If your prettifier *took out* CRLFs, this puts them back (later, not now!). – torek Jan 18 '22 at 21:30
  • Thanks guys. It seems I found a solution, assuming all developers are on Windows. I configured git with `git config core.autocrlf false` (so it doesn't do the CRLF -> LF conversion). I also set `endOfLine` to `crlf` in Prettier's configuration file. For now it seems all is good. I will test it more and post an an answer here if it works ;) The only annoying thing is that now git adds `^M` character in the end of every line, but that's not a big deal. – Dawid Sibiński Jan 19 '22 at 03:02

1 Answers1

1

After digging the issue more and thanks to comments from @eDonkey and @torek, I found a solution. I tested it for 2 days and it seems to work.

Please note, that this solution probably works for a project with Windows-only developers. If all of you are on Mac/Linux, you'd probably want to use LF instead of CRLF. If the team is mixed, I'm not sure there's a perfect solution here.

First, configure git to not do CRLF -> LF conversion:

git config core.autocrlf false

Next, configure Prettier to use CRLF as the end of line character. You can do it by adding the following setting into Prettier's config file:

"endOfLine": "crlf"

If some of your files have already had the LF line endings, you might need to convert them to CRLF. It's enough to use npx prettier --write . for that.

The only thing I noticed is that git now adds ^M character at the end of each line:

enter image description here

But it's not an issue for me.

Dawid Sibiński
  • 1,657
  • 3
  • 21
  • 40