I have spent more than 7 years working as a web developer and during this journey I have learnt lot of practises that makes life of a developer easy. In this series of blog post I intent to share some of these learnings. These posts will be a combination of words and illustrations. This will also help me get better at drawing tech drawings and at the same time improve the reading experience.

This post will largely cover VS Code editor flow but the practise in general is not limited and can be easily adopt for any other code editors. I have selected VS Code because of my own personal preferences.

VS Code screen splits

Working as a web developer means, you need to access multiple files such as HTML, CSS, JS/TS. You can create one single window for each but this would mean continuous shifting of windows in between and over a period of time becomes really annoying and troublesome. Especially all modern JS frameworks/libraries demand separate files for styling and markup.

For example if you are working with angular, you would have separate TS, HTML & CSS files. So, as you can see from the above image, I divided my screen in 3 different sections. In this manner I can inspect all 3 files without having to switch between them.

This is also very useful if you have a habit of opening multiple files during the development. With the same setup I can now have multiple files in all 3 sections.

How to split the screen

All popular code editors have some option of splitting the screen. I am using VS Code here but the step will be somewhat similar in other text editors too.

Step 1: Click on “view” from the top menu.

Step 2: Select Editor Layout > Split Up/Down/Left/Right

Where to split and how to distribute the spacing

Now the next important thing with this setup is to determine which section will be placed on the left or which one on the right. The placements of the screens should be according to your benefit. For example if you are a left-handed person you might wish to keep the larger section on the left. For a right-handed person this might be the opposite.

One more adjustment you should consider while arranging your screens is the frequency of usage. Generally for a web developer JS/TS files are more frequently visited than CSS. You can choose to place the CSS files at the bottom with less space than others.