Skip to content

Commit 9a97463

Browse files
authored
Merge pull request #100 from liferay/wincent/comments
docs: add general/comments.md (#96)
2 parents dca8adc + cfa230a commit 9a97463

File tree

1 file changed

+59
-0
lines changed

1 file changed

+59
-0
lines changed

general/comments.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Comments
2+
3+
## JavaScript
4+
5+
### Terminology
6+
7+
There are two types of comments in JavaScript ([called "multi-line comments" and "single line-comments" in the spec](https://tc39.es/ecma262/#sec-comments)):
8+
9+
```javascript
10+
/*
11+
* This is multi-line comment syntax.
12+
*/
13+
14+
// This is single-line comment syntax.
15+
```
16+
17+
Despite their names, it is possible to make a "multi-line" comment that occupies only a single line, and multiple consecutive "single-line" comments can be used to make a message that spans multiple lines:
18+
19+
```javascript
20+
/* Still "multi-line" comment syntax, even though it's one line. */
21+
22+
// And this is still single-line comment
23+
// syntax even though it spans multiple lines.
24+
```
25+
26+
A special variant of the multi-line syntax is [the "JSDoc-style" comment](https://jsdoc.app), which begins with `/**` and may contain [internal "tags"](https://jsdoc.app/about-block-inline-tags.html) beginning with `@`:
27+
28+
```javascript
29+
/**
30+
* This is a JSDoc-style comment.
31+
*
32+
* @see Something else.
33+
*/
34+
```
35+
36+
### Guidelines
37+
38+
- Use JSDoc-style comments (ie. starting with `/**`) for comments that could conceivably be considered _documentation_ — eg. usage instructions, API descriptions etc — for a piece of code. Do this even in repos where we don't actually use any JSDoc tooling ([example](https://github.com/liferay/liferay-npm-tools/blob/764252718584a391f9340e8d3ed2db792dd938fa/packages/liferay-npm-scripts/src/format/substituteTags.js#L16-L22)), or when the "documentation" fits on a single line ([example](https://github.com/liferay/liferay-npm-tools/blob/764252718584a391f9340e8d3ed2db792dd938fa/packages/liferay-npm-scripts/src/format/Lexer.js#L51-L53)).
39+
- It is not required to add JSDoc type tags (eg. `@param` etc), but they may be useful when transitioning from JS to TypeScript because the TypeScript compiler can read them when the proper settings are configured.
40+
41+
* For cases where you want to explain some _internal_ detail of the code (to help the reader understand how it works, but where such explanation wouldn't really belong in any extracted "documentation"), use single-line comment syntax (even for comments that go on for multiple lines). [Examples](https://github.com/liferay/liferay-npm-tools/blob/764252718584a391f9340e8d3ed2db792dd938fa/packages/liferay-npm-scripts/src/format/substituteTags.js#L35-L52).
42+
* Always leave a space after the `//`.
43+
* Start comments with a capital letter.
44+
* In general, end comments with a period, but note that you may wish to omit it if the comment is only one sentence and its role is a "header" or "title" of a section (this is a style rule used in many newspapers and media).
45+
* Use `//` in the trailing position of a line (ie. after code) sparingly, except for the rare (`// eslint-disable-line` case).
46+
* Gotchas:
47+
- Some ESLint directives only work with block comment syntax (eg. `eslint-disable`); while others (eg. `eslint-disable-line` and `eslint-disable-next-line`) work with block and line comments.
48+
49+
## Sass
50+
51+
For comments in SCSS, follow the rules written in the [clay-css contributing documentation](https://github.com/liferay/clay/blob/master/packages/clay-css/CONTRIBUTING.md):
52+
53+
> Comments should generally use the single line syntax, `// comment`, since single line comments are removed by the Sass preprocessor.
54+
>
55+
> Multiline comments, `/* comment */`, should only be used in places where we want to preserve the comment in the CSS output such as copyright text or attribution.
56+
57+
## See also
58+
59+
- [Original discussion of commenting guidelines](https://github.com/liferay/liferay-frontend-guidelines/issues/96) ([\#96](https://github.com/liferay/liferay-frontend-guidelines/issues/96)).

0 commit comments

Comments
 (0)