webStorm APICloud代码提示插件编写

用户根据本文档可以学习编写自定义语法提示文件

文件名

  1. filename.jar

注意事项:

  1. 理论上文件名随意,但是尽量和插件内容的保持一致,做到见名知意
  2. 文件格式必须是 jar

可以新建自己的插件,把自己的提示文件都放在该插件下,插件名可以使用自己的前缀,以和官方片段区别开

文件结构

图片说明

光标位置

  1. $offset$

$符号中间是该位置的默认输入

触发输入

图片说明

Abbreviation 输入框中的内容就是触发该代码片段的指令,格式为: 模块名.方法名

所以使用的时候只要记得当前模块名和方法名,即可补全对应的代码

snippet tabTrigger

片段描述

图片说明

在补全的时候会有弹出框,显示在右边的信息就是该代码片段的描述

图片说明

示例

以下演示如何编写一个 fs 模块的 rename 接口的步骤

1. 找到该接口的文档

fs 模块 rename 接口

2. 找到该接口的示例代码

  1. fs.rename({
  2. oldPath: 'fs://a.txt',
  3. newPath: 'fs://b.txt'
  4. },function(ret,err){
  5. var status = ret.status;
  6. if (status) {
  7. api.alert({msg:'重命名文件成功'});
  8. }else {
  9. api.alert({msg:err.msg});
  10. }
  11. });

3. 编写插件步骤分解

打开File --> Settingsmac是找到Preference

图片说明

点击进入Settings页面,选择Editor --> Live Templates 右侧出现的就是本地已安装的插件,新建插件组点击'+',选择Template Group....点击,为新建的插件组命名。

图片说明

图片说明

选中新建的插件组apicloud-module-fs,点击'+',选择Live Template编写新的插件。

图片说明

依图填写相应内容:Abbreviation是插件提示关键字,Description是相应的描述,Template text是生成的代码片段,相对的变量用$$包括,Edit variables是插件代码中的变量映射关系,Change是选择代码提示的作用域,这里我们选择的是JavaScriptOptions默认选项也要进行相应勾选。

图片说明

图片说明

如图fs.rename是有变量的,需点击Edit variables对变量进行配置,在这里我们选择的是snakeCase()函数,他的参数是字符串类型的,对应代码片段中的参数值。

图片说明

图片说明

注意:

  • snakeCase(“argu”) 参数如果是驼峰写法 大写自动转成小写,并在前面加下划线。
  • 参数不要出现特殊字符,(比如数字、标点和汉字的组合 )都会将两种类型字符用下划线(_)自动分割 。
  • 颜色的16位值因为有特殊字符,建议就使用color来代替 snakeCase(“color”) 。
  • 这个函数的参数值必须是字符串 ,如果是数字类型的,例子snakeCase(“123”) 。

4. 插件导出

打开File --> Export Settings,在弹出的对话框中选择Live templates即可。

图片说明

图片说明