Extend VSCode workspace settings from another file

TL;DR

I created a VSCode extension, Tabaqa, to enable extending workspace settings from another source.

---

One of the great features of the VSCode is that you can customize the settings of the workspace. This is usually done by adding a setting.json file inside .vscode folder.

However, this causes few problems. For example if you push your project to a git repository and commit settings.json file, others who pull the code will have to use the same settings as you do.

Obviously they can customize the settings to their preferred way, but this means that they have to push the new changes to the repo (and change it for everyone else) or make sure they don't push it every time they add a new commit.

Another issue is when you have a monorepo. Typically you would have different projects adjacent to each other. Even though you might have a slight different settings for each project, you still need to duplicate all the settings across all projects.

These approaches well add extra time for maintenance and become a distraction from working on the project itself.

This is why I developed this extension, Tabaqa. It means layer in Arabic. The extension helps extending settings either from a parent folder, a file in the workspace or from a URL.

Getting started

The quickset way to add settings to your workspace is to create a file named tabaqa.json and place it inside the root .vscode. Create it with this content:

{
    "extends": "https://raw.githubusercontent.com/kalimahapps/configs/main/.vscode/settings.json"
}

Sidenote: I create a repo with settings that I use regularly. You can find it here: https://github.com/kalimahapps/configs/tree/main/.vscode. The URL above is referencing that repo.

If you save tabaqa.json file and restart VSCode, you will see that settings.json is created with the settings pulled from that URL. The settings will be applied to the currently opened workspace.

But what if you wanted to change some of these settings? You can add the changes to settings property inside tabaqa.json. For example,

{
    "extends": "https://raw.githubusercontent.com/kalimahapps/configs/main/.vscode/settings.json",
    "settings": {
        "editor.formatOnPaste": true
    }
}

The extension will pull the settings from the remote repo, apply editor.formatOnPast and update the workspace settings.

You can also extend from a file inside your project:

{
    "extends": "../path/to/file.json",
    "settings": {
        "editor.formatOnPaste": true
    }
}

Nested folders

Another way to extend settings is to inherit them from another tabaqa.json file up the folders tree. This is the default behavior. If you wanted to opt-out you can add root: true to tabaqa.json:

{
    "root": true,
    "extends": "../path/to/file.json",
    "settings": {
        "editor.formatOnPaste": true
    }
}

This will signal to the extension to stop searching up the tree and populate the settings at this level.

Tabaqa on VSCode

kalimahapps / tabaqa

Extendable and nested settings for VSCode

Tabaqa

Extendable and nested settings for VSCode

NOTE: Please be aware that this extension updates settings.json file. If you have any custom settings, please make sure to backup your settings.json file before installing this extension.

Extend VSCode settings from a parent folder, another file or a url. You can also nest settings by adding a tabaqa.json file inside a folder. The extension will look for the file and apply the settings to the current workspace.

How does it work?

The extension looks for a file names tabaqa.json inside the top level .vscode folder. If the file is found, it will read the file and apply the settings to the current workspace. The extension will inherit the settings from all tabaqa.json files up the folder tree until it reaches the root folder (or if root: true has been set).

See this folder structure as an example:

├── .vscode
│   └─ tabaqa.json

…

View on GitHub

👥 Connect
Twitter: @kalimahapps