如何将vscode调教成IntelliJ IDEA风格的编辑器

发表于 |

前言

最近项目需要使用到vscode, 对于习惯了Android Studio的我来说, 突然切换开发工具一时间有点难以适应, 主要还是IntelliJIDEA的编辑器太香了

之前本来想将Android Studio武装成兼容各种语言的开发神器, 无奈很多插件不兼容, 只能暂时作罢

所以 只能先凑合着用vscode先, 所谓工欲善其事必先利其器, 为了快速进入开发状态, 首先需要将vscode编辑器的风格设置成尽量接近Android Studio

vscode配置剖析

vscode配置主要分为四大块, 每一块的配置都对应一个json文件:

  • 基础设置: 使用setting.json, 主要包含一些编辑器的偏好设置
  • 键盘快捷键设置: 使用keybindings.json
  • 扩展设置: 使用extension.json
  • UI状态设置: 使用globalState.json, 主要包含一些全局UI状态的设置

对vscode进行改造

第一步 对快捷键进行改造

  1. 安装插件IntelliJ IDEA Keybindings

    image-20230421141517074

    我们会发现 这个插件附带了一个通过xml文件快速导入的功能, 接下来我们需要用它

  2. 将Android Studio的配置进行导出

    熟悉IDEA系编辑器的小伙伴应该都知道如何导出配置文件, 这里不过多解释, 直接上图:

    image-20230421141800980

    导出的配置文件是一个zip压缩包, 我们将其解压, 下一步我们会用到里面keymap目录下的xml文件

    image-20230421142945748

  3. 将Android Studio导出的快键键配置文件进行格式转换

    我们按住ctrl+shift+p打开动作指令面板, 然后输入Import IntelliJ Keybindings执行该动作:

    image-20230421142142565

    image-20230421142310878

    image-20230421142347063

    这里可以选择对导入的xml文件中的快捷键进行平台转换,

    由于我的AndroidStudio的配置文件是windows平台导出的, 而我目前使用的是Mac平台,我想继续保持windows的快捷键习惯, 也就是依然使用ctrl而不是cmd

    所以这里我选择了Windows to Windows

    导入xml文件后, 会自动生成已经转换成json格式的快捷键配置:

    image-20230421143240522

  4. 将转换好的配置导入到vscode中

    我们只需要将里面的内容拷贝至vscode的keybindings.json文件中然后保存即可:

    image-20230421143526782

此时, 我们的快捷键就基本改造完毕了, 现在只需双击shift就能打开动作指令面板, 和Android Studio一致, 满意😊

第二步 对vscode外观进行改造

这一步, 具体改造因人而异, 毕竟每个人的需求和审美不同, 大家只需要了解如何修改即可

这里主要是对setting.json文件进行修改,简单说一下我的配置:

  1. 编辑器字体大小调整

    首先vscode默认的外观给我的第一印象就是字太小了, 看着特别费眼

    那么我们进入设置面板, 输入字体, 然后找到setting中编辑字样点击它可以打开setting.json文件:

    image-20230421145930537

    在里面我输入editor.fontSize": 14.5, 将代码字体大小调整成14.5:

    image-20230421150213399

    同理, 如果需要修改字体风格则输入editor.fontFamily

    image-20230421150846461

    以此类推, 所有配置属性都有代码提示, 操作起来也很方便

  2. 工作台字体大小调整

    我们会发现, 通过setting.json我们可以调整编辑器的字体大小, 但是工作台的字体没有提供相关属性配置, 只能通过快捷键cmd+=来进行缩放调整, 如果快捷键无法使用那就使用动作指令面板通过关键字 放大 或者Zoom进行搜索调用

    记住一点 有问题先尝试在动作指令面板中搜一下

  3. 工作目录图标修改

    接下来我们需要调整一下工作目录的图标, 先来看一下vscode默认的目录树长啥样:

    image-20230425101510482

    是不是立马让人感到崩溃, 哪个文件在哪个包下面, 估计得费劲辨别半天

    这个要改的话, 需要在安装图标插件, 我们直接在插件市场搜索关键字icon就行, 可以找到很多:

    image-20230425102237084

    每个都尝试一下, 选一种自己喜欢的就行

  4. 颜色主题选择

    最后我们对编辑器整体的配色进行调整, 可以直接选择现成的主题, 直接在插件市场搜索即可:

    image-20230425100404555

由于个人习惯, 最后我直接选择了JetBrains风格的主题和图标样式:

image-20230425105302696

调整后我的编辑器样子如下:

image-20230425105836206

配置的同步功能

官方自带云端同步

目前vscode编辑器自带了配置同步功能, 实现多端配置同步, 非常方便, 只需要在编辑器左下角进行登录, 然后打开同步功能即可:

image-20230421151643311

这里支持Github或者微软账号登录

云端同步历史恢复

当我们不小心将编辑器还原出厂设置了, 由于我们开启了自动同步功能, 此时所有配置已经同步到了云端, 旧的配置直接被覆盖了, 那么我们想恢复之前的配置该怎么办呢?

不用担心

首先我们打开命令窗口显示已同步的数据记录:

image-20230421154920449

image-20230421155009736

然后选择对应时间下的历史配置文件, 将里面的内容拷贝至我们的当下的配置文件中即可:

image-20230421155426436

手动拷贝有些繁琐, 不过我相信未来官方能实现一键恢复功能

除此之外 我们还可以通过资源管理器的时间线进行文件内容的快速恢复, 不过这种方案仅支持短期时间的恢复, 如果要恢复几个月甚至一年前的配置, 那么只能使用云端同步方案了:

image-20230421171831669

配置文件导出本地

如果你对于这种云端配置同步不是太放心, 还可以将配置文件导出到本地进行存储:

image-20230421152109250

官方默认支持导出到Git和本地

配置文件同步到自己的云端

如果你有更多的同步需求, 比如同步到云盘, 那么我推荐你安装Sync Settings这个插件, 它支持本地、本地Git仓库、远程Git仓库、服务器rsync甚至Webdav:

image-20230421152755860

具体使用方法:

  1. 对仓库进行配置

    动作面板输入:

    1
    Sync Settings: Open the repository settings

  2. 将配置文件上传同步至仓库:

    动作面板输入:

    1
    Sync Settings: Download (repository -> user)

  3. 从仓库中同步配置文件到vscode:

    动作面板输入:

    1
    Sync Settings: Download (repository -> user)

如果你觉得手动同步太累人, 还可以配合cron-tasks插件开启定时任务, 实现配置文件的自动同步功能

问题汇总

关于回车快捷键无法设置的问题

由于两个编辑器的差异性存在, 导致部分快捷键和预想中的不太一致, 此时我们需要手动修改, 这里我需要将acceptAlternativeSelectedSuggestion的快捷键设置为回车, 另外将acceptSelectedSuggestion的快捷键改为tab, 在设置的过程中, 我发现回车无法设置, 这应该是个编辑器bug, 好在可以直接修改json文件:

image-20230421170505429

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%