WebStorm 微信小程序代码提示 + Prettier 代码格式化

代码提示

目前用的是：Wechat mini program support

实测提示效果还不错。

Prettier

直接调用 WebStorm 自带的 Prettier 去格式化 wxml / wxss / wxs 文件会提示：

File xxx has unsupported type

猜想 Prettier 应该提供任意文件映射为任意已支持的文件类型的格式化配置。查阅官方文档后果然有：Setting the parser option。于是在项目的 package.json 的 prettier 字段中写入如下配置（你也可以使用你喜欢的配置文件形式）：

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

于是在某个小程序文件中再次尝试调用 WebStorm 自带的 Prettier，发现依然是那个错误提示，重启也无果。又试了下手动在命令行里敲：

npx prettier xx --write

成功！于是问题肯定是出在 WebStorm 上了，一番调研后发现了一个两年前提交的 issue：

Prettier: support “overrides” option on code styles import

看起来短期内指望官方修复无望了。。。于是又想既然手动命令行可以，那可不可以利用 WebStorm 的 Tool 系统再配置个快捷键去执行手动命令？这样体验就和用自带的一致了！

废话不说，直接上步骤：

1. 全局安装 Prettier，这样方便跨项目复用
2. Preferences - Tools - External Tools
3. 点击当前窗口左下角 + 号
4. Name、Description 自己起一个吧
5. Program 里填写：Prettier 安装位置/bin-prettier.js
6. Arguments 里填写：**$FilePath$ –write**
7. Working directory 不用管，ok、apply 双连保存配置

以上步骤完成之后你就可以通过顶部菜单：Tools - External Tools - 你起的 Tool Name 来格式化当前的小程序文件了。再说说快捷键的配置步骤：

1. Preferences - Keymap
2. 当前窗口右上角搜索你创建的 Tool Name
3. 在搜索结果里选中它 Add Keyboard Shortcut 吧！