prettier-plugin-tailwindcss 不生效

374 阅读1分钟

背景:本地开发项目的时候,安装了prettier-plugin-tailwindcss插件,我想在保存代码的时候自动给taiwindcss进行类名排序,奈何怎么操作都不生效,照着文档把该配置的都配置了,咋都不生效。哈哈,其实写到这里都已经能意识到问题了。就是在保存的时候,没有进行类名排序。

怎么解决呢?

1、首先按照官方文档把配置加上 配置文档 1、可以通过package.json的key值【pretier】设置 2、.prettier文件、json文件/cjs文件等等。

prettier-plugin-tailwindcss插件主要和prettier格式化代码的时候面对tsilwindscss进行排序和优化,二者搭配一起使用,如果自己不设置自动保存的时候优化的话,是不生效的,这个就是编辑器设置的问题了。

解决方案 Prettier

如果你使用的是prettier插件,那么就参考它的配置。

1、确保安装了vs code扩展插件 Prettier -code formatter扩展

2、在vscode的设置中,确保"editor.defaultFormatter":"esbenp.prettier-vscode" 已开启。

3、检查 "editor.formatOnSave": true 是否开启。

如果你使用的是eslint扩展程序

image.png

1743045573683.jpg

1743045573683.jpg

1743045573683.jpg