Commenting Examples

Code commenting describes the purpose of code.

Code commenting is used to describe the purpose of code, and they are intended to make code easier to understand by providing additional context or explanation.

  • Commenting makes code more readable.
  • Comments do not appear in the browser, but they can help document your source code.
  • Comments should be short clear and use concise language.
  • Comments on your classes, methods, functions and CSS.

Use of Better comments VS code extension primarily focuses on improving the commenting workflow by offering enhanced syntax, templates, toggling options and other related features. They don’t automate the process of adding comments but rather provide tools to make it more efficient and structured.

null

HTML

You can add comments to your HTML source by using the following syntax -


                                                        
                                                        
                                                            <!-- Write your comments here -->
                                                        
                                                            

                                                        
                                                        
                                                            <p>This is paragraph </p>
                                                        <!-- <p>This is another paragraph </p> -->
                                                        
                                                            

Example

CSS

A CSS comment is placed inside the <style> element or CSS file, and starts with /* and ends with */ -


                                                        
                                                        
                                                            <style> 
                                                        /* This is a single-line comment */
                                                         p { color: red; }
                                                        </style>
                                                        
                                                            

                                                        
                                                        
                                                            <style> 
                                                        /** 
                                                        * This is
                                                        * a multi-line
                                                        * comment 
                                                        */
                                                        p { color: red; }
                                                        </style>
                                                        
                                                            

SCSS


                                                        
                                                        
                                                            // Computes an exponent.
                                                        // @param {number} $base
                                                        //   The number to multiply by itself.
                                                        // @param {integer (unitless)} $exponent
                                                        //   The number of `$base`s to multiply together.
                                                        // @return {number} `$base` to the power of `$exponent`.
                                                        @function pow ($base, $exponent) {
                                                          $result: 1;
                                                          @for $_ from 1 through $exponent {
                                                            $result: $result * $base;
                                                          }
                                                          @return $result;
                                                        }
                                                        
                                                            

Single line comments will not render in code


                                                        
                                                        
                                                            /** 
                                                        * This is
                                                        * a multi-line
                                                        * comment 
                                                        */
                                                        p { color: red; }
                                                        
                                                            

Multi-line comments - will not render when compressed


                                                        
                                                        
                                                            /*! 
                                                        * This is
                                                        * a multi-line
                                                        * comment 
                                                        */
                                                        p { color: red; }
                                                        
                                                            

Multi-line comments - will render when compressed

Typescript/Lit component


                                                        
                                                        
                                                            export class Statistics {
                                                          /**
                                                           * Returns the average of two numbers.
                                                           *
                                                           * @remarks
                                                           * This method is part of the {@link core-library#Statistics | Statistics subsystem}.
                                                           *
                                                           * @param x - The first input number
                                                           * @param y - The second input number
                                                           * @returns The arithmetic mean of `x` and `y`
                                                           *
                                                           * @beta
                                                           */
                                                          public static getAverage(x: number, y: number): number {
                                                            return (x + y) / 2.0;
                                                          }
                                                        }
                                                        
                                                            

JavaScript


                                                        
                                                        
                                                            // Change heading:
                                                        document.getElementById("coHeader").innerHTML = "My First Page";
                                                        
                                                            

Single line comments


                                                        
                                                        
                                                            /*
                                                        The code below will change
                                                        the heading with id = "coHeader"
                                                        and the paragraph with id = "coParagraph"
                                                        in my web page:
                                                        */
                                                        document.getElementById("coHeader").innerHTML = "My First Page";
                                                        document.getElementById("coParagraph").innerHTML = "My first paragraph.";
                                                        
                                                            

Multi line comments