记录一次使用 VS Code 的 Prettier 插件不起作用的情况

今天新建了一个新的项目，但在 VS Code 中使用 Prettier 对代码进行格式化时却没有任何反应。于是我打开了旧项目，打乱了一些代码，但此时的 Prettier 却是可以正常工作的。

我们使用快捷键 Ctrl + Shift + U 或点击左下角的 Infos 按钮，打开 Output 界面。在这个界面的右侧有一个菜单，选择 Prettier 选项后，可以看到带有 ERROR 字样的信息，这也就是为什么 VS Code 中的 Prettier 插件没有正常工作的原因。

如果在命令行中进入到项目的目录，使用 npx prettier --write .（使用 Prettier 格式化当前目录下的所有代码），也可以看到同样的信息，输出结果的格式会比在 VS Code 中看到的要好。

PS D:\newProject> npx exec prettier --write .
[error] Invalid configuration file `.eslintrc.js`: JSON Error in D:\newProject\.prettierrc.json:
[error]
[error] > 1 | ��{}
[error]     | ^
[error]   2 |
[error]
[error] Unexpected token "�" (0xFFFD) in JSON at position 0 while parsing "��{\u0000}\u0000\n\u0000"
[error]
[error] > 1 | ��{}
[error]     | ^
[error]   2 |
[error]

错误信息提示我们 .prettierrc.json 文件出现了问题，但当时的 .prettierrc.json 文件内容如下：

{}

文件只有一个空的 JSON 以及一个空行，为什么会导致 Prettier 报错呢？

因为这个文件是使用 Windows 的 PowerShell 运行 echo {}> .prettierrc.json 创建的，通过这种方式创建文件会与其他方式创建的文件会有有点不同（具体原因暂且未知，大概率是字符编码的问题），所以导致了这个问题的出现。

如果我们不使用 echo 命令配合 > 操作符，而改使用 ni prettierrc.json 命令或图形化的方式创建一个新的文件后再追加内容，则不会出现这个问题。