Project structure

I have the following project structure:

/
| - .vscode/
| - - - - settings.json
|
| - packages/
| - - - - app/
| - - - - - - index.js
| - - - - - - package.json
| - - - - website/
| - - - - - - .vscode/
| - - - - - - - - settings.json
| - - - - - - index.html
| - - - - - - styles.scss
| - - - - - - package.json
|
| - package.json
|

As you can see, I have two vs-code setting files: One at the root, and another one inside the website workspace.

Root vs-code settings

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "editor.formatOnSave": false,
  "editor.tabSize": 2,
  "editor.rulers": [
    80,
    120
  ],
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.validate": [
    "javascript"
  ],
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "javascript.updateImportsOnFileMove.enabled": "always",
}

Website workspace vs-code settings

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.configFile": ".stylelintrc",
  "stylelint.snippet": [
    "css",
    "scss"
  ],
  "stylelint.validate": [
    "css",
    "scss"
  ],
  "stylelint.packageManager": "yarn"
}

Questions

I know that /.vscode/settings.json is merged with my vs-code default settings. But...

1. Is /packages/website/.vscode/settings.json merged with /.vscode/settings.json

2. As you can see, there is some code repetition in both configs:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },

and

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },

If I remove "source.fixAll.eslint": true, from the /packages/website/.vscode/settings.json, will editor.codeActionsOnSave.source.fixAll.eslint be extended from /.vscode/settings.json?

Project structure

I have the following project structure:

/
| - .vscode/
| - - - - settings.json
|
| - packages/
| - - - - app/
| - - - - - - index.js
| - - - - - - package.json
| - - - - website/
| - - - - - - .vscode/
| - - - - - - - - settings.json
| - - - - - - index.html
| - - - - - - styles.scss
| - - - - - - package.json
|
| - package.json
|

As you can see, I have two vs-code setting files: One at the root, and another one inside the website workspace.

Root vs-code settings

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "editor.formatOnSave": false,
  "editor.tabSize": 2,
  "editor.rulers": [
    80,
    120
  ],
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.validate": [
    "javascript"
  ],
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "javascript.updateImportsOnFileMove.enabled": "always",
}

Website workspace vs-code settings

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.configFile": ".stylelintrc",
  "stylelint.snippet": [
    "css",
    "scss"
  ],
  "stylelint.validate": [
    "css",
    "scss"
  ],
  "stylelint.packageManager": "yarn"
}

Questions

I know that /.vscode/settings.json is merged with my vs-code default settings. But...

1. Is /packages/website/.vscode/settings.json merged with /.vscode/settings.json

2. As you can see, there is some code repetition in both configs:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },

and

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },

If I remove "source.fixAll.eslint": true, from the /packages/website/.vscode/settings.json, will editor.codeActionsOnSave.source.fixAll.eslint be extended from /.vscode/settings.json?

• javascript
• json
• visual-studio-code
• monorepo

2 Answers 2

At the time of this writing, VS Code settings files cannot reference other settings files to extend/inherit settings from them, and they do not automatically extend/inherit settings from .vscode/settings.json files in parent folders.

See the highly popular feature request issue ticket on the VS Code GitHub repo: Add ability to extend from other settings files #15909. ^{_{You can show your support for the issue ticket by giving a thumbs up reaction to the issue. But please don't make a "me too" ment. "me too" ments generally e off as annoying to repo maintainers because they clutter up discussion and don't contribute anything of significant value.}}

As you already know, the settings that apply to a workspace use the worspace folder's .vscode/settings.json file and fall back to the user's settings.json file. But there also a middle layer between that: If you use multi-root workspaces, the middle layer is the multi-root workspace's .code-workspace file, where you can put settings that apply to all workspace roots in the multi-root workspace.

Bonus info:

• There's also this issue ticket: Allow folder settings to cascade / be inherited #111884, which for some reason got close as a duplicate of this one: Monolithic structure, multiple project settings #32693, which seems to be more about a feature like multi-root workspaces.

• The relatively newer "Profiles" feature has a somewhat anaolgous/related feature request here: Profiles: Extend from Default Profile #156144. Update: there is now a "partial profiles" feature in VS Code Insiders. (More info here).

There are only 3 ways how to configure VSCode. Order is by precedence (first one have highest priority):

1.) Project .vscode/settings.json

2.) Project workspace e.g. .vscode/team.code-workspace

3.) VSCode user settings.json

As you can see we store team.code-workspace also in .vsode folder of project. We are sharing team settings in mited file .vscode/project.code-workspace and if developer need some project-specific settings just for himself he can use gitignored .vscode/settings.json which has precedence.

So if you want to use in project some option with another value then default in user settings.json you must override it in project *.code-workspace. If you want to use in project for some option with another value then in project *.code-workspace. you must override it in project settings.json