Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    VSCode User Interface Setup Part 2

    Ahmad Awais ⚡Ahmad Awais ⚡
    vscodeVS Code

    In this video, you'll learn a couple of advanced settings for the VSCode User interface. This serves as the second part of the VSCode UI Customization. Most of the stuff shared is optional yet a personal recommendation.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: In the exercise file related to this video, you will find a settings darJSON file. If you take a look at this, you'll find the settings that we have already done to improve the UI of our editor. While I was recording this course, VS Code kept improving. I found a couple of really interesting settings that you would really like.

    Let's say you have a long line of code, and you find yourself dragging right and left. What you would do is you would open command palette by command-shift-P and search for word-wrap and toggling. Now, there's nothing to go left and right. Again, toggle, and now you can go. I like to keep the word wrap on by default. It serves me well.

    For that, you have to go to settings. Search for word wrap, and an edit of word-wrap should be on. Let's just copy-paste it to our UI improvements area. There you go.

    Similarly, how about we go ahead and paste all of these settings. I'll explain one by one what each of this setting is doing. Press Command, to open your settings. Let's add all of these settings in the heading part two. We'll remove this part two heading later on. I'm going to comment all of these settings and we'll go on each of these one by one.

    The first setting is the debug toolbar location. We haven't discussed the debugging in VS Code right now, but once you do, we'll come back to this setting and discuss it. All it does is when you play the debug bar, it will be our debug floating bar here and it docks the debug bar here.

    I tend to use Visual Studio Code in a full screen mode. Whenever there's an update, I open up my work from yesterday, the window does not get restored to full screen by default. This is a really nice setting. What it does is it controls whether a window that exited in full screen mode should restore the same way. I really wanted to set reset to true.

    Then there is the workbench editor tabclose button. Let's open up a file, for example, settings. As you can see, there's a cart button which you can click to close this tab. I hardly ever use this cross button. What I do is I press Command W to close the files.

    By enabling workbench.editor.tabclose button easily you can find it controls the position of editors, tabclose button or disables them when you put it to off. As soon as I save it, now there is no cross button whatsoever. It saves me a bunch of space here in the tabs, and I really like this setting.

    The next setting is the default location of our panel. You can search it by panel location. Panel location by default is inaudible . When you press Command G, this whole area's called the workbench panel. I actually like it when it is on the right side here. Use this button to move it to the right. Drag it a little bit here, and you can again use this button to put it down to the bottom.

    I personally like the workspace panel default location to be set to right. Now, when you reload, your panel should open from the right here. The next setting is it controls whether bold text in the terminal will always use bright NC color.

    For my theme, I found out that this doesn't work really well. I don't really want the bold text in bright NC colors. It basically hurts my eyes, so I just set it to false. Finally, there are no auto-detect UI rules.

    If there is a inaudible file in VS Code, these settings control whether to auto-detect those current tasks or not. I don't really like it. Sometimes, VS Code starts this weird output or inaudible console and starts these inaudible files automatically. I tend to turn these two settings off.

    Now, editor rulers. Let's open up our file. Maybe the index file we were working with previously. You see it's all empty. What you can do is, and search for it here, rulers, and you can enable rulers, which renders vertical rulers after a certain number of monospace characters.

    For example, I am rendering a ruler after 80 characters, 100 characters, and 120 characters. After enabling this particular setting, if you go back to this file, you can see these rulers here. It's basically telling me that here is where I had 80 characters, 100 characters, and if you see very deeply, if I zoom out, we can see these three lines at 80, 100, and 120 characters. See? Back to where we were.