### Start Live Server Programmatically (TypeScript)
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
Starts the Five Server instance programmatically using a VS Code command. The server's configuration is determined by VS Code settings (prefixed with 'fiveServer.') and the 'fiveserver.config.js' file in the workspace root.
```typescript
vscode.commands.executeCommand('fiveServer.start');
```
--------------------------------
### Example HTML for Code Highlighting
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
An HTML file demonstrating the code highlighting feature. Elements being actively edited in the browser are highlighted, with an option to disable highlighting for specific elements by adding the 'H' attribute.
```html
My Page
Hello World
Currently editing this element
This element won't be highlighted
```
--------------------------------
### Five Server Configuration File Example
Source: https://github.com/yandeu/five-server-vscode/blob/main/README.md
This JavaScript configuration file (`fiveserver.config.js`) demonstrates how to enable and customize various features of Five Server. It allows control over features like highlighting, instant updates, remote logs, and CSS injection.
```javascript
// fiveserver.config.js
module.exports = {
highlight: true, // enable highlight feature
injectBody: true, // enable instant update
remoteLogs: true, // enable remoteLogs
remoteLogs: "yellow", // enable remoteLogs and use the color yellow
injectCss: false, // disable injecting css
navigate: true, // enable auto-navigation
};
```
--------------------------------
### Open Folder as Server Root (TypeScript)
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
Defines a function to open a selected folder as the server's root directory. This is useful for serving subdirectories as the main path. It checks if the selected item is a directory before starting the server.
```typescript
// Right-click folder → "Open with Five Server (root)"
const startServerRoot = async (uri: vscode.Uri) => {
const directoryPath = uri.fsPath;
const workspacePath = vscode.workspace.workspaceFolders?.[0].uri.fsPath;
if (workspacePath) {
const rootPath = directoryPath.replace(workspacePath, '').replace(/^\//, '');
const stat = await vscode.workspace.fs.stat(uri);
if (stat.type === vscode.FileType.Directory) {
await startServer(uri, { rootPath });
}
}
};
```
--------------------------------
### VS Code Settings Configuration (JSON)
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
Example JSON object demonstrating various configuration options for the Five Server extension available through VS Code settings. These settings allow customization of port, host, browser, features like body injection and highlighting, ignored files, and PHP settings.
```json
{
"fiveServer.port": 5500,
"fiveServer.host": "0.0.0.0",
"fiveServer.browser": ["chrome"],
"fiveServer.injectBody": true,
"fiveServer.highlight": true,
"fiveServer.navigate": true,
"fiveServer.ignore": ["node_modules", ".git"],
"fiveServer.openTerminal": false,
"fiveServer.php.executable": "/usr/bin/php",
"fiveServer.php.ini": "/etc/php.ini"
}
```
--------------------------------
### Open Specific File with Five Server (TypeScript)
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
Registers a command to open a specific file using the Five Server. This command can be triggered from the context menu when right-clicking a file. It starts the server with the specified file as the entry point.
```typescript
context.subscriptions.push(
vscode.commands.registerCommand('fiveServer.open', async (uri: vscode.Uri) => {
// Server starts and opens the specified file
await fiveServer.start({
...config,
open: uri.fsPath.replace(rootAbsolute, ''),
root,
workspace,
});
})
);
```
--------------------------------
### Basic HTML Structure for Quick Test
Source: https://github.com/yandeu/five-server-vscode/blob/main/README.md
This is a simple HTML file used for a quick test to verify if Five Server is functioning correctly. It includes a basic document structure with a heading.
```html
HTML Test File
It works!
```
--------------------------------
### Keyboard Shortcut for Opening Server (JSON)
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
Defines a keyboard shortcut for opening the Five Server. The default shortcut is Alt+L followed by Alt+O. On macOS, the shortcut uses the Command key instead of Alt.
```json
{
"keybindings": [
{
"command": "fiveServer.openViaShortcut",
"key": "alt+L alt+O",
"when": "editorTextFocus",
"mac": "cmd+L cmd+O"
}
]
}
```
--------------------------------
### Configure PHP Server Settings for Five Server
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
This JavaScript configuration file (`fiveserver.config.js`) sets up the PHP executable path and other options for Five Server to enable live reload support for PHP files. It specifies the path to the PHP binary, an optional custom `php.ini` file, and enables features like `injectBody` and `highlight`.
```javascript
// fiveserver.config.js
module.exports = {
php: '/usr/bin/php', // Path to PHP executable
phpIni: '/etc/php.ini', // Optional: custom php.ini path
injectBody: true, // Enable live updates for PHP
highlight: true // Enable highlighting for PHP files
};
```
--------------------------------
### Integrate Five Server Client Script in PHP Application
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
This PHP code demonstrates how to manually include the Five Server client-side script in an `index.php` file for advanced PHP applications. By including `` in the ``, live reload functionality is enabled for the PHP application.
```php
PHP with Five Server
Hello from PHP!";
echo "Current time: " . date("Y-m-d H:i:s") . "
";
?>
```
--------------------------------
### Configure Five Server with fiveserver.config.js
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
Defines project-specific settings for the Five Server VS Code extension. This configuration file allows customization of features like live reloading, browser behavior, and ignored files, taking precedence over global VS Code settings.
```javascript
// fiveserver.config.js
module.exports = {
highlight: true,
injectBody: true,
remoteLogs: "yellow",
injectCss: true,
navigate: true,
root: "./public",
open: "index.html",
host: "localhost",
port: 5500,
browser: ["chrome"],
ignore: [
"node_modules",
".git",
/\.test\.js$/
],
debugVSCode: true,
php: "/usr/bin/php",
phpIni: "/etc/php.ini"
};
```
--------------------------------
### Publish VS Code Extension to Open VSX
Source: https://github.com/yandeu/five-server-vscode/blob/main/ovsx.md
This command uses the ovsx CLI to publish a VS Code extension package (.vsix file) to the Open VSX Registry. You need to replace 'x.x.x' with your extension's version and provide your personal access token (TOKEN) for authentication.
```console
npx ovsx publish .\five-server-x.x.x.vsix -p TOKEN
```
--------------------------------
### Keyboard Shortcut for Closing Server (JSON)
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
Defines a keyboard shortcut for closing the Five Server instance. The default shortcut is Alt+L followed by Alt+C. On macOS, the shortcut uses the Command key instead of Alt.
```json
{
"keybindings": [
{
"command": "fiveServer.close",
"key": "alt+L alt+C",
"when": "editorTextFocus",
"mac": "cmd+L cmd+C"
}
]
}
```
--------------------------------
### Implement Instant Body Update (injectBody)
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
This TypeScript code snippet demonstrates the internal mechanism for injecting HTML body updates without a full page refresh. It listens for text document changes, checks if the file is HTML or PHP, and then updates the browser content accordingly.
```typescript
// Internal implementation for body injection
vscode.workspace.onDidChangeTextDocument((e) => {
if (!fiveServer?.isRunning) return;
if (!isHtml(e.document.fileName) && !isPhp(e.document.fileName)) return;
if (!shouldInjectBody()) return;
updatePage(e.document.fileName, e.document.getText());
updateBody(page.current.fileName);
});
const updateBody = (fileName: string) => {
fiveServer?.parseBody.updateBody(
fileName,
page.current.text,
shouldHighlight(fileName),
vscode.window.activeTextEditor?.selection.active
);
};
```
--------------------------------
### Execute Inline JavaScript After Five Server Connection
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
This HTML and JavaScript code demonstrates how to ensure inline scripts execute only after the Five Server has successfully connected, particularly when `injectBody` is enabled. It uses an event listener for the 'connected' event on a Five Server element or falls back to the 'load' event if the element is not found.
```html
Inline Script Example
```
--------------------------------
### Implement Auto Navigation (navigate)
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
This TypeScript code handles automatic browser navigation to the currently edited file. It monitors active text editor changes and updates the browser's URL when switching between HTML or PHP files.
```typescript
// Navigation handler
vscode.window.onDidChangeActiveTextEditor((e) => {
if (!fiveServer?.isRunning) return;
navigate(e?.document.fileName, e?.document.getText());
});
const navigate = (fileName: string | undefined, text: string | undefined) => {
if (!fiveServer?.isRunning) return;
if (!shouldNavigate(fileName, text)) return;
if (activeFileName === fileName) return;
activeFileName = fileName;
if (fileName && workspace) {
fileName = fileName.replace(rootAbsolute, '').replace(/^\\|^/\/gm, '');
fiveServer.navigate(`/${fileName}`);
}
};
```
--------------------------------
### Workaround for injectBody with Inline JavaScript (HTML)
Source: https://github.com/yandeu/five-server-vscode/blob/main/README.md
This snippet provides a workaround for issues with `injectBody` when using inline JavaScript within the `` tag. It ensures scripts execute after Five Server is connected by listening for the 'connected' event or falling back to the 'load' event.
```html
```
--------------------------------
### Control Five Server with VS Code Status Bar Item
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
This TypeScript code snippet illustrates how to create and manage a status bar item in VS Code for controlling the Five Server. It defines functions to update the status bar's text, tooltip, and color based on the server's state (on, loading, or off), providing a quick way to toggle the server.
```typescript
// Create status bar item
myStatusBarItem = vscode.window.createStatusBarItem(
vscode.StatusBarAlignment.Right,
0
);
myStatusBarItem.command = 'fiveServer.statusBar';
const updateStatusBarItem = (status: String) => {
if (status === 'on') {
myStatusBarItem.text = `$(zap) ${openURL}`;
myStatusBarItem.tooltip = 'Close Five Server';
myStatusBarItem.color = '#ebb549'; // Yellow when active
} else if (status === 'loading') {
myStatusBarItem.text = `$(sync~spin) Going Live...`;
myStatusBarItem.tooltip = 'Loading Five Server';
} else {
myStatusBarItem.text = `$(play-circle) Go Live`;
myStatusBarItem.tooltip = 'Open Five Server';
}
myStatusBarItem.show();
};
```
--------------------------------
### Enable Debug Mode in Five Server Configuration (JavaScript)
Source: https://github.com/yandeu/five-server-vscode/blob/main/README.md
This code snippet shows how to enable debug mode for Five Server by setting the `debugVSCode` option to `true` in the `fiveserver.config.js` file. This is useful for troubleshooting.
```javascript
// fiveserver.config.js
module.exports = {
debugVSCode: true,
};
```
--------------------------------
### Stop Live Server Programmatically (TypeScript)
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
Stops the running Five Server instance and cleans up resources, including terminal output and file watchers. The server's state ('on', 'off', or 'loading') can be retrieved from the VS Code workspace state.
```typescript
vscode.commands.executeCommand('fiveServer.close');
// Server state is tracked in workspaceState:
// context.workspaceState.get('fiveServer.state') // "on", "off", or "loading"
```
--------------------------------
### Remote Logs Terminal Implementation
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
A TypeScript class `PTY` for creating a VS Code terminal to display remote console logs from the browser. It utilizes VS Code's Pseudoterminal API to capture and display messages.
```typescript
// PTY terminal for remote logs
export class PTY {
writeEmitter: vscode.EventEmitter;
terminal: vscode.Terminal;
public write(...message: string[]) {
const write = message.join(' ');
this.terminal.sendText(write, true);
}
constructor(open = true) {
this.writeEmitter = new vscode.EventEmitter();
const pty: vscode.Pseudoterminal = {
onDidWrite: this.writeEmitter.event,
open: () => {},
close: () => this.writeEmitter.dispose(),
handleInput: (data) => this.writeEmitter.fire(data === '\r' ? '\r\n' : data + '\r\n'),
};
this.terminal = vscode.window.createTerminal({ name: 'Five Server', pty });
if (open) this.terminal.show();
}
}
// Usage: Messages from browser appear in terminal
const messageHandler = (message: any) => {
if (pty && message && message.msg) {
pty.write(message.msg);
}
};
```
--------------------------------
### Display HTML Validation Errors with VS Code Decorations
Source: https://context7.com/yandeu/five-server-vscode/llms.txt
This TypeScript code snippet demonstrates how to display HTML validation errors as inline decorations within the VS Code editor. It utilizes a decorator function to render error messages and line numbers, and a worker message handler to process validation results from the Five Server.
```typescript
// Decorator for HTML validation messages
export const decorate = (
fileName: string,
props: { text: string; line: number }[],
color: string
) => {
const hash = strToHash(fileName);
decorations[hash] = [];
props.forEach((p) => {
const { text, line } = p;
decorations[hash].push({
renderOptions: { after: { contentText: text, color } },
range: new Range(new Position(line - 1, 1024), new Position(line - 1, 1024)),
});
});
refreshDecorations(fileName);
};
// Worker message handler for validation results
fiveServer.parseBody.workers.on('message', (msg: any) => {
const json = JSON.parse(msg);
if (json.report && json.report.results) {
const results = json.report.results;
const htmlErrors = results[0]?.messages.map((m: any) => ({
message: m.message,
ruleId: m.ruleId,
line: m.line
}));
decorate(
page.current.fileName,
htmlErrors.map((e: any) => ({ text: `// ${e.message}`, line: e.line })),
colors.yellow
);
}
});
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.