All In One

All In One is a Visual Studio Code extension that gives visible text editors a background color based on the document's language. Use different colors to distinguish file types at a glance. The color is an editor decoration only; it does not change or save anything in your files.

Features

• Set a background color for each VS Code language ID.
• Enable or disable the backgrounds without removing your color choices.
• Updates visible editors when you open or edit documents, switch editor views, or change the extension settings.
• Leaves documents with no configured language color unchanged.

Quick Start Configuration

To get started quickly, open your VS Code settings (Cmd/Ctrl+Shift+P → Preferences: Open User Settings (JSON)) and copy-paste the following stub into your settings.json:

  "fileTypeBackgrounds.enabled": true,
  "fileTypeBackgrounds.fileTypes": {
    "csharp": ".cs",
    "fsharp": ".fs",
    "vb": ".vb"
  },
  "fileTypeBackgrounds.colors": {
    "python": "rgba(40, 167, 69, 0.15)",
    "javascript": "rgba(241, 224, 90, 0.15)",
    "javascriptreact": "rgba(241, 224, 90, 0.15)",
    "typescript": "rgba(49, 120, 198, 0.15)",
    "typescriptreact": "rgba(49, 120, 198, 0.15)",
    "go": "rgba(0, 173, 216, 0.15)",
    "json": "rgba(203, 140, 50, 0.15)",
    "html": "rgba(227, 76, 38, 0.15)",
    "css": "rgba(86, 61, 124, 0.15)",
    "java": "rgba(176, 114, 25, 0.15)",
    "csharp": "rgba(104, 33, 122, 0.20)",
    "fsharp": "rgba(55, 139, 186, 0.20)",
    "vb": "rgba(0, 120, 0, 0.20)"
  },

Tip: Always use colors with alpha transparency (e.g. rgba(..., 0.15) or 8-digit hex #RRGGBBAA) so that text selection highlights in the editor remain bright and visible. If you use a custom dark theme or dark editor background, you can also ensure selection highlights stand out with:

  "workbench.colorCustomizations": {
    "editor.selectionBackground": "#ffffff40",
    "editor.selectionHighlightBackground": "#ffffff20"
  }

Configuration

Add or customize settings in your VS Code settings.json. Colors can be any CSS color string supported by VS Code, including hex and rgba(...) values.

{
  "fileTypeBackgrounds.enabled": true,
  "fileTypeBackgrounds.fileTypes": {
    "csharp": ".cs",
    "myTemplate": [".tmpl", ".template"]
  },
  "fileTypeBackgrounds.colors": {
    "typescript": "rgba(49, 120, 198, 0.12)",
    "javascript": "rgba(240, 219, 79, 0.12)",
    "json": "rgba(128, 128, 128, 0.12)",
    "csharp": "rgba(104, 33, 122, 0.12)",
    "myTemplate": "rgba(0, 128, 128, 0.12)"
  }
}

fileTypeBackgrounds.fileTypes maps a custom file type name to one extension or an array of extensions. Add a matching entry with the same name to fileTypeBackgrounds.colors to assign its background color. Custom colors take precedence for matching file extensions; if none is configured, the extension falls back to the document's VS Code language ID color.

You can also set colors directly by VS Code language ID, without adding a custom mapping. For example, .ts files normally use typescript and .js files use javascript. You can see a document's language ID by clicking the language indicator in the VS Code status bar. File extension matches are case-insensitive.

Set fileTypeBackgrounds.enabled to false to turn off all backgrounds while keeping the configured colors.

Previewing colors

Open the files in samples/ to preview how your configured background colors look for Java, Python, JSX, JavaScript, JSON, HTML, Go, C#, F#, Visual Basic, and plain text.

Development

Requires Node.js and VS Code 1.90 or later.

npm install
npm run compile

To run the extension in an Extension Development Host, open this project in VS Code and press F5. The configured watch task recompiles TypeScript as you make changes. To build a VS Code extension package (.vsix), run:

npm run package

To build a complete deployable .zip bundle (including installer scripts for Mac, Linux, and Windows), run:

npm run bundle

📦 How to Build, Zip & Deploy to Another Computer

You have a one-command build script that compiles the code, creates the VS Code .vsix installer, and bundles everything into an easy-to-share .zip file! 🚀

❓ What does each script do? (Which one do I run first?)

💡 Rule of Thumb:

• Build = Makes the zip (run here).
• Install = Installs extension into VS Code (run on the other computer).

🖥️ Step 1: Build the Zip Bundle (On this computer)

In your terminal, run:

npm run bundle

(Or run ./scripts/build-zip.sh directly)

This will generate a ready-to-deploy zip file in your root folder:

📦 all-in-one-0.0.1-bundle.zip

Inside this zip bundle, everything is included for the target machine:

• 📄 all-in-one-0.0.1.vsix — The extension package
• 🍎/🐧 install-bundle.sh — One-click install script for Mac & Linux
• 🪟 install-bundle.bat — One-click install script for Windows
• 📖 README.md — Configuration and quick start guide

🚚 Step 2: Copy the Zip to the Other Computer

Copy all-in-one-0.0.1-bundle.zip to your other computer using any method:

• 💾 USB Flash Drive
• ☁️ Google Drive / Dropbox / OneDrive
• 💬 Slack / Discord / Teams
• 📧 Email attachment

💻 Step 3: Unzip & Install on the Other Computer

1. Extract/Unzip the file on the new computer (right-click → Extract All or Open with Archive Utility).
2. Choose your favorite way to install:

⚡ Way 1: One-Click Script (Super Fast!)

• On Mac / Linux: Open terminal in the unzipped folder and run:

  ./install-bundle.sh
  

• On Windows: Double-click install-bundle.bat!

🟢 Way 2: Through the VS Code UI (No Terminal Needed!)

1. Open VS Code.
2. Click the Extensions icon on the left sidebar (or press Ctrl+Shift+X on Windows, Cmd+Shift+X on Mac).
3. Click the ··· (three dots) menu at the top of the Extensions sidebar.
4. Click "Install from VSIX..." 📥
5. Select the all-in-one-0.0.1.vsix file from the unzipped folder!
6. VS Code will show: "Completed installing all-in-one extension from VSIX." 🎉

⚙️ Step 4: Paste Your Settings on the New Computer

Remember: the extension colors files according to your user settings!

1. Open VS Code on the new machine.
2. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows).
3. Type: Preferences: Open User Settings (JSON) and hit Enter.
4. Copy & paste the snippet from the Quick Start Configuration section above into your settings.
5. Save (Cmd+S / Ctrl+S).

