vscode obsidian markdown mdx workflow tools

Four Ways to Read Markdown Files in VS Code Without Clicking 'Open Preview' Every Time

June 30, 2026|5 min

My AI system has hundreds of markdown files. Meeting notes, project pages, voice guides, positioning docs. All plain .md or .mdx.

VS Code displays them like a text file.

I open a file. I see raw markdown. Backticks, dashes, asterisks.

But most of the time, I want to see the rendered version, with the tables laid out and the headings sized properly. Like how I would see them in Obsidian.

I have to right-click, find "Open Preview," click it, and VS Code opens the rendered file next to the source.

It works but also feels tedious.

Here are the four ways to fix it.

Method 1. Use these two keyboard shortcuts

Cmd+Shift+V opens the rendered preview in the same tab.
Cmd+K then V opens the preview side by side with the raw file. You can edit on the left and see the rendered version update as you type.

Method 2a. The permanent flip: make VS Code always open markdown as preview

If you want VS Code to render every markdown file automatically on open, you can force it with a setting.

Open the command palette with Cmd+Shift+P. Type "Preferences: Open User Settings (JSON)" and hit enter. Paste this at the top of the object:

"workbench.editorAssociations": {
  "*.md": "vscode.markdown.preview.editor"
}

Save.

Now every .md file opens as the rendered preview by default.

The trade-off is when you want to edit the file, you have to switch back to source mode.

This solution works for people who read markdown far more than they write it.

But some people genuinely prefer raw markdown. You can see the structure, you feel the file. If that's you, keep option 1.

Method 2b. If you also use MDX, use these settings instead

The section above works for plain .md files. If you also use .mdx (which is what Next.js, Astro, and Docusaurus blogs use), use the following two settings. Both work together to let you preview MD and MDX automatically in VS Code.

Open settings.json (Cmd+Shift+P → "Preferences: Open User Settings (JSON)") and paste this expanded version instead:

"workbench.editorAssociations": {
  "*.md": "vscode.markdown.preview.editor",
  "*.mdx": "vscode.markdown.preview.editor"
},
"files.associations": {
  "*.mdx": "markdown"
}

One limitation is that VS Code's built-in preview doesn't understand JSX components. If your MDX has <Component /> tags, they show up as raw text in the preview.

For blog posts that are 95% plain markdown, the preview looks correct. For component-heavy MDX, install an extension like "MDX Preview" from the VS Code marketplace, or run your local dev server (pnpm dev in a Next.js project) to see the real render with your components in place.

Method 3. Install Foam and turn VS Code into a real markdown workspace

The two options above are about VS Code's built-in preview. Foam is different.

Foam is a VS Code extension that turns the editor into a knowledge workspace, something closer to Obsidian.

Read Vinod’s Newsletter

Weekly build notes showing how I build agentic systems that actually ship, not just demo well.

•How I build agentic systems that actually run, not just demo.
•The experiments that worked. The ones that failed.
•Steal the systems, workflows, and automations.

•How I build agentic systems that actually run, not just demo.
•The experiments that worked. The ones that failed.
•Steal the systems, workflows, and automations.

Search "Foam" in the VS Code extensions marketplace. Install the one from the Foam team (currently at 258k+ downloads, 43 five-star ratings). You'll get:

Wikilinks. Write [[my-note]] and it becomes a real link to that file. Autocomplete works.
Backlinks. For any file you open, Foam shows you every other file that links to it.
Graph view. See your entire knowledge base as a network diagram. Every file is a node, every link is an edge.
Daily notes. One command creates or opens today's note in a dated folder.
Tag browser. Every #tag becomes searchable.

If you already have markdown files in a folder and they link to each other, Foam just works on top of them. No migration. Point it at your folder and it starts building the graph.

I use Foam when I want to stay inside VS Code but need Obsidian-like navigation.

Which brings us to the last option.

Method 4. Just use Obsidian

For anyone who spends most of their day in markdown, Obsidian is the best option.

Once you have hundreds of files with links between them, you need to see the graph. You need backlinks. You need wiki-style navigation.

Obsidian is free. It reads plain .md files. It can also read .mdx files after you install the free "mdx as md" plugin.

It opens any folder as a "vault."

You can open the same folder in Obsidian and keep VS Code and Obsidian side by side. One for coding, one for reading markdown.

My entire brain folder works as an Obsidian vault without changing a single file. Same repo. Same files. Different view.

The split I actually run:

VS Code when I'm editing code, running scripts, or using the Claude extension to ingest new information.
Obsidian when I'm reading, browsing, following links between notes, or looking at the graph to see how ideas connect.

Both apps hit the same files. Whatever I edit in one shows up in the other the next time I open it.

TLDR

