如何阻止prettier格式化的时候把jsx里的class转换成className

我在vue里面用jsx,用的@vitejs/plugin-vue-jsx插件,但是用prettier进行代码格式化的时候,它会把class转换成className,这样样式就不生效了,有没有办法忽略转换?要咋个配置呀?

比如

用prettier格式化之后会变成

我希望全局配置禁止 prettier 格式化的时候进行转换,请问需要怎么配置

你可以在你的项目中添加一个 .prettierrc 文件,在其中添加 "jsxBracketSameLine": true 这一配置项。这样Prettier就不会在JSX中把class转换成className了。

例如:

{
  "jsxBracketSameLine": true,
  "semi": false,
  "singleQuote": true
}

还有其他的解决方法,比如使用一些第三方插件如 babel-plugin-jsx-control-statements 或者 babel-plugin-jsx-ignore 这些插件可以让你在jsx中使用class而不是className

你可以在项目中安装这些插件并且在.babelrc中配置使用它们。

例如:

{
  "plugins": ["babel-plugin-jsx-control-statements"]
}

希望这能帮到你!