Add explanatory comments for complex logic, special cases, or non-obvious code behavior. Comments should explain the “why” behind the code and “what” specific conditions or syntax patterns are being handled.
When code involves:
Include comments that:
Example from the discussions:
// Prettier does not officially support stylus.
// But, we need to handle "stylus" here for printing a style block in Vue SFC as stylus code by external plugin.
// https://github.com/prettier/prettier/pull/12707
if (lang === "stylus") {
return inferParserByLanguage("stylus", options);
}
Or for complex conditions:
// For example, there is the following key-value pair:
// "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})"
// "only screen and (max-width: #{map-get($grid-breakpoints, " is a "value-string"
// and "sm" is a "value-word"
// We should not insert any spaces and lines here.
if (isMapItemNode) {
const isPartOfValue = node.groups?.[1]?.type === "value-colon" && i > 1;
// ...
}
Avoid over-commenting simple or self-explanatory code, but err on the side of clarity for complex logic that future maintainers will need to understand.
Enter the URL of a public GitHub repository