uiModule

MS Code Extension API

---

MS Code Extension API / core/extensionAPI/modules/uiModule

core/extensionAPI/modules/uiModule

Type Aliases

UIModule

UIModule = ReturnType<typeof createUIModule>

Defined in: core/extensionAPI/modules/uiModule.ts:82

Functions

createUIModule()

createUIModule(_extId): object

Defined in: core/extensionAPI/modules/uiModule.ts:12

Parameters

_extId

string

Returns

components

components: object

MS Code Native React Components. Allows extension developers to build custom views that perfectly match the IDE's theme and behavior.

components.Button

Button: FC<ButtonProps>

Standard MS Code Button. Supports variants and split-button layouts.

components.Collapsible

Collapsible: FC<CollapsibleProps>

Highly flexible Collapsible/Accordion component. *

Example

const { Collapsible } = mscode.ui.components;
* const MyCustomView = () => (
<Collapsible 
title="Advanced Options" 
actions={[{ id: 'add', icon: 'plus', onClick: () => {} }]}
>
<div>Inside content</div>
</Collapsible>
);

components.Icon

Icon: FC<IconProps>

Standard MS Code Icon component leveraging the Codicon library.

components.InputBox

InputBox: FC<InputBoxProps>

Native Input Box for text entry with optional inside-icons.

components.Modal

Modal: FC<ModalProps>

Native MS Code Modal component for building custom dialogs.

Example

const { Modal } = mscode.ui.components;
<Modal isOpen={open} title="Custom Form" onClose={() => setOpen(false)}>
<input type="text" />
</Modal>

components.RichText

RichText: FC<RichTextProps>

Native RichText component to render Markdown content (supports #setting# links).

Example

const { RichText } = mscode.ui.components;
* const content = "### Guide \n Click to configure: #editor.wordWrap#";
* <RichText 
text={content} 
onLinkClick={(settingId) => console.log('Open setting:', settingId)} 
/>

components.Select

Select: FC<SelectProps>

Native MS Code Select Dropdown.

Example

const { Select } = mscode.ui.components;
<Select options={[{label: 'A', value: 'a'}]} value={val} onChange={setVal} />