代码提示

目前用的是:Wechat mini program support

实测提示效果还不错。

Prettier

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

File xxx has unsupported type

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
"prettier": {
"overrides": [
{
"files": "*.wxml",
"options": {
"parser": "html"
}
},
{
"files": "*.wxss",
"options": {
"parser": "css"
}
},
{
"files": "*.wxs",
"options": {
"parser": "babel"
}
}
]
}
}

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

1
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 不用管,okapply 双连保存配置

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

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

 评论