An Interest In:
Web News this Week
- September 24, 2024
- September 23, 2024
- September 22, 2024
- September 21, 2024
- September 20, 2024
- September 19, 2024
- September 18, 2024
VS Code - Sticky code sections for improved contextual browsing (sticky scroll)
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! Understanding a codebase entails jumping between files and code sections which can get disorientating quickly! 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.
Establishing your current context in VS Code
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.enabled
setting) 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.
The sticky setting
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!
Here is what it looks for a JavaScript file within a fetch
closure:
You can see 2 function definitions are stuck as the top 2 lines. As you scroll down whenever there is a nested scope such as a loop, it's declaration line will become stuck also. There are some exceptions, I noticed for JavaScript a plain old for
loop does not stick, but a forEach()
does!
To get this behaviour for all languages, you can add the following to your settings.json
:
"editor.stickyScroll.enabled": true,
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:
"[html][xml]": { "editor.stickyScroll.enabled": false, },
You can limit the number of sticky lines with the editor.stickyScroll.maxLineCount
setting. The default value is 5.
Original Link: https://dev.to/robole/vs-code-sticky-code-sections-for-improved-contextual-browsing-sticky-scroll-1o6
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To