From the course: JavaScript: Best Practices for Code Formatting

Use single-line syntax for single lines - JavaScript Tutorial

From the course: JavaScript: Best Practices for Code Formatting

Start my 1-month free trial

Use single-line syntax for single lines

- [Instructor] JavaScript has two different syntaxes for creating comments. To create a single line comment, you type two slashes. Anything after those characters in that line is considered a comment and is ignored by a parser. You can theoretically create a single line comment that's as long as you want and it's readable if you turn on word-wrap in your editor. However, it's standard practice to limit line length in code to ensure that word-wrap isn't needed to view content. For longer comments then, you need to use multiple lines. Multiple line comments have their on syntax, starting with slash star and ending with star slash. Anything enclosed by those sets of characters is ignored. In theory, you could simply mark each line of a multi-line comment as a single line comment. This would have the same practical effect as creating a multi-line comment. However, there's a subtle distinction. Using multiline comment syntax indicates clearly, from the start, that the following lines are part of a multiline comment. Using the appropriate syntax also provides formatting that makes it easier for you and other developers to quickly see how long a multi-line comment is, where it starts, and where it ends. By contrast, a set of single line comment markers can more easily blend into the surrounding code. I'm going to create a multiline comment at the start of my app.js file. Now, I want the use strict statement to come before any statements in my code. But it's pretty common to include a comment at the start of the file, giving basic information about its contents. And because a comment is ignored by parsers, putting it before the use strict statement isn't a problem. So, I'll add my comment just above the use strict statement. So, I'll add my name, and the name of the course, (keyboard typing) and "LinkedIN Learning". To make this a multiline comment, I'll add a blank line before and add slash star, and then on the line after, I'll add star slash. And then another blank line. And I'll add one more touch. I'll indent the text in that comment to make it stand out a little bit. And now I can see really clear delineation between the start and the end of the comment. I can enforce this style with eslint as well. Using the multiline comment style rule. In my eslintrc file, I'll add a new key value pair to the rules object. The name is multiline, dash comment, dash style. And notice after I've typed that, that I've got a different coloring going on here than I did for my other key. I've also got and error here, 'cause it's expecting a comma, so, I have hyphens in my key name here and in order for that to work as a key name, I need to quote it so that it's parsed correctly. So, that results in a key coloring in my editor that's different from the other key which isn't quoted, but they're both interpreted the same, as keys. So then, for the value of this, I specify an array. And first, I want severity level, which is error, because I want the editor to throw an error. And then, I need to specify which of the styles I'm using. So, there's a set of key words for different styles for multi-line comments and I've chosen bare-block, which I just using slash star at the beginning and star slash at the end and that's it. So, put comma at the end and we'll save those changes. And then, back in my app.js file, let's test this out. So, I want to take out the multiline comment formatting. In visual studio code, I can select all those lines and press Alt shift A, on a Mac to turn that back into plain text and then, if I select all those lines, I want to see what happens if I format this as a series of single line comments. So, in visual studio code, I can say command slash on a Mac and it's a comment, I can see in green but I also have error underlining and when I hover over that, it very specifically mentions the multiline comment style rule. So, I'm just going to go ahead and undo the last two things I did; get back to that multi-line comment style and now, I don't have that error anymore. So, I'm enforcing a code style that ensures that my multi-line comments stand out more clearly from the codes that surrounds them. And that helps me, whenever I work with my code, and it helps other developers that might need to read through it, as well.

Contents