#DevHack: language-specific settings in a VSCode extension

When working with Visual Studio Code and different types of languages, you might want to change some settings only for one specific language.

In my case, this was what I wanted to achieve for Markdown. VSCode is my primary editor, which I use for coding and writing this article. I tried to optimize it for writing blog posts, like increase the line height, different font, and more.

The manual approach

You can add Language-specific settings in VSCode, by opening your settings.json file and specifying a language property name. You do this by using the square brackets [] and writing the language ID you want to target.

Show image

In my case, I went for the following settings for my Markdown-specific project settings:

1
{
2
  "[markdown]": {
3
    "editor.fontFamily": "iA Writer Duo S, monospace",
4
    "editor.fontSize": 14,
5
    "editor.lineHeight": 26,
6
    "editor.wordWrap": "wordWrapColumn",
7
    "editor.wordWrapColumn": 64,
8
    "editor.lineNumbers": "off",
9
    "editor.quickSuggestions": false,
10
    "editor.minimap.enabled": false
11
  }
12
}

The extension approach

To achieve the same from within your extension, you will have to use the getConfiguration method. You usually use the getConfiguration method to retrieve the config settings of your extension by specifying the section name. When you want to do a language-specific setting, you need to set an empty string for the section name and specify the languageId. The looks as follows:

1
const config = vscode.workspace.getConfiguration("", { languageId: "markdown" });

Once you have the config object and want to set a new setting value, you use the update method as follows:

1
/**
2
 * @param section Configuration name.
3
 * @param value The new value.
4
 * @param configurationTarget If `false` it will update the workspace its settings.
5
 * @param overrideInLanguage Specify if you want to update a language-specific setting
6
 */
7
config.update("editor.fontSize", 14, false, true);

You can use the get method as you would normally use it:

1
const fontSize = config.get("editor.fontSize");