文章目錄

• 自定義編輯器代碼顏色
• 自定義代碼顏色輔助功能
• 文件圖標

自定義編輯器代碼顏色

自定義編輯器代碼顏色功能，僅適用于HBuilderX 3.1.19+版本；

• 支持自定義哪些代碼區域？

自定義代碼顏色支持 注釋、字符串、關鍵字、變量、標簽 等所有代碼分區(token)顏色。

目前支持的語言包括：JavaScript(ES6+)、HTML(ES6+)、Vue、CSS、Less、SCSS、Stylus、Typescript、Markdown、JSON。

• 如何自定義

在文件setting.json的源碼視圖中，通過定義 “editor.tokenColorCustomizations” 字段來自定義您喜歡的主題顏色。將可自定義代碼顏色的相關參數中配置的規則復制到對應主題（[Default]、[Monokai]、[Atom One Dark]）的rules節點下，更改對應顏色即可。

注意：此方式相對比較復雜，適合對代碼分區規則比較熟悉的同學，我們建議您采用下面提供的輔助功能進行自定義。

示例如下：

"editor.tokenColorCustomizations": {"[Default]": {//綠柔"rules":[{"scope": "comment","settings": {"fontStyle": "italic","foreground": "#248C85"}}]},"[Monokai]": {//酷黑"rules":[//...]},"[Atom One Dark]": {//雅藍"rules":[//...]} }

完整的代碼顏色列表參考：可自定義代碼顏色的相關參數

自定義代碼顏色輔助功能

為了簡化自定義步驟，我們提供了以下步驟可以簡便的自定義代碼顏色：

在settings.json源碼視圖中加入"editor.tokenColorCustomizations"設置（必須執行該步驟才能看到后面步驟的菜單項）

將光標放到要改顏色的代碼位置，選擇菜單 工具-主題-Inspect Tokens And Colors 查看當前代碼著色信息

將上一步控制臺輸出的 Token Color Rule 內容拷貝到 settings.json的 “editor.tokenColorCustomizations” 對應位置（注意：要放到對應的主題下）

保存settings.json文件后即可看到修改后的效果

完整的操作動畫如下圖：

注意:

• 目前只能在現有的3個主題Default柔和、Monokai酷黑、Atom One Dark雅藍的基礎之上復寫，不能完全更新新主題。

文件圖標

菜單【工具】【項目管理器圖標主題】，可以調整文件圖標。

總結

以上是生活随笔為你收集整理的HBuilderX自定义编辑器代码颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。