Hide JavaScript Source Map Files in VS Code with files.exclude

You will learn how Visual Studio Code's files.exclude setting hides matching files in the Explorer without deleting them. You will also learn glob patterns for generated TypeScript output, workspace-specific configuration, and when to use search.exclude separately.

Visual Studio Code can hide files and folders in its Explorer through the files.exclude setting. This is useful when your project contains generated output that you normally do not need to edit directly.

TypeScript commonly produces files such as:

• app.ts — the source file you edit
• app.js — compiled JavaScript output
• app.js.map — a source map used by debuggers to connect JavaScript back to TypeScript

Hiding generated files keeps the Explorer focused on source code. It does not delete files, stop TypeScript from compiling them, or prevent Node.js and browsers from using them.

Use files.exclude for the Explorer. If you also want to prevent generated files from appearing in global search results, configure search.exclude too.

Think of the VS Code Explorer as a bookshelf and files.exclude as a label telling VS Code which books should stay behind a curtain.

The files are still on the shelf: TypeScript can generate them, Git can track them, and your application can run them. The Explorer simply does not display the files matching your rule.

Add exclusion patterns to VS Code settings.

For a project-specific rule, create or edit .vscode/settings.json in the project root:

{
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true
  }
}

**/ means “in this folder or any nested folder,” and *.js means “a filename ending in .js.”

The first rule hides JavaScript files and the second hides source map files. In practice, **/*.js does not match file.js.map, because that filename ends with .map, so both patterns are needed.

If you only want to hide source maps, use:

{
  "files.exclude": {
    "**/*.js.map": true
  }
}

You can set the same values through Settings by searching for Files: Exclude and adding the patterns there.

Suppose the project contains this structure:

src/
  calculator.ts
  calculator.js
  calculator.js.map
  helpers/
    format.ts
    format.js
    format.js.map

With this setting:

{
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true
  }
}

VS Code evaluates each path:

1. src/calculator.ts does not match either pattern, so it remains visible.
2. src/calculator.js matches **/*.js, so it is hidden.
3. src/calculator.js.map matches **/*.js.map, so it is hidden.
4. src/helpers/format.ts remains visible.
5. The generated files inside helpers are also hidden because **/ includes nested directories.

The result is an Explorer that shows the TypeScript source files while leaving generated output on disk.

Common reasons to hide generated files include:

• TypeScript applications: Hide emitted .js, .js.map, and declaration files while editing .ts files.
• Frontend builds: Hide generated bundles such as dist/app.js when source files live elsewhere.
• Code generation: Hide files created from API schemas, ORM tools, or protocol definitions.
• Coverage and reports: Hide temporary coverage output and generated test reports.
• Large repositories: Reduce noise from tool caches and build artifacts so developers can navigate source code faster.

If generated output is placed in a dedicated folder such as dist/, hiding that folder is often clearer than hiding each extension.

In real projects, developers usually combine editor visibility rules with a clean build layout.

A common TypeScript configuration writes output to dist/:

{
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist",
    "sourceMap": true
  }
}

Then the workspace can hide the whole build folder:

{
  "files.exclude": {
    "**/dist": true
  },
  "search.exclude": {
    "**/dist": true
  }
}

Keeping generated output in dist/ avoids mixing source and build files in src/.

Teams commonly commit shared Explorer rules in .vscode/settings.json. Rules that are personal preferences can instead go in user settings, so they apply to every project without changing repository files.

Expecting hidden files to be deleted

files.exclude only changes Explorer visibility. It does not remove files.

{
  "files.exclude": {
    "**/*.js": true
  }
}

The .js files still exist and may still be committed by Git unless .gitignore excludes them.

Using files.exclude to control search results

Explorer exclusions and search exclusions are separate settings. Add search.exclude when needed:

{
  "files.exclude": {
    "**/*.js.map": true
  },
  "search.exclude": {
    "**/*.js.map": true
  }
}

Hiding JavaScript files needed for debugging

Source maps are useful for debugging TypeScript. Hiding them from the Explorer is usually safe, but do not disable TypeScript source map generation merely because you do not want to see the files.

Using an overly broad pattern

This rule hides every JavaScript file, including hand-written JavaScript that may be important:

{
  "files.exclude": {
    "**/*.js": true
  }
}

Prefer hiding a build directory such as dist when the project contains both authored and generated JavaScript.

Writing invalid JSON

VS Code settings files use JSON. Property names need double quotes, and commas are required between properties:

{
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true
  }
}

File nesting is useful when you want generated files available but collapsed beneath their source file. files.exclude is the better choice when you do not want to see them at all.

{
  "files.exclude": {
    "**/*.js.map": true,
    "**/*.js": true
  }
}

• Put project-specific settings in .vscode/settings.json.
• **/ matches files at any folder depth.
• *.js matches JavaScript files; *.js.map matches source maps.
• Hidden files remain on disk and are still usable by tools.
• Use search.exclude separately to omit files from search.
• Prefer hiding dist/ when all build output is stored there.
• Use .gitignore to control Git, not Explorer visibility.

How do I hide .js.map files in VS Code?

Add this to Settings JSON or .vscode/settings.json:

{
  "files.exclude": {
    "**/*.js.map": true
  }
}

Can VS Code show only TypeScript files in the Explorer?

You can hide known non-TypeScript generated file types with files.exclude, such as .js and .js.map. There is no need to delete those files; they simply become invisible in the Explorer.

Does files.exclude delete or ignore files?

No. It only hides matching paths in the VS Code Explorer. Use .gitignore to tell Git to ignore files.

Why do .js.map files still appear in search?

files.exclude controls Explorer visibility, not search. Add the same pattern under search.exclude.

Should I hide .js files in a TypeScript project?

It depends. If all .js files are generated output, hiding them reduces clutter. If the project contains hand-written JavaScript, hide only generated directories or more specific patterns.

Where should I save the setting?

Use .vscode/settings.json for a project rule that teammates can share. Use User Settings for a preference that should apply across all your VS Code projects.

Can I hide the entire build folder instead?

Yes, and it is often preferable:

{
  "files.exclude": {
    "**/dist": true
  }
}

• VS Code workspace settings — Store project-specific editor configuration in .vscode/settings.json.
• Glob patterns — Define which filenames and folders settings should match.
• TypeScript compiler options — Configure emitted JavaScript, source maps, and output folders in tsconfig.json.
• outDir and rootDir — Separate TypeScript source files from compiled build output.
• .gitignore — Prevent generated files from being accidentally added to Git.
• VS Code search exclusions — Exclude build artifacts from text search.
• VS Code file nesting — Group related generated files under a source file instead of hiding them.