Use descriptive, accurate identifiers that follow established conventions and maintain consistency throughout your codebase. Variables, parameters, and properties should clearly indicate their purpose and content.
Guidelines:
// Bad
textarea.evaluate((event) => parseFloat(event.style.height));
// Good
textarea.evaluate((textareaElement) => parseFloat(textareaElement.style.height));
// Bad
demoData.relativeModules.reduce((prev, curr) => ({ ...prev, [curr.name]: curr.content }), {});
// Good
demoData.relativeModules.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.content }), {});
// Bad
interface TabsContextType {
tabsValue?: TabsProps['value'];
}
// Good
interface TabsContextType {
value?: TabsProps['value']; // Standard name when paired with onChange
}
// Bad: Mixing terms for the same concept
renderTags?: (value: Value[], getTagProps: AutocompleteRenderGetTagProps) => React.ReactNode;
// Good: Use consistent terminology
renderItems?: (value: Value[], getItemProps: AutocompleteRenderGetItemProps) => React.ReactNode;
// Less clear
const hiddenSiblings = getHiddenSiblings(container);
// More clear
const hiddenElements = getHiddenElements(container);
Consistent naming improves code readability, maintainability, and helps prevent bugs from misinterpreting a variable’s purpose.
Enter the URL of a public GitHub repository