Customise VS Code for a project, or per language

VS Code is very customisable, it can cater to (most of) your whims and peccadillos!

You may want something done differently for a specific project or when you are working with a particular language. So, how can you dress VS Code up for the right occasion? 😎

Settings Scope

VS Code provides two different scopes for settings:

• User Settings: Apply to any instance of VS Code you open.
• Workspace Settings: Apply to the current project only. They are stored in <<workspace>>/.vscode/settings.json. These settings can be useful to share with a team to help synchronise efforts!

Workspace settings override user settings.

A VS Code "workspace" is usually just your project root folder. You can also have more than one root folder in a VS Code workspace through a feature called Multi-root workspaces.

Editing Settings

You can open the Settings UI with the keyboard shortcut (Ctrl+,), or by running the Preferences: Open Settings (UI) command.

There is a tab for User and Workspace settings. As soon as you add a workspace setting, it will create the workspace settings.json file for you.

To open the user settings file directly, you can run Preferences: Open Settings (JSON) command. It has intellisense for autocompletion, you can look at this settings list to get more familiar with the options.

You can check out the User and Workspace Settings User Guide if you want to dig deeper.

Language-specific Settings

To create some language-specific settings, you need to add a language entry to the user or workspace settings.json. In a language entry, you specify an array of language IDs as a property, and supply it with an object with the settings to override as key-value pairs.

{
    "editor.tabSize": 2,
    "[python]":{
        "editor.tabSize": 4,
    }
}

In the example above, the setting for all languages is to have a tabsize of 2, but python has a tabsize of 4.

You can change any setting you want on a per language basis. However, some built-in features have a setting that targets specific languages. One such example is Emmet.

By default, Emmet is enabled for html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus files. If you want to enable it for more languages, you need to set the following:

"emmet.includeLanguages": {
  "vue-html": "html",
  "javascript":"javascriptreact"
}

This enables Emmet for Vue and React.

There is a bug for including Emmet support for markdown. The workaround is ensure that the excluded language list is empty, as per snippet below.

"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
  "markdown": "html"
}

Extensions also may have some language-specific settings, which you may or may not want to use.

For example, you may want to use Prettier as your Formatter for all languages, except markdown. Prettier does not do a great job with markdown, so you may want to consider this! 😅

You can choose another Formatter for markdown instead.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[markdown]": {
    "editor.defaultFormatter": "robole.marky-formatter"
  }
}

Or you can disable prettier for markdown. This disables formatting for Markdown altogether.

  "prettier.disableLanguages": ["markdown"],

Tasks

You can also configure tasks on a per project basis. A tasks.json will be added to the .vscode folder when you configure a new task.

VS Code auto-detects tasks for the following apps: Gulp, Grunt, Jake, and npm. However, you may want to create a custom VS Code task for a project that you want others to use, it could be for something like setting up the environment correctly, or running tests.

You can check out the Tasks User Guide to learn more.

Banner Photo by Dimitri Houtteman on Unsplash

Comments

[Camilo Martinez]

Excellent information, not a common knowledge.

I think can be complemented, with this way to create VSCode flavors. Hope it hel others.

VSCode - Node.js Flavored

Camilo Martinez ・ Sep 24 ・ 5 min read

#vscode #productivity #node #testing

[Rob OLeary]

Thanks Camilo. Your article is well-written.

You shouldn't need to disable an extension very often. Extensions are typically only active based on the language you are using. An extension author could decide to do something else of course. In the package.json of the extension, it is specified in:

"activationEvents": [
    "onLanguage:markdown"
  ],

I understand why people would like to have a separate configuration for a language, but my guess is a lot of people would be satisfied with one config with some language-specific settings. I don't use VS Code for every language I use, but I have yet to find a situation where I am tempted to make a separate language config.

[Camilo Martinez]

Thanks Rob to take the time to read it.

I didn't know about the activationEvents it will be good if VSCode shows those extensions that are not in use in another state.

I agree with you, it's not a common practice jump between languages or uses different Editors/IDEs.

[Rob OLeary]

Yes, it would be nice to see the state of an extension (active/inactive). Even if the activation events were written on the marketplace page, it would be better. I uninstalled a few extensions because they were active too much without good reason.

Sometimes, you see in the status bar when an extension is loading. That is the only sign you can see.

[Robert Wildling]

Thank you so much again, Rob! – I used to think that workspaces were specifically designed to be used with projects with multiple roots ("Add Folder to Workspace"). This made me think that settings would interfere, because what happens if one project uses tabs, but the other spacings?
I have to admit I've never tried, but I will do so today. You are quite motivating! :-)

[Karen Efereyan]

Very nice, Rob. Thank you

[Gökay Okyay]

You can create different config files per language! One of the best side’s of vscode. Check out my article too! Nice job 🥳

[Rob OLeary]

Thanks for sharing Gökay. I was aware of being able to use multiple configs, but it's not something I would reach for personally. One config with a few language variations covers all of my use cases.

[Rob OLeary]