Javascript Styling

When writing code for the Foundry site, please follow these JS styling rules. This helps keep the code consistent, clean, and easy to understand.

---

The .prettierrc file

The foundry uses Prettier to auto-format code. Your .prettierrc file should look like this:

{
  "endOfLine": "lf",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Basic Rules

The Foundry uses the same rules as https://standardjs.com/rules.html and the GatsbyJS eslint config. Here are a few important ones:

• Always use 2 spaces for indentation
• Use single quotes for strings except to avoid escaping.
• No unused variables.
• Always use === instead of ==
• Infix operators must be spaced.
• Keep else statements on the same line as their curly braces.
• For multi-line if statements, use curly braces.
• Add spaces inside single line blocks.

Import order

When importing components, import them in groups. You can define a group with a comment right before the import. Sort the imports that are in the groups in order of importance. The higher the import is to the first line, the more important it is. import React from 'react'; will always be the first line (unless it's not needed). Local components should be imported last after everything.

✅ Correct

import React from 'react';
import PropTypes from 'prop-types';

// styles
import styled from 'styled-components';
import { ClickableCard, mixins, theme, media } from '@styles';
import { FormattedIcon } from '@components/icons';

❌ Incorrect

import styled from 'styled-components';
import React from 'react';
import { FormattedIcon } from '@components/icons';
import PropTypes from 'prop-types';

✅ Correct

import React from 'react';

// search
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-dom';

// styles
import styled from 'styled-components';
import { Container } from '@styles';

// components
import Hero from './hero';

❌ Incorrect

import React from 'react';
import Hero from './hero';

// search
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-dom';

import { Container } from '@styles';
import styled from 'styled-components';

Passing props

When passing props between components, always use the PropTypes package. Also, never just define props like this: const Props = (prop1, prop2) => {...}. Always use curly brackets like this: const Props = ({ prop1, prop2 }) => {...}.

✅ Correct

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ header, subtitle }) => {
  return (
    <h1>{header} and my cool {subtitle}</h1>
  )
}

MyComponent.propTypes = {
  header: PropTypes.string.isRequired,
  subtitle: PropTypes.string.isRequired,
}

❌ Incorrect

import React from 'react';

const MyComponent = (header, subtitle) => {
  return (
    <h1>{header} and my cool {subtitle}</h1>
  )
}

React package components

When using react components like useState or useContext, always import them instead of defining them like React.Component.

✅ Correct

import React, { Component, useState } from 'react';

Exporting from an index.js

When you find yourself having a lot of components that need to be exported from an index.js file, export them like this:

export { default as Signup } from './signup';
export { default as Login } from './login';
export { ResetPassword, PasswordSent } from './password';