Repository navigation
Coding Conventions
Dinith edited this page Mar 20, 2020
·
4 revisions
- Variable names
lowerCamelCase
- Constant names
UPPER_SNAKE_CASE- This includes environment variables
- No magic numbers
- Always use constants where applicable
- If you find yourself changing the same value in multiple places it should probably be a constant
- JSON key names
-
lower_snake_casefor constant values (e.g. data returned by API) -
lowerCamelCaseif using them in a similar way toconstandlet
-
- DON'T USE
var - Always use
constif the value won't change - Otherwise use
let
- Function names
- Should be short and descriptive (indicative of what function does)
- Don't add 'function' on the end of the function name
- e.g.
getData(), notgetDataFunction()
- Function declarations
- Named arrow functions where possible
- e.g.
const func = (x, y) => { ... }
- e.g.
- Otherwise use
functionkeyword assigned to aconst- e.g.
const func = function (x, y) { ... } - This is most similar to the arrow function so makes it uniform/easy to read
- e.g.
- Named arrow functions where possible
- Avoid anonymous functions where possible (function names are useful for error tracing and indicating what it does)
- Exception to this is for callback functions
- Put opening curly brackets on the same line of
if,forandwhile, not on a new line - Always use curly braces, even if one statement follows the
if,for,while, etc. - Be smart when using brackets for compound
ifconditions -> Make it READABLE
- Use
errfor naming the error when catching it - Throw meaningful error messages
- Put imports at the top
- Put constants/variable declarations below imports
- Put the entry point of the program at the bottom (e.g.
main()) - Put the first method called by
main()at the top below the constants - Put called methods below the caller
- Use semicolons (although Prettier should automatically add these when you auto-format)
- Don't commit commented out code to master, unless it's for a very good reason
- Use functions, not classes, to make React components
- Use
useState()to handle state