Set up the Fragment UI extension in VS Code.
The Fragment UI VS Code Extension enhances your development workflow by providing intelligent autocomplete, hover documentation, code snippets, and quick actions for Fragment UI components. It helps you write code faster and with fewer errors by providing context-aware suggestions and documentation directly in your editor.
cd packages/vscode-extension
pnpm install
pnpm build
pnpm package
# Install the .vsix file
code --install-extension fragment-ui-*.vsixThis extension is not guaranteed to be published yet. If/when it is available, the extension id will be:
code --install-extension fragment-ui.fragment-uiGet intelligent autocomplete suggestions when typing Fragment UI component names:
import { Bu| // Type "Bu" and see Button suggestion
import { Button } from "@fragment_ui/ui";Hover over any Fragment UI component to see its documentation, props, and usage examples:
<Button variant="solid" size="sm">
Click me
</Button>
// Hover over "Button" to see documentationUse pre-built snippets for common components:
// Type "fui-button" and press Tab
<Button variant="solid" size="md">
Button
</Button>Use Command Palette (Cmd+Shift+P / Ctrl+Shift+P) to access quick actions:
Configure the extension in VS Code settings:
{
"fragment-ui.docsUrl": "http://localhost:3001",
"fragment-ui.storybookUrl": "http://localhost:6006"
}