Как скрыть .js.map файлы в Visual Studio Code с помощью File Nesting

Что такое File Nesting и зачем это нужно

File Nesting (вложение файлов) — это встроенная функция Visual Studio Code, которая позволяет группировать связанные файлы в дереве проводника. Например, файлы .js и .js.map можно "спрятать" под родительский .ts файл. Это делает проводник чище и удобнее для навигации.

Базовая настройка через settings.json

Самый простой способ — добавить правила в файл настроек VS Code. Откройте settings.json (через Ctrl+Shift+P → "Preferences: Open Settings (JSON)") и добавьте следующий блок:

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "*.ts": "$(capture).js, $(capture).js.map",
    "*.tsx": "$(capture).js, $(capture).js.map"
  }
}

Как это работает:

• "explorer.fileNesting.enabled": true — включает функцию вложения.
• "explorer.fileNesting.patterns" — содержит правила в виде пар "родительский паттерн → список дочерних файлов".
• "*.ts" — все файлы с расширением .ts становятся родителями.
• "$(capture).js" — захватывает имя родительского файла (без расширения) и подставляет его. Например, для app.ts будет искать app.js.
• "$(capture).js.map" — аналогично для app.js.map.

После добавления этих правил перезагрузите VS Code (Ctrl+Shift+P → "Developer: Reload Window"). Теперь в проводнике вы увидите, что app.ts имеет стрелочку слева, а под ним свернуты app.js и app.js.map.

Расширенная настройка для полного покрытия

Если вы используете дополнительные расширения файлов (например, .d.ts для деклараций), добавьте их в правило:

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "*.ts": "$(capture).js, $(capture).js.map, $(capture).d.ts",
    "*.tsx": "$(capture).js, $(capture).js.map",
    "*.js": "$(capture).js.map"
  }
}

Последняя строка "*.js": "$(capture).js.map" полезна, если у вас есть .js файлы, сгенерированные не из TypeScript, но с картами.

Глобальная настройка для всех проектов

Чтобы применить эти правила ко всем проектам на вашем компьютере, добавьте их в пользовательские настройки (User Settings), а не в настройки рабочей области. Откройте settings.json через вкладку "User" (вкладка в левом верхнем углу редактора настроек) и вставьте туда те же правила.

Пример результата

До настройки проводник выглядел так:

📁 my-project
  ├── app.js
  ├── app.js.map
  ├── app.ts
  ├── utils.js
  ├── utils.js.map
  ├── utils.ts

После настройки:

📁 my-project
  ├── app.ts
  │   ├── app.js
  │   └── app.js.map
  ├── utils.ts
  │   ├── utils.js
  │   └── utils.js.map

Теперь проводник стал гораздо чище, и вы можете легко развернуть нужный .ts файл, чтобы увидеть его скомпилированные версии.

Важные замечания

• Файлы не удаляются и не перемещаются — меняется только их отображение в проводнике.
• Если вы используете outDir в tsconfig.json (например, "outDir": "./dist"), то вложение не сработает, так как файлы находятся в разных папках. В этом случае лучше использовать отдельную папку для скомпилированных файлов.
• Для TypeScript проектов с монорепозиториями можно добавить правила для каждого пакета отдельно.

{
  "search.exclude": {
    "**/*.map": true
  }
}