Make spaces act and look like tabs in VS Code

The selection aspect of space-tabulated code is supported with VSCode 1.52 (Nov. 2020) and:

Sticky Tab Stops when indenting with Spaces

If you prefer to indent your code with spaces, there is a new setting called editor.stickyTabStops, which makes VS Code treat cursor movements in leading spaces similar to tabs.

Appearance

You said vscode is:

displaying 4 spaces in my editor

I assume that means you're getting those little Interpunct dot characters coming up like this ····

If you want those to go away, so they appear more consistent with tabs, go into VScode settings (JSON) and enter the following:

"editor.renderWhitespace": "selection" 

Assuming everything else is default, both tabs and spaces should be rendered as regular whitespace. But that alone it doesn't really help, because it doesn't allow you to distinguish nested structures i.e. you can't tell how many levels of indentation you're at.

To fix that, there's 2 things.

1. (minimum) Set indent guides explicitly in your user settings, this will render vertical lines at each indentation level, no matter if the file is using tabs or spaces:

"editor.renderIndentGuides": true 

2. (optional extra) If you want to take it further, there are a few extensions you can try, but the one i recommend is indent-rainbow. There are lots of options for it, but i have mine config'd so after a certain level of indentation it becomes more obnoxious, because i treat it as a code smell i.e. i like to minimize how much i nest if possible.

The end result of doing all this is that tabs and spaces are rendered exactly the same way, and you can't tell the difference unless you have part of your code highlighted:

Behavior

To make the behavior of indentation more consistent, the following should be in your settings if it's not already applied by default:

"editor.detectIndentation": true, "editor.insertSpaces": true, "editor.useTabStops": true 

As for this:

source file in VS Code that is styled with spaces of a specific width (maybe determined by the .editorconfig file)

I don't think this is possible, or at least not natively. You may be able to find/write an extension that can do detection based on tabsize since there is in fact a property called:

"editor.tabSize": 4, 

Not sure if this will help, but you can do selective setting overrides based on filetype, for example:

"[yaml]": { "editor.insertSpaces": true, "editor.tabSize": 2, "editor.autoIndent": "advanced" }