The file browser in DSH Web provides plain-text preview by default. For developers, the lack of syntax highlighting and direct editing reduces the efficiency of reading and modifying code. This plugin aims to address this pain point.

What Is This

This is a DSH Web plugin maintained by wolfsonliu. It registers a viewer named “Code Editor”, overriding the default plain-text preview of dsh-file-explorer. Built on CodeMirror 6, the plugin provides language-specific syntax highlighting, line numbers, undo/redo, and other editing capabilities, plus autosave and theme following.

Core Features

The plugin provides the following capabilities:

  • Multi-language syntax highlighting: Supports syntax highlighting for 90+ programming languages. File extensions (such as .ts, .json, .py, etc.) are automatically mapped to the corresponding language.
  • Real editor: It includes a built-in CodeMirror editor with line numbers, word wrap, and undo/redo, rather than a read-only <pre> tag.
  • Autosave: Automatically saves 500ms after editing stops, and also supports Ctrl/Cmd+S for immediate saving.
  • Status bar: The bottom status bar shows the current language, cursor position (line/column), and save status (unsaved, saving, saved, save failed).
  • Theme following: The editor’s highlight theme follows DSH’s dark/light theme switching.
  • Viewer registration: Registered as a named viewer, it appears in the “Open with…” menu on a file row and can coexist with other viewers.

Installation and Enablement

Before installing, ensure the dsh-file-explorer plugin is installed and that your DSH core version is v0.9.0 or higher.

  1. Clone the repository and install dependencies
    git clone https://github.com/wolfsonliu/dsh-file-explorer-preview-code.git
    cd dsh-file-explorer-preview-code
    npm install && npm run build
  1. Add the plugin to the Web environment configuration
    dsh plugin --profile web add .

Typical Usage

After installation, start DSH Web (dsh web). In the file browser’s file list, locate a code file (for example, .js, .py), click the “Open with…” menu on that file row, and select “Code Editor” to enter edit mode.

Applicable Scenarios and Notes

  • Dependency requirement: This plugin depends on @dsh-external/dsh-file-explorer; that plugin must be installed first for the named viewer feature to work normally.
  • Markdown limitation: The plugin does not support Markdown files (.md/.mdx); these files fall back to the default preview.
  • Direct write: Editing operations write directly to the workspace file. There is no diff preview or multi-tab feature.
  • Large-file performance: For large files over 2MB, the plugin loads them via readRawFile, which may cause browser performance issues.