The whole point is that markdown was designed to be readable both ways: as source and as rendered text. Your editor should let you switch between those views without friction.

Pick the method that works for you.

Use one of the two shortcuts.
- Cmd+Shift+V opens the rendered preview in the same tab.
- Cmd+K then V opens the preview side by side with the raw file.

Force preview on open with the settings snippet.

Open settings.json (Cmd+Shift+P → "Preferences: Open User Settings (JSON)") and paste this expanded version instead:

"workbench.editorAssociations": {
  "*.md": "vscode.markdown.preview.editor",
  "*.mdx": "vscode.markdown.preview.editor"
},
"files.associations": {
  "*.mdx": "markdown"
}

Install Foam if you want to stay in VS Code but want Obsidian-like features.
Use Obsidian if you want the best reading experience. Open the entire project folder in Obsidian.

I run VS Code and Obsidian side by side. Both pointing at the same folder. It gives me the best of both worlds.

vscode obsidian markdown mdx workflow tools

vercel

Search "Foam" in the VS Code extensions marketplace. Install the one from the Foam team (currently at 258k+ downloads, 43 five-star ratings). You'll get:

Wikilinks. Write [[my-note]] and it becomes a real link to that file. Autocomplete works.
Backlinks. For any file you open, Foam shows you every other file that links to it.
Graph view. See your entire knowledge base as a network diagram. Every file is a node, every link is an edge.
Daily notes. One command creates or opens today's note in a dated folder.
Tag browser. Every #tag becomes searchable.

If you already have markdown files in a folder and they link to each other, Foam just works on top of them. No migration. Point it at your folder and it starts building the graph.

I use Foam when I want to stay inside VS Code but need Obsidian-like navigation.

Which brings us to the last option.

Method 4. Just use Obsidian

For anyone who spends most of their day in markdown, Obsidian is the best option.

Once you have hundreds of files with links between them, you need to see the graph. You need backlinks. You need wiki-style navigation.

Obsidian is free. It reads plain .md files. It can also read .mdx files after you install the free "mdx as md" plugin.

It opens any folder as a "vault."

You can open the same folder in Obsidian and keep VS Code and Obsidian side by side. One for coding, one for reading markdown.

My entire brain folder works as an Obsidian vault without changing a single file. Same repo. Same files. Different view.

The split I actually run:

VS Code when I'm editing code, running scripts, or using the Claude extension to ingest new information.
Obsidian when I'm reading, browsing, following links between notes, or looking at the graph to see how ideas connect.

Both apps hit the same files. Whatever I edit in one shows up in the other the next time I open it.

TLDR

The whole point is that markdown was designed to be readable both ways: as source and as rendered text. Your editor should let you switch between those views without friction.

Pick the method that works for you.

Use one of the two shortcuts.
- Cmd+Shift+V opens the rendered preview in the same tab.
- Cmd+K then V opens the preview side by side with the raw file.

Force preview on open with the settings snippet.

Open settings.json (Cmd+Shift+P → "Preferences: Open User Settings (JSON)") and paste this expanded version instead:

"workbench.editorAssociations": {
  "*.md": "vscode.markdown.preview.editor",
  "*.mdx": "vscode.markdown.preview.editor"
},
"files.associations": {
  "*.mdx": "markdown"
}

Install Foam if you want to stay in VS Code but want Obsidian-like features.
Use Obsidian if you want the best reading experience. Open the entire project folder in Obsidian.

I run VS Code and Obsidian side by side. Both pointing at the same folder. It gives me the best of both worlds.

Four Ways to Read Markdown Files in VS Code Without Clicking 'Open Preview' Every Time

Method 1. Use these two keyboard shortcuts

Method 2a. The permanent flip: make VS Code always open markdown as preview

Method 2b. If you also use MDX, use these settings instead

Method 3. Install Foam and turn VS Code into a real markdown workspace

Method 4. Just use Obsidian

TLDR

Related Articles

The Claude Code Skill I Use to Put Any Repo Live on Its Own Domain

The 4 Analytics Tools I Add to Every Website I Build

Pageviews Don't Show Your Funnel. A 10-Line Helper Does.

Four Ways to Read Markdown Files in VS Code Without Clicking 'Open Preview' Every Time

Method 1. Use these two keyboard shortcuts

Method 2a. The permanent flip: make VS Code always open markdown as preview

Method 2b. If you also use MDX, use these settings instead

Method 3. Install Foam and turn VS Code into a real markdown workspace

Method 4. Just use Obsidian

TLDR

Related Articles

The Claude Code Skill I Use to Put Any Repo Live on Its Own Domain

The 4 Analytics Tools I Add to Every Website I Build

Pageviews Don't Show Your Funnel. A 10-Line Helper Does.