Vue中格式化插件导致样式不生效坑（prettier、vetur）

问题

Vue中使用格式化插件导致行内样式属性被修改问题

原因

行内样式使用了小驼峰属性，格式化的时候被修改成了小写，导致样式不生效

<div style='marginBottom:2px'></div>
// 格式化之后变成这样了
<div style='marginbottom:2px'></div>

建议

• 如果使用小驼峰的形式可以如下编写

<div :style="{marginBottom: '10px'}"></div>

• 或者短横线的css规范编写

<div style="margin-bottom: 10px;"></div>

提示

如果有类似 postcss-pxtorem 这种插件，而项目中有些字体大小不需要转 rem 而使用了 Px 的形式，此处使用格式化插件也会被格式化成 px 的形式。