TS · maintainability

←Previous Next→

no-frontend-comments

Express frontend behavior through code instead of prose comments.

noFrontendComments Rule source Tests Catalog JSON

Why

Frontend comments can drift from executable behavior and conceal names, types or structure that should communicate the same information.

Fix

Use clear names, types, helpers and assertions, then remove the comment. Move tool settings into their owning configuration where supported. Whitespace-only single-line comments can be replaced with a space; review all other comments and their contracts manually.

Examples

Before — flagged Keep a separating space when removing an empty comment

src/helper.tsx

export function identity(value: number) {
  return /**/ value;
}

After — preferred Preserve the return expression without a comment

src/helper.tsx

export function identity(value: number) {
  return value;
}

Autofix output

src/helper.tsx

export function identity(value: number) {
  return value;
}

Before — flagged Express view behavior in code

src/view.tsx

// Show current status
export const View = () => <p>Ready</p>;

After — preferred The view expresses its behavior

src/view.tsx

export const View = () => <p>Ready</p>;

Before — flagged A plain helper belongs to its frontend package

package.json

{ "private": true, "dependencies": { "react": "19.2.0" } }

src/helper.ts

// Frontend helper
export const ready = true;

After — preferred The helper expresses its behavior in code

package.json

{ "private": true, "dependencies": { "react": "19.2.0" } }

src/helper.ts

export const ready = true;

Options

{
  "additionalProperties": false,
  "properties": {
    "allFiles": {
      "description": "Check comments without requiring frontend framework ownership.",
      "type": "boolean"
    }
  },
  "type": "object"
}