Show extensions to tell .js, .ts and .jsx apart on Mac

You open a project folder in Finder and see three files all called index. Are they index.js, index.ts, and index.jsx? With extensions hidden, macOS gives you an icon and nothing else, and source files of different languages can share the same generic icon. Turn extensions on and the ambiguity disappears: Finder → Settings → Advanced → Show all filename extensions, and every file wears its real suffix.

Why developer files need visible extensions most

For documents, the icon usually hints at the type. For source code it rarely does — Finder often shows the same plain-text or blank-page glyph for index.js, index.ts, index.jsx, index.tsx, index.mjs, and index.cjs, even though each behaves differently to your bundler, your linter, and your runtime. Pick the wrong index to edit and you'll be debugging why your change "isn't taking effect" when you simply opened the sibling file.

The confusion compounds with config files that lean on their suffix to declare intent: tsconfig.json versus jsconfig.json, .env versus .env.local, vite.config.js versus vite.config.ts. And dotfiles like .gitignore, .eslintrc, or .npmrc are effectively all-extension — hide extensions and Finder shows you almost nothing to go on. Making suffixes visible turns a folder of look-alikes into a readable listing.

Turn on extensions across the Mac

1. Click a Finder window, then press Command+Comma to open Finder → Settings.
2. Open the Advanced tab.
3. Enable Show all filename extensions.

This applies globally — Finder, the Desktop, and Open/Save dialogs — on macOS 13 Ventura, 14 Sonoma, and 15 Sequoia. Since you probably keep a Terminal open anyway, here's the same setting as a command you can script, with its reversal:

# Show all extensions, then relaunch Finder
defaults write NSGlobalDomain AppleShowAllExtensions -bool true
killall Finder

# Undo — hide known extensions again
defaults write NSGlobalDomain AppleShowAllExtensions -bool false
killall Finder

Note that AppleShowAllExtensions only governs what Finder displays. Your editor, ls, and git status always show full names regardless — this setting just brings Finder in line with the reality your tools already see.

Make a source folder easy to scan

Once extensions are on, a couple of Finder view tweaks make a code directory genuinely pleasant to browse:

• Use list view (Command+2) and click the Kind column to group all your TypeScript files, then all your JavaScript files — the fastest way to see what a folder is actually made of.
• Sort by Name to place Button.jsx right beside Button.tsx, so a half-finished migration jumps out immediately.
• Turn on the path bar (View → Show Path Bar) so you always know which package in a monorepo you're looking at.

With the suffix visible and the list sorted, spotting a stray .js in an otherwise all-.ts module — or the one component someone left as .jsx — takes a glance instead of a Get Info round-trip.

Open source files in the right editor

With extensions visible you can also make double-clicking a .ts file launch VS Code instead of TextEdit for good. Our guide to changing the default app for a file type shows how to set it once for every file of that extension.