Skip to content
Guidelines that should be adhered to when writing code. Consistent code is easier to read and leads to less bugs.
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md

README.md

coding-standards

Guidelines that should be adhered to when writing code. Consistent code is easier to read and leads to less bugs.

Text editor/IDE

  • Use EditorConfig standard settings
  • Install the following packages so we code consistently:
    • Atom: [TBC]
    • VSCode: code --install-extension dbaeumer.vscode-eslint --install-extension shinnn.stylelint --install-extension aaron-bond.better-comments --install-extension EditorConfig.EditorConfig --install-extension esbenp.prettier-vscode

Naming conventions

  • For most files, use dashes: file-name-1.jpg.
  • Javascript-like files and modules, use camel-case: moduleNo1.js.
  • AEM components, use camel-case:
// AEM component
moduleNo1

// AEM component associated files
moduleNo1.js
moduleNo1.css

// AEM component front-end sub-modules use dashes
moduleNo1-user-notification.js
moduleNo1-user-notification.css

// AEM component with BEM syntax for styles
.moduleNo1__heading,
.moduleNo1__heading--large

HTML

Styles

Javascript

  • Latest ECMAScript spec (transpiled)
  • No jQuery
  • Use Airbnb styleguide
  • When selecting DOM elements, use data attribute selectors, e.g. this.element.querySelector('[data-component-name-selector-name]')
  • Lint with Prettier and ESLint
  • Write JSDoc comments

Tracking / analytics

  • Only track elements using tracking data attribute selectors, e.g. document.querySelector('[data-tracking-selector-name]')

Version control

  • Commit message format [componentName] - JIRA ticket number (if relevant) - description of change. E.g. [headerComponent] - HODSO-401 - Fix bug with icon width in Safari 10
  • Review changes using diff before committing
  • Feature-branches and pull-requests recommended

README.md

  • Include in root of every project with the following:
    • Front-end setup (e.g. npm install)
    • Front-end development (e.g. npm start)
    • Backend setup/server (no sensitive information)
    • Deployment process / server environments
    • Browser support
You can’t perform that action at this time.