DEV Community

Kiet Ly
Kiet Ly

Posted on

Write better comments in VS Code

During development, we often add comments to our code as notes.
These can include testing technologies, identifying areas for improvement, waiting for backend data or receiving feedback from mentors, often commenting like this:

form.addEventListener("submit", function (e) {
    e.preventDefault();

    // Validate email required
    // TODO: Improve the add class 'has-error' by using toggle
    if (txtEmail.value === "") {
      if (!txtEmail.classList.contains("has-error")) {
        txtEmail.classList.add("has-error");
      }
      spErrorMessage.innerText = "Email is required";
      spErrorMessage.style.display = "block";
      return;
    }

    // Validate email syntax
    // TODO: Improve the add class 'has-error' by using toggle
    let regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (regex.test(txtEmail.value) === false) {
      if (!txtEmail.classList.contains("has-error")) {
        txtEmail.classList.add("has-error");
      }
      spErrorMessage.innerText = "Valid email required";
      spErrorMessage.style.display = "block";
      return;
    }

    // If success then show popup success
    // Delete this and replace with new function
    showPopup();
  });
});
Enter fullscreen mode Exit fullscreen mode

As you can see, all the comments have the same color. Imagine these comments in a pile of code 😱. It would be difficult to determine which comment describes which part of the code. This could lead to mistakes or confusion. The Better Comments extension was created to address this issue.

Better Comments Extension

This extension will highlight special comments, allowing you to easily distinguish them from other comments

Image of code

If the default color of the extension matches the color of your code editor, you can easily configure the color.

In addition, this extension also helps you to classify and write comments more organized and controlled.

Image of code

Currently, this extension supports almost all programming languages. Give it a try and let me know your thoughts in the comments.
Thank you for reading my article, and have a great day! 🥰

Top comments (0)