Hi there, these standards are some of the highly opinionated standards from me, maybe because I have a habit of doing them a lot and they have built into my brain like a clockwork. This is going to be a very troublesome thing for everyone and you could argue why to do it? But I think these are some of the best things that most people ignore when coding.
The standard I am talking about is sorting and separation. A very minor thing but very effective and high impact.
Separating & Sorting of Imports
I like sorting imports and separating them with lines to distinguish the type of import. This is very useful when you want to track which file belongs to the current module and which are taken from others.
Also, sorting of imports helps quickly navigate through the import and find out the place where it is imported from.
For the imports from node_modules except the react import we can sort others. But since we rarely have to trace back the imports from the node_modules they do not take priority on sorting like other imports.
Example:
import React from "react";
import moment from "moment";
// Absolute imports after the imports from node_modules
import Button from "src/views/atoms/buttons";
import Label from "src/views/atoms/label";
import Placeholder from "src/views/atoms/placeholder";
import TextInput from "src/views/atoms/text-input";
// Relative imports after the absolute imports
import Button from "../atoms/buttons";
import TextInput from "../atoms/text-input";
Sorting of props
This is going to be troublesome. This will take a lot of time to get into habit but believe me once you see a component with gazillion props and all sorted, you will feel like coding in heaven. It is a lot easier and faster to trace out the props when they are sorted. Your brain is very good with finding items that are sorted and once you have them in sorted format it takes very few seconds to trace down the prop you are looking for on a Component usage.
For example:
Here is a component with props that are not sorted:
Try finding a prop name deadpool
import React from "react";
export const ComponentWithoutSortedProps = () => {
// I have unsorted props
return <DummyComponent
ironMan={ironMan}
thor={thor}
blackPanther={blackPanther}
wasp={wasp}
antMan={antMan}
hulk={hulk}
hawkEye={hawkEye}
quickSilver={quickSilver}
scarletWitch={scarletWitch}
blackWidow={blackWidow}
warMachine={warMachine}
moonKnight={moonKnight}
spiderMan={spiderMan}
doctorStrange={doctorStrange}
deadpool={deadpool}
yondu={yondu}
loki={loki}
captainAmerica={captainAmerica}
winterSoldier={winterSoldier}
/>;
}
Now I will give you a component with sorted props. Try finding deadpool again:
import React from "react";
export const ComponentWithSortedProps = () => {
// I have sorted props
return <DummyComponent
antMan={antMan}
blackPanther={blackPanther}
blackWidow={blackWidow}
captainAmerica={captainAmerica}
deadpool={deadpool}
doctorStrange={doctorStrange}
hawkEye={hawkEye}
hulk={hulk}
ironMan={ironMan}
loki={loki}
moonKnight={moonKnight}
quickSilver={quickSilver}
scarletWitch={scarletWitch}
spiderMan={spiderMan}
thor={thor}
warMachine={warMachine}
wasp={wasp}
winterSoldier={winterSoldier}
yondu={yondu}
/>;
}
I hope you realized how easy that was to trace out. Now, just imagine you are looking at a code with 100's of components each day and how long you spend trying to find a prop. Though, this could take time at first but yields great results later when the code base grows.
Note: If you find sorting a very difficult task there are always extensions that are ready to do that for you. I personally use vscode built-in command sort lines to sort them in Ascending order. Make the selection of the lines, type ctrl+shift+p and type sort lines to use it.
Separation of Returns
The rule is in the title itself. You try to separate the return statement from the rest of the statements of your code. The answer to why we do that is, it makes it very easy to find out where the return statements of a function on a certain file are. This helps us to trace out all the expected returns of the function distinctively from the rest of the code.
Here is an example of a code with return statements not separated:
export const doVeryLongTaskWithMultipleReturns = (v1, v2) => {
const x = 'something great';
const y = 'another thing that is great';
if(x === v1) {
return x;
}
if (y === v2) {
const thing1 = 'hello world';
const thing2 = 'world hello';
const joinedThing = thing1 + thing2;
return joinedThing;
} else {
if (v1 === v2) {
const gettingOverIt = 'impossible';
const gettingBelowIt = 'impossible';
const joined = gettingOverIt + gettingBelowIt;
return joined;
}
}
return y;
};
Here is an example with return statements separated with line:
export const doVeryLongTaskWithMultipleReturns = (v1, v2) => {
const x = 'something great';
const y = 'another thing that is great';
if(x === v1) {
return x;
}
if (y === v2) {
const thing1 = 'hello world';
const thing2 = 'world hello';
const joinedThing = thing1 + thing2;
return joinedThing;
} else {
if (v1 === v2) {
const gettingOverIt = 'impossible';
const gettingBelowIt = 'impossible';
const joined = gettingOverIt + gettingBelowIt;
return joined;
}
}
return y;
};
This little blank line over the return statement plays a very important role when your code grows. Our brain can easily find out a blank line above a return statement and that help us to quickly find out about the return statements that are existing on a code block. Obviously you don't need a blank like above a return statement if it is a single line of code inside a block like in the first if conditional statement. But, other than that, it is always beneficial to have it on your code.
