Always use descriptive variable, parameter, function, and constant names that clearly convey their purpose and behavior. Avoid single-letter variables or abbreviations except in well-established contexts like loop counters.

Why?

Examples:

❌ Poor naming:

const s = this.selection.value;
if (s) {
  for (let c of this.state) {
    if (c.source === s.source && c.index === s.index) {
      this.selection.next(c);
      break;
    }
  }
}

✅ Good naming:

const selection = this.selection.value;
if (selection) {
  for (let connection of this.state) {
    if (connection.source === selection.source && connection.index === selection.index) {
      this.selection.next(connection);
      break;
    }
  }
}

When naming similar functions, ensure the names clearly differentiate their behaviors:

// Names clearly indicate different purposes
shouldLoadPluginInFrontendSandbox()  // Performs HTTP calls and checks
isPluginFrontendSandboxEligible()    // Performs faster local checks

For UI elements and parameters that might conflict in shared namespaces, use prefixing conventions:

When temporarily versioning methods (e.g., with numeric suffixes), document when and how they will be renamed:

// TODO: Remove the '2' suffix after the feature flag is removed
applyLayoutStylesToDiv2() { ... }