prettier format vue的时候怎么设置超出printwidth换行,但是不一个属性一行
时间: 2024-11-27 16:11:52 浏览: 2
prettier自动格式化去换行的实现代码
5星 · 资源好评率100%
当你使用Prettier格式化Vue代码时,如果你想让代码在到达`printWidth`(即行宽)后换行,而不是每个属性单独占一行,你可以通过配置Prettier的规则来实现。在`.prettierrc.js` 或者 `prettier.config.json` 文件中添加如下配置:
```json
{
"printWidth": 200, // 设置你的最大行宽
"tabWidth": 2,
"arrowParens": "always",
"braceStyle": "collapse", // 避免每个属性独立换行,这里选择"end-of-line"或者"collapse"
"singleQuote": true, // 如果你喜欢单引号,可以保留此配置
"trailingComma": "none",
"vueIndentScriptAndStyle": 4, // 可能需要调整缩进,取决于你的风格
"parser": "vue" // 确保解析器针对Vue
}
```
在这个配置里,`braceStyle` 部分设置为 `"collapse"` 就会使得对象字面量尽可能紧凑,不会在每个属性后都换行。如果想让属性在最后一行之后换行,可以考虑将 `braceStyle` 设置为 `"end-of-line"`。
记得保存配置文件并重启Prettier,然后在编辑器中运行 `npm run prettier --write` 或者 `yarn prettier --write` 来应用新的格式化规则。
阅读全文