Five Server for VS Code

You can launch the Five Server live server using any of the following four methods:

1. Status Bar: Click the Go Live button in the VS Code status bar (bottom of the editor).
2. Open File Context Menu: Right-click an open file in the editor and select Open with Five Server.
3. Explorer Context Menu: Right-click a file in the Explorer sidebar and select Open with Five Server.
4. Folder Context Menu: Right-click a folder in the Explorer sidebar and select Open with Five Server (root). This sets the selected folder as the server root until the server is stopped.

If you need to debug the extension itself, set the debugVSCode option to true in your fiveserver.config.js file.

// fiveserver.config.js
module.exports = {
  debugVSCode: true,
};

The injectBody feature may occasionally conflict with inline JavaScript located inside the <body> tag. To resolve this, ensure your inline scripts execute only after the Five Server connection is established by listening for the connected event on the element with data-id="five-server".

<script>
  const main = () => {
    console.log("Some JavaScript Code...");
  };

  // wait for five-server to connect
  const five = document.querySelector('[data-id="five-server"]');
  if (five) five.addEventListener("connected", main);
  else window.addEventListener("load", main);
</script>

If the server is not working as expected, check the following:

1. Conflicts: Ensure the old Live Server extension is uninstalled.
2. Workspace Context: Ensure you have opened a folder in VS Code, not just a single file.
3. File Location: Avoid running projects from network drives, USB sticks, or cloud-synced folders like OneDrive or Dropbox, as these can cause file system watching issues.
4. Version: Verify you are using the latest version of the extension.

You can configure Five Server behavior by creating a fiveserver.config.cjs file in your project root. This file allows you to control features like code highlighting and instant updates (injection).

module.exports = {
  highlight: true, // enable highlight feature
  injectBody: true, // enable instant update
};

Five Server settings are managed within the fiveServer namespace in your VS Code configuration. You can customize the server behavior by setting the following keys in your settings.json file:

{
  "fiveServer.browser": ["chrome"],
  "fiveServer.ignore": ["node_modules"],
  "fiveServer.navigate": true,
  "fiveServer.php.executable": "/path/to/php",
  "fiveServer.php.ini": "/path/to/php.ini",
  "fiveServer.host": "127.0.0.1",
  "fiveServer.port": 5500,
  "fiveServer.injectBody": true,
  "fiveServer.highlight": true
}

You can configure Five Server settings using a fiveserver.config.cjs file in your workspace root. This allows you to define specific server behaviors such as the network port and VS Code integration settings.

module.exports = {
  port: 8787,
  debugVSCode: true,
};

The clearDecorations function removes all active decorations from all currently visible text editors in VS Code and resets the internal decoration state.

import { clearDecorations } from './decorator';

clearDecorations();

The decorate function allows you to add or replace text decorations (like import costs or status messages) at specific lines in a file. It takes a filename, an array of properties containing the text and line number, and a color string. The decorations are rendered as text appearing after the line content.

Parameters:

• fileName: The path/name of the file to decorate.
• props: An array of objects { text: string; line: number; } specifying what to display and on which line.
• color: The CSS color string for the decoration text.

Note: The function automatically calls refreshDecorations after updating the internal state.

import { decorate } from './decorator';

decorate(
  'example.html',
  [
    { text: ' (1.2kb)', line: 10 },
    { text: ' (5.0kb)', line: 15 }
  ],
  '#ff0000'
);

The refreshDecorations function updates the visual decorations in all visible editors associated with a specific file. It includes a built-in debounce mechanism to prevent excessive UI updates.

Parameters:

• fileName: The name of the file to refresh.
• options: An optional configuration object:
  • delay (number, default: 250): The debounce delay in milliseconds before applying decorations.
  • force (boolean, default: false): If true, bypasses the check that prevents refreshing if the decoration data hasn't changed.

If force is false and the current decoration state matches the previous state, the refresh is skipped.

import { refreshDecorations } from './decorator';

// Refresh with default 250ms delay
refreshDecorations('index.html');

// Force an immediate refresh regardless of changes
refreshDecorations('index.html', { force: true });