Share via

A Very Basic Question about VS Code

rhhutchins4292 0 Reputation points
2025-05-12T20:50:06.5666667+00:00

I am 83 years old. I was a mainframe (COBOL/BAL) programmer in the early '70s and progressed through the ranks, retiring as CIO/CTO for a bank. I retired in 2001.

I am trying to build a website. I'm self taught. I use VS Code for HTML/CSS/Javascript, although I've done very little with the latter. I have a website hosted that consists solely of HTML/CSS content. It is passive, not interactive, in that the content can only be scrolled through. I realize that there are apps that will generate code for websites but I prefer to use the core tools directly both to gain more control and to keep my mental faculties working; therefore I'm learning HTML, CSS, javascript and VS Code and Git and DEVTOOLS for Chrome.

This information is intended to inform the reader that I am a neophyte and have very basic questions. If this is not the right forum for my questions, please let me know.

I was referred to this forum from the Microsoft Community forum.

I have 3 questions at the moment:

  1. I have Live Server installed in VS Code. After a complete reinstall, right-clicking and choosing "Open with Live Server" causes a directory to be displayed instead of displaying what is coded in the HTML/CSS. I've searched and found information saying something about my index.html file not being available. I don't understand this because my index.html file, other HTML and CSS files are in the same directory they've always been. My guess is that there is a setting in VS Code that I need to change. If so, I need to know the setting (explicitly) that needs to change and the value to set it to. There are so many settings available and I understand very few of them. I don't want to make changes and make the kind of mess a newb can make. FWIW, I do have the VS Code File Server extension browser option set to open Chrome. That is where the file directory displays.

If the index.html file is not the problem, I have no other clue and would greatly appreciate direction.

  1. I had Colorful Comments extension installed and working before the complete reinstall mentioned above. It was set properly and had settings to make different types of lines appear in different colors. I've reinstalled Colorful Comments extension but it doesn't change the color of any code. Reading its information it appears that I need to add its settings to settings.json. I copied the settings shown in the extension information and pasted them into settings.json. I still don't have any effects on the color of lines displayed. I have restarted the VSC. I even rebooted and restarted.

I need more explicit instructions.

  1. There is a dark band that I think is called the ruler that displays in VSC. Scrolling works only below that ruler. I see no value in the ruler (given my current skillset) and would like to get rid of it. I can find no setting in VSC that I can identify that would allow me to remove it. Is it possible to remove it? If so, what setting do I need to change?

Thanks for your patience and for any guidance you can give me.

Developer technologies | Visual Studio | Setup
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Surya Amrutha Vaishnavi Lanka (INFOSYS LIMITED) 1,725 Reputation points Microsoft External Staff
    2025-12-16T14:58:50.7366667+00:00

    Thank you for the detailed explanation. Based on what you described, here are clear answers.

    1.Live Server showing a directory listing instead of your page

    This behavior is not caused by a VS Code setting. It is how Live Server works when it cannot resolve a default document.Common causes of the issue is you opened a parent folder instead of the folder that actually contains index.html. The file is named Index.html, index.htm, or index.html.txt

    Select the folder that directly contains index.html. Right-click inside the file and open with Live Server.

    If index.html is present and Live Server still shows a directory listing, then Live Server is pointing at the wrong folder. No additional settings need to be changed.

    2.Colorful Comments extension not changing colors

    Copying extension settings into settings.json will not work unless, the extension is enabled or the file type is supported and the color theme allows token color overrides. Clarification for this If colors still do not change, the most common reason is that your current theme overrides comment token colors. This is expected behavior, not a bug.

    3.Dark horizontal band (the “ruler”) in the editor

    We can remove by setting editor rules to an empty value.This completely removes the vertical guide. No restart required.

     

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.