Style Guide

GitHub Styling

This section goes over how to style GitHub related items such as:

• branches
• commit messages
• issues

Standardizing these guidelines will help us achieve maximum productivity when managing tasks on the site.

Branches

Branch names should be named after the issue you want to solve. They should be named using kebab case.

ex. An issue named "Setup Electron" would have a corresponding branch name of setup-electron.

Commit Messages

Reference this blog post

Rules for a great git commit message

1. Separate subject from body with a blank line
2. Limit the subject line to 50 characters
3. Capitalize the subject line
4. Do not end the subject line with a period
5. Use the imperative mood in the subject line
6. Wrap the body at 72 characters
7. Use the body to explain what and why vs. how

Issues

Code Styling

This section goes over how one should style their code. It is very important to introduce an agreed upon standard for your team and to use good practices. To work on a team, members need to be able to collaborate and read each other's code. If a team cannot read another's code because of the styling then that team will suffer in productivity.

This section goes over:

• file structure
• naming conventions
• code organization

General

File Structure (Web Server)

src/
    index.ts
    types.d.ts
    controllers/ (business logic)
        index.ts
	userController.ts
	…
    models/ (database logic, if necessary)
	index.ts
	user.ts
	…
    routes/ (connects controller with routes)
	index.ts
	userRoutes.ts

Variables

Todo

Exports

Avoid using default exports as much as possible. Use normal ES6 exports.

Index Files

Use index files to simplify imports.

Example

// errors/index.ts
import { FieldError } from './FieldError';
import { FormError } from './FormError';
import { Error } from './Error';

export { FieldError, FormError, Error };

// account.ts
import { Account } from '../entities';
import { FieldError, FormError } from '../errors';

interface AccountResponse {
    data?: Account;
    error?: FieldError | FormError;
}

Using index files allows for a centralized module of a common theme to export from. You can actually import a function from a directory without specifying which file it is - this is the power of index files.

React

Component Names

Component names should be pascal case.

Hook Names

Hooks should be in the “hooks” directory. They should be named with the prefix “use”. For example:

• useAuth
• useContext
• useState