DEV Community

Cover image for Customise VS Code for a project, or per language
Rob OLeary
Rob OLeary

Posted on • Originally published at roboleary.net

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.

settings ui

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,
    }
}
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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

  "prettier.disableLanguages": ["markdown"],
Enter fullscreen mode Exit fullscreen mode

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

Discussion (9)

Collapse
equiman profile image
Camilo Martinez

Excellent information, not a common knowledge.

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

Collapse
robole profile image
Rob OLeary Author • Edited

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.

Collapse
equiman profile image
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.

Thread Thread
robole profile image
Rob OLeary Author • Edited

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.

Collapse
rowild profile image
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! :-)

Collapse
developerkaren profile image
Karen Efereyan

Very nice, Rob. Thank you

Collapse
gokayokyay profile image
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 🥳

Collapse
robole profile image
Rob OLeary Author

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.

Collapse
robole profile image
Rob OLeary Author • Edited

custom