
Standardize Naming Conventions
Naming conventions are an essential part of writing clean and maintainable code. With consistent naming conventions, it allows developers to more quickly understand and navigate through the codebase. Naming things is definitely hard, but there are some things you can consider to make it easier.
Choose a Language
English is the most common language used in programming, but it may not be the best choice if most of your team speaks a different language. Choose a language that is commonly used in your team and stick to it.
/* Bad */
const 名字 = 'Alan'
const lastName = 'Yang'
/* Good */
const firstName = 'Alan'
const lastName = 'Yang'
Choose a Casing
Depending on the programming language, there are different traditional casing conventions. Pick a convention and stick to it.
/* Bad */
const refresh_count = 0
const shouldRefresh = true
const SET_REFRESH_COUNT = () => {
/* Return refresh count */
}
someComponent.tsx
another_component.tsx
/* Good */
const refreshCount = 0
const shouldRefresh = true
const setRefreshCount = () => {
/* Return refresh count */
}
SomeComponent.tsx
AnotherComponent.tsx
Use Intuitive and Descriptive Names
When naming things, it is important to try to use names that are easy to understand and describes their purpose.
/* Bad */
const pc = () => {
/* Return post count */
}
const a = pc()
const b = a > 10
/* Good */
const getPostCount = () => {
/* Return post count */
}
const postCount = getPostCount()
const hasPagination = postCount > 10
Do Not Use Contractions
Do not sacrifice readability for brevity. Contractions can be confusing and make code harder to understand.
/* Bad */
const clkEvts = 0
const MenuBtn = () => {
/* Button component */
}
/* Good */
const clickEvents = 0
const MenuButton = () => {
/* Button component */
}