无插件，简单配置prettier，将微信小程序的wxml和wxss当作html和css进行格式化

Skall.Wu

已于 2023-01-06 10:54:24 修改

阅读量5.4k

点赞数 6

文章标签：微信小程序编辑器代码规范

于 2022-07-12 16:28:32 首次发布

本文链接：https://blog.csdn.net/HoweeGoss/article/details/125744750

版权

适用范围

使用prettier的项目、安装了prettier扩展的vscode和微信开发者工具。

原理

prettier是根据默认的解析器对相应的文件进行处理，我们可以自定义什么格式的文件用什么解析器。具体看 documentSelectors。

配置

只列出有关的配置

编辑器的配置

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[wxml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[wxss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.documentSelectors": ["**/*.wxml", "**/*.wxss"]
}

设置wxml和wxss文件的默认格式化工具为prettier
配置prettier扩展选项documentSelectors，把wxml和wxss文件加入prettier的扫描范围里

.prettierrc的配置

{
  "overrides": [
    {
      "files": "*.wxml",
      "options": {
        "parser": "html"
      }
    },
    {
      "files": "*.wxss",
      "options": {
        "parser": "css"
      }
    }
  ]
}

为wxml和wxss指定要使用的解析器，保存后重启编辑器即可。

不足之处

不能格式化wxml的 {{}} 表达式内容。
若有格式化{{}}的需求，可以尝试使用插件：
https://github.com/wxmlfile/prettier-plugin-wxml
https://github.com/18640905576/plugin-wxml
可能会补充和eslint的集成