JetBrains插件制作------主题(一)
看到JetBrains插件市场里各种形形色色的主题,就想着自己要不要也做一个玩玩,抱着这样的想法,我找到JetBrains里面的插件教程,打算整一个
1. 类型选择
IntelliJ Platform SDK | IntelliJ Platform Plugin SDK (jetbrains.com)
在插件开发的平台上提供了一些选择,这次先选择开发一个主题类型的插件吧

2. 自定义支持
主题开发起步(https://plugins.jetbrains.com/docs/intellij/themes-getting-started.html)

以上是JetBrains平台提供自定义支持的UI范畴
- 替换图标
- 更改UI控件的图标以及颜色
- 更改UI控件的内外描边
- 提供自定义的编辑器属性表
- 添加背景图片
3. 开发准备工作
可以使用 IntelliJ IDEA Community Edition 或 IntelliJ IDEA Ultimate 作为 IDE 来开发主题(尽可能选择新版)
两者都包括开发主题插件所需的一整套开发工具
主题是插件类型之一,其结构与扩展 IDE 行为的插件没有显著区别,可以使用以下受支持的方法之一实现:DevKit 或 Gradle
-
基于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. 搭建开发环境

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

我这边使用的是2023.2.4的版本

可以看到,Plugin DevKit
这个插件已经捆绑下载了
完成这一步之后,还需要配置IntelliJ平台插件SDK
首先,需要配置JDK

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

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

这里你可以配置对应的JDK版本,因为我已经安装过JDK了,因此直接从目录中进行选择就可以了,这里勾选的是JDK17的版本,然后点击Apply
完成了上一步JDK的配置,我们还需要IntelliJ Platform Plugin SDK
同样地,还是在刚刚的弹框中,这次我们需要选择Add IntelliJ Platform Plugin SDK...

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


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

到这里,环境应该已经配置完毕了
4.2. 创建一个主题项目
现在就像创建其他项目一样,直接创建项目,发现这里出现了一个新的模板------IDE Plugin ,我们指定路径、项目名、并且指定Theme类型

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

简单介绍一下其中的文件:
-
META-INF目录下:
plugin.xml
:包含一些预置主题内容的配置文件pluginIcon.svg
:插件的icon,一般会自定义替换
-
theme目录下:
my_theme.theme.json
:最小化的主题描述文件
后续如果还有复杂些主题内容可能会有变化,暂时先按照简单的来
4.3. 运行并调试
现在问题来了,主题的效果要怎么看呢?
这就需要添加运行的配置,选择Edit Configurations...

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

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

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


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

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

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