Why do you get stuck on extensions before code?
People learning to vibe code get stuck on something before the code itself: file extensions. The moment unfamiliar extensions like .json, .yaml, .env, .md pour in, they give up with 'I knew it, I'm not a developer.' Yet these dozens of formats fall into just three groups.
Containers that hold data, things that display on screen, settings and secrets. Grasp just these three branches and, even for an extension you've never seen, you get a sense of which box it belongs to. The table below is that map.
| Format | Group | One-line definition |
|---|---|---|
| CSV | Data | A table with all the formatting stripped from a spreadsheet |
| JSON | Data | A box with labels (the common tongue of apps and AI) |
| XML | Data | Old-style data wrapped in tags |
| HTML | Screen | The skeleton of a web page |
| Markdown (.md) | Screen | Text formatted with a few symbols |
| YAML | Settings | Settings organized by indentation |
| .env | Secret | A safe holding API keys and passwords |
| TXT | Other | Plain characters with no rules at all |
Formats that hold data: CSV, JSON, XML
CSV is a pure table with all color and formatting stripped out and columns separated by commas. The first row is the column names, and data follows from the next row. Order histories from a shop or survey results usually come as CSV, and it is easy to hand straight to AI for analysis.
JSON is today's de facto standard for programs exchanging data. Each value carries a label, and you can nest a box inside a box. AI API responses, app settings, and database results are almost all JSON, so it's what you meet most often when vibe coding.
XML is the old way of wrapping the same data in opening and closing tags. It is still used in the aging systems of government offices and banks, and interestingly, if you crack open an Excel file (.xlsx), the inside is XML. For new work, people usually pick the lighter JSON.
Formats that display: HTML, Markdown
HTML is the blueprint the browser uses to draw the screen. Tags specify what each thing is—<h1> a heading, <p> a paragraph, <button> a button. A website or email newsletter built by vibe coding is all HTML, and skeleton (HTML), styling (CSS), and behavior (JavaScript) move as one set.
Markdown (.md) is text whose formatting is expressed with simple symbols like # or -. It takes five minutes to learn, stays readable even with the symbols attached, and renders into a clean document. GitHub READMEs, AI chatbot answers, and Notion memos are mostly Markdown.
Settings and secrets: YAML, .env
YAML is the same data as JSON, organized by indentation instead of brackets. It is easy for humans to read, so it is often used for deployment and app configuration. Just beware: a single wrong space can break the whole thing, so watch the indentation.
.env is a file that holds sensitive values like API keys and passwords, separated from the code. When you connect an AI service, this is where the key goes. There is one iron rule: never push .env to a public repository. Doing so hands your entire key to strangers. That's why it is usually excluded via .gitignore.
How to read an extension at a glance
The core instinct is simple. CSV, JSON, XML, and YAML are data—the contents. HTML and Markdown are the text and screen that display. .env is a secret. If just seeing the extension gives you the sense of 'this is data, this is screen, this is settings,' that's enough.
From an AX (AI transformation) standpoint this instinct matters more than it seems. When a non-developer builds something with AI, the real barrier is often not code syntax but a vague fear of unfamiliar files. The moment you hold the map that sorts extensions into three groups, unfamiliar files stop being scary. That is exactly when vibe coding truly begins.