1.简介

在写代码时，如果使用 VSCode和Hbuilder 编辑同一个项目代码, 那么它们两个编辑器的格式化风格不是统一的，所以就会把代码格式化成一团槽。

文章目录

而使用 Prettier 则可以解决这个问题，该工具可以自定义代码风格，并且支持多种主流格式文件，同时在 VSCode与Hbuilder 中都有该插件。

2.使用方法

在Vscode中，安装 Prettier - Code formatter。在Hbuilder中也同样需要安装Prettier插件(需要注意的是对Hbuilder版本有要求)。

然后项目根目录中新建一个 .prettierrc.json 配置文件，该文件可以配置格式化的代码风格。

prettier官网 支持在线可视化设置格式化风格，底部菜单栏的 Copy config Json 可以将你的格式化风格配置进行复制，然后粘贴到你的配置文件中去即可。

下面这段配置是我自己常用的格式化风格。

{
    "arrowParens": "always",
    "bracketSameLine": false,
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": false,
    "tabWidth": 1,
    "trailingComma": "es5",
    "useTabs": true,
    "vueIndentScriptAndStyle": false,
    "printWidth": 140
}