Style Guides

Intro

This document will go over the style guides used for different languages. All projects should have format on save enabled using a formatter for the style guide selected by our org.

Style Guides

• For react we have adopted the Airbnb style guide.

  • All variables, functions, props, util files, should be lowerCamelCased

  • Components should be CamelCased

  • Define variables in the same order in all files

    • Hooks (ex useHistory())

    • Redux vars

    • Regular vars

    • useState vars

    • Functions

    • useEffects

    • jsx return value

  • Use all single quotes instead of double quotes in js files

  • Spread objects and lists instead of mutating them

  • Do not use class based components

    • Always use arrow function components in the form of const ExampleComponent = () => {}

  • Always export default ExampleComponent; at the bottom of a component file

  • Never use props as a single component object const ExampleComponent = (props) => {} , instead destructure props so that it’s explicit what the component has as props const ExampleComponent = ({ prop1, prop2 }) => {}

  • Always lint your apps using eslint npx eslint ./src our default .eslintrc.js is listed below

    • { "settings": { "import/resolver": { "node": { "paths": ["src"] } } }, "env": { "browser": true, "es2021": true }, "extends": [ "plugin:react/recommended", "airbnb" ], "overrides": [ ], "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "plugins": [ "react" ], "rules": { "react/prop-types": [0], "react/jsx-filename-extension": [0], "react/no-array-index-key": [0], "react/jsx-props-no-spreading": "off", "no-param-reassign": [0], "max-len": ["error", {"code": 150}], "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }], "react/function-component-definition": [ 2, { "namedComponents": "arrow-function", "unnamedComponents": "arrow-function" } ] } }

  • Some general spacing guidelines are listed below

    // bad <Foo/> // good <Foo /> // bad <Foo bar={ baz } /> // good <Foo bar={baz} /> // bad <Foo superLongParam="bar" anotherSuperLongParam="baz" /> // good <Foo superLongParam="bar" anotherSuperLongParam="baz" /> // if props fit in one line then keep it on the same line <Foo bar="bar" /> // children get indented normally <Foo superLongParam="bar" anotherSuperLongParam="baz" > <Quux /> </Foo>

  • Always self-close tags that have no children

• Airbnb React/JSX Style Guide

• Airbnb Javascript style guide — Key takeaways

• For python we have adopted PEP

  • All functions, class methods, and variable names should be snake_cased

  • All class names should be CamelCased

  • Constants and global variables should be UPPER_CASED

  • Long function calls should use vertical alignment

    example2 = function(first_var, second_var, third_Var, fourth_var)

  • Big objects and lists should be spaced on multiple lines

    new_list = [ 'one', 'two', 'three', 'four', 'five', 'six' ] new_obj = { 'key_1': 'value_1', 'key_2': 'value_2', }

  • Maximum line length is 79 characters

  • Do not use wildcard imports

    # don't do this import * from your_package # do this instead import your_class from your_package

  • Single quotes around your strings or double quotes around your string mean the same thing. You can choose what one you like more, but stick to it so you can use the alternative you didn’t choose instead of backslashes.

  • Some general spacing guidelines are listed below

    # add space on either side of all operators x = y + z # not x=y+z # no whitespace for function calls my_funtion() # not my_funtion () my_funtion( ) # when indexing or slicing the brackets should be directly next collection collection[‘index’] # not collection [‘index’] collection[ ‘index’ ]

• PEP 8 – Style Guide for Python Code | peps.python.org