Skip to content

Latest commit

 

History

History
99 lines (70 loc) · 2.52 KB

CODE_STYLE_GUIDE.md

File metadata and controls

99 lines (70 loc) · 2.52 KB

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.