Keeping Your VS Code Workspace Tidy: How to Hide .js.map Files in TypeScript Projects

• TypeScript: A superset of JavaScript that adds optional static typing for better code organization and error detection. When you compile TypeScript code, it's typically converted to plain JavaScript files (.js).
• .js.map Files: These files are generated during the compilation process. They contain source map information that helps debuggers map errors in the compiled JavaScript back to the original TypeScript code for easier troubleshooting.

Hiding .js.map Files in VS Code:

While .js.map files are useful for debugging, they can clutter your project workspace. Here's how to hide them:

1. Open VS Code Settings:

2. Choose Workspace or User Settings:

   • Select Workspace Settings to apply the hiding rule only to the current project.
   • Choose User Settings to apply it globally to all your TypeScript projects.

3. Add the Hide Pattern:

   • In the settings search bar, type "files.exclude".
   • In the right-hand pane, find the files.exclude setting (it might be empty initially).
   • Click on the "Add Item" button (usually a plus sign icon).
   • Enter the following pattern (replace the curly braces with the actual file extension):

   "{basename}.js"  // Hides all .js files
   "{basename}.js.map" // Hides specifically .js.map files
   

   Explanation of the Pattern:

   • {basename}: This part represents the name of the corresponding TypeScript file (without the extension).
   • .js: Matches any JavaScript file generated from the TypeScript file.
   • .js.map: Specifically targets the .js.map files.

4. Save Settings:

Benefits:

• A cleaner workspace with only the TypeScript files visible.
• Easier navigation and focus on the core code.

Important Notes:

• Hidden files are still accessible. You can search for them or use the "Reveal in Explorer" context menu option on a TypeScript file to show its corresponding .js and .js.map files (if they exist).
• If you need to debug your compiled JavaScript, you might need to temporarily unhide the .js.map files by removing the pattern from the files.exclude setting.

{
  "files.exclude": {
    "**/*.js": { "when": "$(basename).ts" },  // Hide .js files if a corresponding .ts exists
    "**/*.js.map": true                         // Hide all .js.map files
  }
}

Explanation:

• files.exclude: This setting defines patterns for files to be excluded from the VS Code explorer.
  • **/*.js: Matches any JavaScript file (*.js) anywhere in the workspace (**).
  • **/*.js.map: This pattern directly targets all .js.map files for exclusion.
• true: The value for **/*.js.map is set to true, which simply tells VS Code to exclude those files.

• This method doesn't directly modify VS Code settings but relies on your operating system's file explorer filters.
• Windows:
  • Open the project folder in File Explorer.
  • Click on "View" > "Hide extensions for known file types" (if enabled, disable it).
  • In the search bar, type *.js.map and press Enter. This will filter out only the .js.map files from the view.
• macOS:
  • Click on "View" > "Show View Options" (or press Command + J).
  • Check the box next to "Hide extensions."
  • In the search bar, type kind:js.map and press Enter. This will filter based on the file type, hiding the .js.map files.

Limitations:

• This approach only filters the view in the file explorer, not within VS Code itself. Hidden files might still appear in search results or when opening folders within VS Code.
• It's not as convenient as using VS Code settings, especially if you need to frequently switch between showing and hiding these files.

Custom Task Runner (Advanced):

This method involves creating a custom task that automatically deletes or moves the .js.map files after compilation. However, it requires more configuration and might be overkill for simple hiding purposes.

Steps:

1. Create a tasks.json file in your project's root directory (if it doesn't exist).
2. Define a task that deletes or moves the .js.map files. Here's an example using the shell task runner:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Clean .js.map files",
      "type": "shell",
      "command": "find . -name '*.js.map' -delete", // Deletes .js.map files (replace with "mv ./*.js.map hidden_maps" to move them)
      "problemMatcher": "$tsc" // Optional: Use a problem matcher to capture errors during deletion
    }
  ]
}

1. Run the task manually or integrate it into your build process.

• Deleting the .js.map files permanently removes the source map information, making debugging in compiled JavaScript difficult. Moving them might be a safer option.

Choosing the Right Method:

• For most users, the files.exclude setting in VS Code is the simplest and most effective way to hide .js.map files while still having them accessible if needed.
• If you prefer a visual approach (though less integrated with VS Code), file explorer filters can be a quick option.
• The custom task runner method is the most complex and should only be used if you have specific requirements for managing .js.map files beyond just hiding them.