Coding Style

The Calva codebase includes a configuration for Prettier. Prettier allows us to control how JavaScript and TypeScript code is formatted, giving the codebase a consistent look and feel while avoiding busy work for all our contributors.

Our recommended way to use Prettier is to use the Prettier VS Code Extension and set it as the default formatter for JS and TS files and to format on save. Digital Ocean has a nice article on how to set that up.

If you need to set your default formatter for a given file type (and the editor does not prompt you to choose one), use the following steps:

1. Open a JavaScript file.
2. Open the Command Palette
3. Select the action Format Document With
4. Select the action Configure Default Formatter...
5. Select Prettier - Code formatter
6. Repeat steps 1 - 5 but with a TypeScript file.

If you choose not to go this route then the command npm run prettier-format will format all JS and TS files in the project.

Aside from the Prettier configuration, for other style concerns, generally following the Airbnb JavaScript style guide is ideal.

NB: Code must be formatted with Prettier in order to be accepted as a PR.

Names

• Use PascalCase for type names
• Use PascalCase for enum values
• Use camelCase for function and method names
• Use ALL_CAPS for static property names
• Use camelCase for property names and local variables
• Use whole words in names when possible
• Do not use "I" as a prefix for interface names.
• Do not group variable assignments using one const/let. Each variable assignment should have its own const/let and should be on its own line.

Variables

• If a variable is not going to be changed, make it immutable with const
• Declare each variable on a line of it's own and as separate statements (i.e. do not chain declarations using commas).

Comments

• Use JSDoc style comments for functions, interfaces, enums, and classes

Strings

• Prefer interpolation of ${expressions} over string concatenation.
  • Do not use this interpolation syntax when it is not used for interpolating something.

Anonymous functions

• Use arrow functions => syntax

Curly Braces

• Always surround loop and conditional bodies with curly braces
• Open curly braces always go on the same line as whatever necessitates them
• Parenthesized constructs
  • Should have no surrounding whitespace.
  • A single space follows commas, colons, and semicolons

Files

• Use kebab-case for file names.