大家知道 Android studio 是基于Intellij Idea 的二次开发, 再加上 Intellij Idea 本身的体验也是非常的棒, 所以Intellij Idea 越来越流行, 用户量越来越多. 用户体验很棒的原因之一就是支持安装丰富的插件.

Intellij 插件仓库里的插件数不胜数, 其中给我们的开发带来极大便利的也不计其数, 大家可以参考知乎上的这个回答,会发现很多 nice 的插件. 有什么好用的Android Studio的插件值得推荐?

那么如果在 Intellij 插件仓库里木有找到自己所需的插件, 这个时候我们就需要自己动动手来开发一个自己的插件啦.

譬如我就遇到了这样的问题, 需要自己来开发一个插件.

最近阿里巴巴的 Weex(A framework for building Mobile cross-platform UI) 如日中天, 一次开发, 三端通用的强大工程.

对 Weex 有一些了解的同学应该知道, Weex 的语法是比较偏前端的, 这里贴一小段 demo 大家感受一下

	<template>
	  <div class="container">
	    <div class="cell">
	        <image class="thumb" src="http://t.cn/RGE3AJt"></image>
	        <text class="title">JavaScript</text>
	    </div>
	  </div>
	</template>

	<style>
	  .cell { margin-top: 10; margin-left: 10; flex-direction: row; }
	  .thumb { width: 200; height: 200; }
	  .title { text-align: center; flex: 1; color: grey; font-size: 50; }
	</style>

对于我这样的前端小白来说, 很希望能够实时看到 Weex 页面的效果, 所以只好自己写了一款 WebStorm (Intellij 旗下的一款前端 IDE, 插件和 Intellij Idea通用) 的插件, 有兴趣的可以了解一下.

好了,下面进入正题, 来说说如何开发一个插件, 这次先给大家普及一下开发插件的基础知识.

1. 准备环境

具体环境安装我就不详细描述啦, 大家参考官方的指导链接即可, 推荐大家使用 Intellij Idea 进行开发, 毕竟是官方推荐的 IDE..

2. 创建工程

如图所示 按照此图一步一步的 Next 就能创建一个 Plugin 的工程了

3. 知识预习

工程创建完毕之后会在 resources/META-INF 里创建一个 plugin.xml 文件, 对 Android 开发比较熟悉的同学可以将它理解为AndroidManifest.xml, 里面定义了一些组件,事件等等需要注册的内容.

	<idea-plugin version="2">
<id>com.your.company.unique.plugin.id</id>
<name>Plugin display name here</name>
<version>1.0</version>
<vendor email="support@yourcompany.com" url="http://www.yourcompany.com">YourCompany</vendor>

<description><![CDATA[
Enter short description for your plugin here.<br>

<em>most HTML tags may be used</em>
]]></description>

<change-notes><![CDATA[
Add change notes here.<br>

<em>most HTML tags may be used</em>
]]>
</change-notes>

<!-- please see http://www.jetbrains.org/intellij/sdk/docs/basics/getting_started/build_number_ranges.html for description -->
<idea-version since-build="141.0"/>

<!-- please see http://www.jetbrains.org/intellij/sdk/docs/basics/getting_started/plugin_compatibility.html
on how to target different products -->

<!-- uncomment to enable plugin in all products
<depends>com.intellij.modules.lang</depends>
-->


<extensions defaultExtensionNs="com.intellij">
<!-- Add your extensions here -->
</extensions>

<actions>
<!-- Add your actions here -->
</actions>

<application-components>
<component>
<implementation-class>com.darin.test.PluginApplication</implementation-class>
</component>
</application-components>

<project-components>
<component>
<implementation-class>com.darin.test.PluginProject</implementation-class>
</component>
</project-components>

</idea-plugin>

在这里说明一下上面的 plugin.xml 代码里出现的几个名词

  • id 表示当前插件的 id 号, 这个和 Android 的包名类似
  • name 插件的名称
  • version 版本  
  • email 表示维护人的邮箱, 通过这个邮箱能够联系到你
  • description 这个是插件的描述, 会展示在插件下载界的
  • change-notes 修改说明, 这个也是会展示在插件下载界面的
  • idea-version 表示当前插件所支持的 Intellij Idea 的版本, 详细信息可以参照这个对应关系
  • extensions 这里一般放一些我们自己拓展的东西, 例如要新增语言支持的时候需要在这里注册语言类型的工厂之类的类,这个后面会详细讲到
  • actions 新增的 Action 需要在这里注册, 这个后面会详细讲到
  • application-componentsproject-components 是我后来加上去的,用来注册工程组建和项目组建的

4. 生命周期

插件里有三个可选的组建可以创建, 他们分别是Application level components,Project level components,Module level components.

  1. Application level components 是在 IDE 启动的时候被创建和初始化的.
  2. Project level components 对应的是 IDE 里的每个工程项目 (没有被打开的工程也是会可能会创建 Project 实例的).
  3. Module level components 对应的是 Project 里的每个 Module. 生命周期

需要注意的是, Application 级别的 initComponent 只会执行一次, ProjectModule 级别的 initDispose 函数会根据项目工程的变化而被多次调用

5. Action

一个插件一般是由某个操作来触发一些列的动作, Action 在这里就代表一个触发器, 可以被很多种方式触发, 这里举个简单的例子(在 Window 里创建一个 Menu, 点击之后弹出 Dialog 提示 HelloWorld)

  • 新建一个 Action, 可以直接通过 Intellij Idea 来新建, 如图所示 新建 Action 新建 ActionDetail
  • 新建完毕之后, 你会发现在 plugin.xml 里会新增一段代码, 这就表示刚刚新建 Action 已经成功注册
	 <actions>
<!-- Add your actions here -->
<action id="com.test.showhelloworld" class="com.darin.test.SayHelloWorld" text="SayHelloWorld" description="show hello world in message world">
<add-to-group group-id="WindowMenu" anchor="first"/>
</action>
</actions>
  • 同样会在 src 里新建一个 SayHelloWorld 的 java 类, 结构如下
	package com.darin.test;

import com.intellij.openapi.actionSystem.AnAction;
import com.intellij.openapi.actionSystem.AnActionEvent;
import com.intellij.openapi.ui.Messages;

/**
* Created by darin on 7/11/16.
*/

public class SayHelloWorld extends AnAction {

@Override
public void actionPerformed(AnActionEvent e) {
// TODO: insert action logic here
}
}

  • 运行程序,你会发现我们创建的 Menu 已经安静的躺在 Window 菜单里了, 但点击之后不会有任何效果. 新建 ActionDetail

  • 这时我们只需要在 actionPerformed 方法里加上我们想做的事情(弹出 HelloWorld的 dialog)就 OK 啦

	@Override
public void actionPerformed(AnActionEvent e) {
// TODO: insert action logic here
Messages.showMessageDialog("HelloWorld","WeexMessage",Messages.getErrorIcon());
}
  • 大家在手动运行一下看看效果吧

想必大家已经知道如何创建和开发一个简单的插件了

这里安利一下我最近开发的 Weex 实时渲染的插件,后面我会慢慢的深入讲解开发出这样一个插件需要掌握的知识,敬请关注~.