Version 5 supported

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.

Related

Edit on Github