vscode+prettier插件不能格式化vue3代码

2,891 阅读2分钟

我正在参加「掘金·启航计划」

0 环境

  • 编辑器:pycharm或者vscode
  • 系统版本:windows10
  • python版本:3.9.6

1 参考文章

Why does Prettier not format code in VS Code?

prettier-vscode is not using my project's configuration or prettier version

Vetur文档

prettier文档

unable-to-set-tab-width-to-4-in-prettier

2 问题

比如我格式化后,是2个空格,而我vscode下面显示的是4个空格,就挺奇怪的。说回我的需求,对于我来说2个空格更好看些,只是那坨颜色提示太碍眼了,我的目的是去掉颜色即可。

image.png

3 解决

1 别人的思路

鉴于github等不太稳定(你懂的),我直接上图了。如下:

不喜欢下图这种方式,可以直接这样查找File > Preferences > Settings > Search for "default formatter" 或者快捷方式ctrl+,image.png

输入default formatter,别忘了选择为Prexxx和勾选下面那几个。 image.png

输入Format On Save,选择2项。保存设置即可。 image.png

但是这样搞完了,我格式化代码,会跳到插件商城里(category:formatters vue),根据喜好自行选择。在插件商城上下载后,是可以了。 image.png

但是本着探索的心态,又找了找已安装的vue插件,发现了vetur插件,仔细看了文档,试用了vetur.format.enable,我把它改成4可以不。结果是不行的。网上看了一圈基本上讲的是在自己创建的加这些插件相关的配置。 image.png

image.png

2 自用的方法

最后看了一圈,找到了一篇博客,这个国外小姐姐写的比较nice,讲了她遇到类似的问题,并且试了一圈,发现卸载重装prettier,就可以了,我试了一下确实好用了。还有一种方式就是将空格设置为2,也是可以解决这个格式化的问题的。

3 总结

在使用prettier插件格式化的时候,先要确定prettier正常使用,可以看vsocde的底部,我的prettier大概在右下角那个位置,假如是叉号,可以根据上面的方法试一下或者看参考文章,里面有,假如是对勾的话,点进去,看每次格式化后的记录,里面有具体的参数,比如"tabWidth": 4,"useTabs": true,而我这里的是"tabWidth": 2,说明插件默认配置需要修改为4即可,别忘了"useTabs": false,也要设为true,就是要激活一下的,看文档会发现正常推荐在项目中添加.prettierrc配置文件,对于我们这种懒人来说,能一次完成,绝对不多次,哪怕仅仅需要复制粘贴也不行,一种方式,卸载重装看看是否生效,我是喜欢2个空格的,所以没毛病的,另一种方式,针对喜欢4个空格的,在设置里搜索Use Tabs,修改空格数并且一定要激活Tabs,可以找到上面的unable-to-set-tab-width-to-4-in-prettier那篇文章。