Pico Language Support
Syntax highlighting for Pico template files.
Snippets
Type these prefixes and press Tab to expand:
| Prefix |
Expands to |
{if |
{if condition}...{/if} |
{ife |
{if}...{else}...{/if} |
{ifeif |
{if}...{else if}...{else}...{/if} |
{for |
{for let item of items}...{/for} |
{expr |
{expression} |
<Comp |
<Component prop={value} /> |
<Compch |
<Component>...</Component> |
<= |
<="./path" /> (dynamic component) |
<style |
<style>...</style> |
<script |
<script>...</script> |
prop |
prop name = default; |
import |
import Component from "./file"; |
--- |
Full frontmatter block |
File Icons
The extension provides a custom Pico icon for .pico files:
| Icon Theme |
How it works |
| Seti (default) |
Native icon - works automatically |
| Minimal |
No icons (by design) |
| Material Icon Theme |
Auto-configured on first .pico file open (need to close and reopen VS Code) |
| vscode-icons |
Auto-configured on first .pico file open (need to close and reopen VS Code) |
Disable Auto-Configuration
To prevent the extension from adding Material Icon Theme or vscode-icons settings:
// settings.json
"pico.autoConfigureFileIcons": false
Manual Configuration (if needed)
Material Icon Theme:
"material-icon-theme.files.associations": {
"*.pico": "html"
}
Features
- Frontmatter (
---) with imports, props, and let declarations
- Control flow:
{if}, {else if}, {else}, {/if}, {for}, {/for}
- Expressions:
{variableName}, {expression}
- Components:
<ComponentName /> (PascalCase = component)
- Dynamic components:
<="./path.html" />, <='{variable}' />
- Embedded CSS in
<style> tags
- Embedded JavaScript in
<script> tags
- HTML base syntax
File Extensions
The extension recognizes:
.pico files.pico.html files
Example
---
import Header from "./header.html";
import Card from "./card.html";
prop title;
prop items = [];
let count = items.length;
---
<Header {title} />
{if count > 0}
{for let item of items}
<Card title={item.name} />
{/for}
{else}
<p>No items found</p>
{/if}
<style>
p { color: gray; }
</style>
What is Pico?
Pico is a pure-Go, component-based templating system with:
- Scoped CSS
- JavaScript expressions
- Control flow logic
- Component composition
- Client-side reactivity via Pattr
- Pico - The templating engine
- pico-tests - Example templates
- Pattr - Client-side reactivity
- Plenti - Static site generator using Pico
| |
