Lightweight VSCode extension that previews email message files (.eml and .msg) directly inside the editor as a rendered email view, with inline images embedded.
Supported features
EML rendering (.eml): parses RFC 822 messages, renders the HTML (or plain-text fallback) body in a webview-based custom editor
MSG rendering (.msg): parses Outlook .msg files using the maintained @kenjiuno/msgreader, with RTF body fallback (@kenjiuno/decompressrtf + rtf-stream-parser) and charset-aware HTML decoding via iconv-lite
Default editor: contributes default VS Code editor associations for .eml and .msg, including files opened from the operating system
Inline image embedding: cid: references in HTML emails are resolved against the message's MIME parts and embedded as data: URLs so logos and signature images render correctly
Attachment grid with Open / Save / Save All: every attachment (including inline images) is listed between the headers and body with a thumbnail (or extension badge), MIME type, and size; Open uses a private temporary copy outside the workspace for compatibility with VS Code editors, while Save… and Save All… write a user-chosen copy
Attached emails, calendars, and contacts: forwarded .eml / .msg attachments open in Email Reader; .ics and .vcf attachments show a compact event/contact summary
Find in body: Ctrl/Cmd+F opens an on-demand search bar for the rendered message body, highlights matches, and supports previous/next navigation (F3 / Shift+F3); Esc closes it
Reload: use the preview toolbar or Email Reader: Reload Email to parse the source file again; the extension prompts when an on-disk email changes
Markdown export: Export Markdown… creates a named <email>-export/ folder containing email.md plus an attachments/ directory with relative attachment links, suitable for note-taking and AI workflows
Header pane: From / To / Cc / Bcc / Date / Subject rendered in a compact, themed header table
Sandboxed body: the email body is rendered inside a sandboxed iframe via srcdoc so the email's own <html>/<head>/charset/styles cannot poison the surrounding shell layout; an outer height-fitter keeps the iframe sized to its content
Theme aware: header, attachment block, separators, body links, and blockquote borders use VSCode CSS variables, so it follows the active light/dark theme
Current scope intentionally focuses on read-only preview. Reply/forward/edit are out of scope.
src/parse.ts: dispatch between EML and MSG loaders based on file extension
src/loadEml.ts: EML parsing via mailparser
src/loadMsg.ts: MSG parsing via msgreader
src/EmailFileSystemProvider.ts: virtual filesystem for eml: / msg: URIs so attachments are browsable
Install dependencies
npm install
Build
npm run compile
Run in VSCode (manual review)
Open this repository in VSCode.
Run npm run compile.
Press F5 to launch an Extension Development Host.
In the new window, open an .eml or .msg file (samples are under demo/).
Verify:
The file opens in a rendered email view (not as raw text).
From / To / Subject appear at the top.
Inline images in HTML emails render in place.
Non-inline attachments appear in the Attachments block.
Package and install in local VSCode
Install VSCE:
npm install -D @vscode/vsce
Create VSIX:
npx vsce package
Install VSIX:
code --install-extension email-reader-0.2.6.vsix
Default editor troubleshooting
Email Reader contributes the default association for .eml and .msg, including files opened through the operating system. A user or workspace workbench.editorAssociations setting has higher precedence. If a file still opens in Text Editor, use Reopen Editor With… → Email Reader and remove any "*.eml": "default" / "*.msg": "default" override from Settings JSON.
