JetBrains插件制作——主题(一)

2,173 阅读4分钟

JetBrains插件制作——主题(一)

看到JetBrains插件市场里各种形形色色的主题,就想着自己要不要也做一个玩玩,抱着这样的想法,我找到JetBrains里面的插件教程,打算整一个

1. 类型选择

IntelliJ Platform SDK | IntelliJ Platform Plugin SDK (jetbrains.com)

在插件开发的平台上提供了一些选择,这次先选择开发一个主题类型的插件吧

image-20231216224303543.png

2. 自定义支持

主题开发起步(https://plugins.jetbrains.com/docs/intellij/themes-getting-started.html)

image-20231216224624399.png

以上是JetBrains平台提供自定义支持的UI范畴

  • 替换图标
  • 更改UI控件的图标以及颜色
  • 更改UI控件的内外描边
  • 提供自定义的编辑器属性表
  • 添加背景图片

插件市场主题成品(https://plugins.jetbrains.com/search?tags=Theme)

3. 开发准备工作

可以使用 IntelliJ IDEA Community EditionIntelliJ IDEA Ultimate 作为 IDE 来开发主题(尽可能选择新版)

两者都包括开发主题插件所需的一整套开发工具

主题是插件类型之一,其结构与扩展 IDE 行为的插件没有显著区别,可以使用以下受支持的方法之一实现:DevKitGradle

  • 基于DevKit的主题项目

    使用 DevKit 开发主题插件是最简单的解决方案,不需要使用 Gradle 或类似构建工具的经验

    默认情况下,使用“New Project Wizard”创建 IDE 插件主题项目时,会生成 DevKit 项目结构

  • 基于Gradle的主题项目

    使用 Gradle 开发主题插件需要具有 Gradle 或类似构建工具的经验,它能够对某些部分开发进行自动化处理,例如使用主题插件版本和其他数据修补plugin.xml文件,以及在 CI 服务器上构建插件发行版并将其发布到 JetBrains Marketplace

4. 开始开发

从描述上来看,显然使用DevKit进行开发主题是比较容易上手的,那么我们就从简单的开始吧

DevKit开发主题(https://plugins.jetbrains.com/docs/intellij/developing-themes.html)

首先看一下使用DevKit进行主题项目开发的工作流

  • 搭建开发环境
  • 创建主题项目
  • 自定义主题
  • 构建并运行项目
  • 在IDE内部部署
  • 上传主题到插件市场

4.1. 搭建开发环境

image-20231216230957308.png

需要注意IDEA的版本,在2023.2的版本前的版本,DevKit插件都是和IDEA捆绑的,而使用2023.3以及更新的版本,需要手动去插件市场下载

image-20231216231143186.png

我这边使用的是2023.2.4的版本

image-20231216231252580.png

可以看到,Plugin DevKit这个插件已经捆绑下载了

完成这一步之后,还需要配置IntelliJ平台插件SDK

首先,需要配置JDK

image-20231216231845766.png

官方给了一些提示,使用的JDK版本取决于你的受众群体,那么考虑到目前自己用的IDE,我就选择JDK17

image-20231216232208832.png

进入File>Project Structure,并在弹框中选择Platform Settings>SDKs

image-20231216234449027.png

这里你可以配置对应的JDK版本,因为我已经安装过JDK了,因此直接从目录中进行选择就可以了,这里勾选的是JDK17的版本,然后点击Apply

完成了上一步JDK的配置,我们还需要IntelliJ Platform Plugin SDK

同样地,还是在刚刚的弹框中,这次我们需要选择Add IntelliJ Platform Plugin SDK...

image-20231216233303952.png

然后选择你的IDE安装目录(我的IDEA是Toolbox里装的),它会去关联JDK

image-20231216234653432.png

image-20231216234816119.png

确认后最后指定一下Sandbox Home的路径

image-20231216235158554.png

到这里,环境应该已经配置完毕了

4.2. 创建一个主题项目

现在就像创建其他项目一样,直接创建项目,发现这里出现了一个新的模板——IDE Plugin,我们指定路径、项目名、并且指定Theme类型

image-20231216235554198.png

以下便是项目创建完成后的项目目录

image-20231216235858272.png

简单介绍一下其中的文件:

  • META-INF目录下:

    • plugin.xml:包含一些预置主题内容的配置文件
    • pluginIcon.svg:插件的icon,一般会自定义替换
  • theme目录下:

    • my_theme.theme.json:最小化的主题描述文件

后续如果还有复杂些主题内容可能会有变化,暂时先按照简单的来

4.3. 运行并调试

现在问题来了,主题的效果要怎么看呢?

这就需要添加运行的配置,选择Edit Configurations...

image-20231217001219123.png

然后进去添加新的配置,选择Plugin类型

image-20231217001311539.png

需要给定一个名字,这里就给Run Theme吧,然后值得注意的是要确保指定的Use classpath of module选中的是我们当前的插件模块,也就是my_theme

image-20231217001435840.png

然后Apply

此时我们运行下看看会发生什么

image-20231217002021856.png

image-20231217003430380.png

此时会新打开一个IDEA,然后我们直接进去打开Settings

image-20231217002226590.png

可以看到我们的主题出现了,我们选中看一下效果

image-20231217002329049.png

哈哈,有一些预置样式,可以说是奇丑无比,有很大提升空间啊,之后开始分析并写一个自己的主题吧