VSCode Preview Mode

What is this?

So you know when you're working in VSCode and you click on your base.html file which opens in the tab, and you then need to your base.js file, and noticed that if you didn't change anything in your base.html file, your base.html file is now a base.js file?

Yeah me too! So it turns out that this is all super intentional and "by design", which has it's merits and frustrations.

Why?

I get that some people like it, and I do like it too for when you open the wrong file, or just want to skim over the contents of the file to remind yourself of layout or structure etc.. It can be quite helpful.

How to avoid Preview Mode.

The easiest way without having to change your settings is to simply double-click the file. I know 🤦alt text: face palm

So when you single click a file in VSCode the file name is italicized, this indicates that the file is open in Preview Mode, when you double-click the file you'll see it opens with a standard font and this indicates that it is not open in Preview Mode.

In the below example: The base.js file is open in preview mode, which means that if I single click on base.css file, the base.js file now becomes the base.css file.

Update settings

As you can see this is such a secret they've put instructions in the settings for this! 🤣alt text: rolling on the floor laughing

Alternative is to use the ctrl+p keyboard shortcut and search for the file name, but if you have a few files like views.py files, this can become a hassle too depending on the size of the project.

Recap:

Double-click files to not open them in Preview Mode