1. 前言

微信开发者工具的代码格式化真的一言难尽，密密麻麻的，代码全部挤在一行里面，再加上预览窗口，目录，写代码的空间没多大了，本来一行代码被揉成几行，难看的很。

使用前

使用后

2. 安装Prettier - Code formatter

找到扩展

搜索Prettier - Code formatter 安装，安装好后如下图

设置需要格式化的文件

把这些都添加进去 **/*.wxml **/*.wxss **/*.wxs

在项目根目录下添加名称为.prettierrc的文件，内容如下

{
    "tabWidth": 4,
    "formatOnSave": true,
    "bracketSameLine": true,
    "overrides": [
        {
            "files": "*.wxml",
            "options": { "parser": "html" }
        },
        {
            "files": "*.wxss",
            "options": { "parser": "css" }
        },
        {
            "files": "*.wxs",
            "options": { "parser": "babel" }
        }
    ]
}

3. 使用

在wxml文件里，右键选中 “格式化文档，方法是使用..."，在弹出窗口中，点击选中Prettier - Code formatter，这样就切换成功了。

如果无效，可能需要重启开发者工具试试。