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

使用前

使用后

# 2. 安装Prettier - Code formatter ## 找到扩展

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

## 设置需要格式化的文件

把这些都添加进去 `**/*.wxml` `**/*.wxss` `**/*.wxs` ## 在项目根目录下添加名称为`.prettierrc`的文件，内容如下 ```js { "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，这样就切换成功了。

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