Extend VSCode workspace settings from another file
Tags: vscode, webdev, javascript, typescript
Published: 2023-07-16 13:12:06

## TL;DR
I created a VSCode extension, [Tabaqa](https://marketplace.visualstudio.com/items?itemName=KalimahApps.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:
```json
{
	"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,
```json
{
	"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:

```json
{
	"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`:

```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.


{% cta https://marketplace.visualstudio.com/items?itemName=KalimahApps.tabaqa %} Tabaqa on VSCode {% endcta %}

{%embed https://github.com/kalimahapps/tabaqa %}

👥 **Connect**
Twitter: [@kalimahapps](https://twitter.com/kalimahapps)