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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 文件内容如下:

1
{}

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

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

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

作者

PinkChampagne17

发布于

2022-01-01

更新于

2022-01-01

许可协议

 CC BY-NC-SA 4.0