We read more code than we write. It is worthwhile considering if you have VS Code optimized for reading code. A telltale sign that things are subpar is if you find yourself scrolling up and down to re-establish the context of the code you are examining, absentmindedness excepted! Where am I again? 😵💫
One impactful aid is sticky headings that outline the scope of your position in a file. Let's see if it makes a difference!
First, let's take a quick look at what aids VS Code provides for establishing your current context.
VS Code provides a number of visual aids to communicate where you are and what scope you are operating in:
- The current file you have opened has the file name on the editor tab and in the titlebar,
- The minimap shows your position in the current file in a floating graphical map,
- The Explorer pane in the sidebar shows you the filetree of your workspace with your current file highlighted,
- There are coloured brackets pairs and colored guidelines that outline the extent of scopes,
- You can have breadcrumbs (
breadcrumbs.enabledsetting) that outline the scope of your position within the current file.
The bit for me that is not done well is having an overview of my scope within a file - what is the scope of the code I am currently examining? I find that breadcrumbs are crumby (pardon the pun) for recognizing the current scope in some languages. The breadcrumb trail becomes too long and text gets truncated.
There is a nice setting called
editor.stickyScroll.enabled that pins lines to the top of a file to give an overview of the current scope. Let's browse a HTML file with the setting enabled and see how it works. As you scroll down, every unterminated element has the line with its opening tag pinned as a sticky heading:
This displays your current context in an easy to digest way. You will really appreciate it when you have messy HTML files!
for loop does not stick, but a
To get this behaviour for all languages, you can add the following to your
So far, I like to have this in every language I use. If you don't want it for a particular language, you can disable it using the multiple language-specific syntax. For example, the following disables sticky scrolling for HTML and XML:
You can limit the number of sticky lines with the
editor.stickyScroll.maxLineCount setting. The default value is 5.