CODE_STYLE_GUIDE.md

Coding Style

File Layout (src/components/*.js)

1. Imports
2. Reusable components needed for the main component
3. Main component (Eg: Addons in addons.js)
4. export default <MainComponent>;

Reusable components

• Do not make a new file for smaller components.
• Smaller, reusable components needed in the main components should be added above the main component, not inside it.
• Use ES6 arrow functions for defining components.

Spacing

1. JS:

   • Use a space after if, for, while, switch.
   • Do not use a space after the opening ( and before the closing ).
   • Use a space before and after destructuring objects.

       //good
       const { apple, mangoes } = fruits;
       
       //bad
       const {apple, mangoes} = fruits;
   
   
       //Same for destructuring props:
       //good
       const BeautifulComponent = ({ prop1, prop2 }) => {}
   
       //bad
       const UglyComponent = ({prop1, prop2}) => {}

2. JSX:

   • Use a space before the forward slash (/) of a self-closing tag

   //good
   <Foo />
   
   //bad 
   <Foo/>

   • Do not use spaces for JSX curly braces

   //good
   <Foo bar={baz} />
   
   //bad
   <Foo bar={ baz } />

Props:

• Use camelCase for prop names, or PascalCase if the prop value is a React component.
• Use new lines when props do not fit on the same line.

  //good
  <Foo 
      prop1={value1}
      prop2={value2}
      prop3={value3}
  />
  
  //bad
  <Foo prop1={value1} prop2={value2} prop3={value3} />

Best practices:

• Always add semicolons after a line.
• Use ES6 arrow functions.
• Keep the indentation in your code correct.
• Use 4 spaces for tabs.
• Don't Repeat Yourself. If you think you're repeating too much code, make a smaller component, or a function.
• Always add alt prop to img tags.
• Add rel="noopener" for a tags which has target="_blank".
• Don't do outline: none on user input elements. If you do not want outline, give them faint, visible background on focus. This is for accessibility.

Other things to note

• We are using octicons for icons. Use this if you need to add icons. Do not add a new library for icons.
• Try to not commit changes in package.json, package-lock.json.
• Discuss with contributors on discord if you're planning to add/remove a package.

Further reading:

This guide is based on airbnb's react guide. You can read all the best practices there.