Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

替换 Monaco 内置的图标

Aperta
#105 5 commenti 2 reazioni 1 assegnatario Vedi su GitHub

@liuxy0551 ci sta già lavorando.

Dal 8/4/2025.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

new features

Why?

monaco-sql-languages 支持的 language 都是各种 SQL，与之对应的就会有许多符号/icon是SQL语言特有的，比如 database 、table 等，而monaco 内置并不支持这些符号/icon，目前自动补全项左侧的 icon 问题尤为明显：

image

方案概述

  1. 制作自动补全项对应的 iconfont
  2. 新增 css 文件，覆盖monaco 内置的字体图标

字体图标风格

与monaco/vscode 的字体图标风格保持一致 https://code.visualstudio.com/api/references/icons-in-labels#icon-listing
image

字体图标表

类型 icon name
keyword 关键字 symbol-keyword
Snippet 代码片段 symbol-snippet
catalog symbol-catalog
database/schema 数据库 symbol-database
table 表 symbol-table
view 视图 symbol-view
column 字段 symbol-column
function 函数 symbol-function
procedure 存储过程 symbol-procedure

SQL 补全项类型与 monaco 内置的 CompletionItemKind 映射表

自动补全项左侧会根据不同的自动补全项的 CompletionItemKind 属性显示不同的 icon，但是内置的类型并不能覆盖所有的 SQL 补全项类型，比如 table、database 等，所以需要一个类型映射

类型 CompletionItemKind
keyword 关键字 CompletionItemKind.Keyword
Snippet 代码片段 CompletionItemKind.Snippet
catalog CompletionItemKind.Folder
database/schema 数据库 CompletionItemKind.File
table 表 CompletionItemKind.Class
view 视图 CompletionItemKind.Interface
column 字段 CompletionItemKind.Field
function 函数 CompletionItemKind.Function
procedure 存储过程 CompletionItemKind.Constructor

同时，monaco-sql-languages 需要新增公开的辅助方法，用于将 dt-sql-parser 中的 实体类型（EntityContextType/ SyntaxContextType ）转换为 CompletionItemKind

import { SyntaxContextType } from 'dt-sql-parser';
import { languages } from 'monaco-editor/esm/vs/editor/editor.api';

export function toCompletionItemKind(type: SyntaxContextType): languages.CompletionItemKind {
        switch(type) {
		case SyntaxContextType.CATALOG:
			return languages.CompletionItemKind.Folder;
		case SyntaxContextType.DATABASE:
			return languages.CompletionItemKind.File;
		// ...
		default:
			 return languages.CompletionItemKind.Text;
	}
}

覆盖 icon 的 css 文件参考

每一种类型对应的icon 类名格式为： .codicon-${built-in-icon-name}

内置的 icon 名称看这里： https://code.visualstudio.com/api/references/icons-in-labels#icon-listing

自动补全项的icon名称都是以 symbol- 为前缀的

  .codicon-symbol-text:before {
      content: '\eb01';
  }
  .codicon-symbol-function:before {
      content: '\eb02';
  }
  .codicon-symbol-folder:before {
      content: '\eb03';
  }
  .codicon-symbol-field:before {
      content: '\eb04';
  }
Lingua principale
TypeScript
Stelle
295
Fork
50
Merge medio
1h 21m
PR unite (30g)
1

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di DTStack/monaco-sql-languages

Tutte le issue di DTStack/monaco-sql-languages

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.