✨ Voila! Your customized file type colors are live on the new computer! 🎨

Testing

There is no automated test suite yet, so test manually in an Extension Development Host.

1. Run npm install, open this project in VS Code, and press F5.

2. In the new window, use File → Open Folder… and open the samples/ folder.

3. Open User Settings (JSON) with Cmd/Ctrl+Shift+P → Preferences: Open User Settings (JSON) and add:

   {
     "fileTypeBackgrounds.enabled": true,
     "fileTypeBackgrounds.fileTypes": {
       "csharp": ".cs",
       "fsharp": ".fs",
       "vb": ".vb"
     },
     "fileTypeBackgrounds.colors": {
       "csharp": "rgba(104, 33, 122, 0.25)",
       "fsharp": "rgba(55, 139, 186, 0.25)",
       "vb": "rgba(0, 120, 0, 0.25)",
       "python": "rgba(255, 215, 0, 0.2)",
       "go": "rgba(0, 173, 216, 0.2)"
     }
   }
   

4. Verify:

   • csharp.cs, fsharp.fs, and visualbasic.vb have a tinted background (custom mapping).
   • python.py and go.go are tinted (language ID fallback).
   • other.txt has no tint (no color configured).
   • Changing a color or setting enabled to false applies immediately, without reloading.
   • Split editors each show their own file's color.
   • Extension matching is case-insensitive, and arrays such as [".cs", ".csx"] work.
   • Colors persist after Developer: Reload Window, and Help → Toggle Developer Tools shows no errors.

If a color does not appear, check the language ID in the status bar and make sure the key in colors exactly matches the name in fileTypes (case-sensitive). Alpha values of 0.1–0.25 keep text readable.

To test the packaged extension, run npm run package, then code --install-extension all-in-one-0.0.1.vsix.