JavaScript coding conventions#

Overview#

This document provides guidelines for code formatting to developers contributing to Silverstripe CMS. It applies to all JavaScript files in core modules.

NPM packages#

Silverstripe authored npm dependencies are posted under the Silverstripe npm organisation.

Browser support#

Check our requirements documentation.

Conventions#

We follow the AirBnB JavaScript Conventions, as well as the AirBnB React Conventions. A lot of their rules can be validated via ESLint, and can be checked locally via yarn lint (see Build Tooling).

Spelling#

All symbols and documentation should use UK-English spelling (e.g. "behaviour" instead of "behavior"), except when necessitated by third party conventions (e.g. using "color" for CSS styles).

File and folder naming#

  • All frontend files (CSS, JavaScript, images) should be placed in a client/ folder on the top level of the module
  • File names should follow the AirBnB Naming Conventions
  • The client/src/components folder should contain only React presentational components. These components should be self-contained, and shouldn't know about Redux state.
  • The client/src/containers folder should contain only React container components
  • React classes in client/src/components and client/src/containers should have one folder per component, alongside a README.md and SCSS files where applicable.
  • The client/src/state folder should contain Redux actions, action types and reducers. Each set of these should be kept in a folder named the same as its reducer state key.
  • JavaScript that pertains specifically to entwine logic belongs in a client/src/legacy directory.
  • JavaScript tests should be named after the module/class/component they're testing, with their file name suffixed with -tests.js.
  • JavaScript tests should be placed in a tests/ subfolder alongside the module code.