- 进入插件市场,安装 Prettier 插件:工具 -> 插件安装 -> 安装新插件 -> 前往插件市场安装



- Prettier配置



module.exports = {
printWidth: 180,
tabWidth: 4,
useTabs: true,
semi: true,
singleQuote: false,
quoteProps: "as-needed",
jsxSingleQuote: false,
trailingComma: "none",
bracketSpacing: true,
bracketSameLine: true,
arrowParens: "avoid",
proseWrap: "preserve",
htmlWhitespaceSensitivity: "ignore",
vueIndentScriptAndStyle: true,
endOfLine: "lf",
embeddedLanguageFormatting: "auto",
singleAttributePerLine: false,
parsers: {
".nvue": "vue",
".ux": "vue"
}
}
- 设置保存时自动格式化

- 重启HbuilderX