Skip to content

Style Guide

Jonas Jenwald edited this page Sep 15, 2021 · 32 revisions

This page outlines the style conventions that PDF.js follows to maintain a consistent code base. We ask each contributor that creates a pull request to adhere to these conventions.

Most of these conventions are checked automatically by a linter (ESLint/Prettier) after each push to a branch of a pull request. Refer to https://github.com/mozilla/pdf.js/wiki/Contributing#4-run-lint-and-testing for information about running the linter locally.

General

Naming

  • Variables and functions: lowerCamelCase
  • Classes: UpperCamelCase
  • Constants: UPPER_CASE_WITH_UNDERSCORES

Braces

Always use braces and put them on same line, even for single line control statements:

if (someVar) {
  ...
} else {
  ...
}

Whitespace

Keep one space after control statements (if, else, while, for, et cetera):

if (someVar) {

Equalities

Only use strict equalities (===) and inequalities (!==):

if (someVar === conditionA) {
  ...
} else if (someVar !== conditionB) {
  ...
}

Variables

Variables must be defined only once within a function scope, preferably at the top of the function. Use const if the value is not mutated and let if it is mutated. In new code we don't use var unless absolutely necessary.

Classes

For new code the following way of creating classes should be used:

class ClassName {
  constructor(...) {
    ...
  }

  functionName(arg1, arg2, ...) {
    ...
  }

  aVeryVeryVeryVeryVeryLongFunctionName(
    arg1,
    arg2,
    ...
  ) {
    ...
  }
}

The standard way of creating classes in PDF.js used to be the following, so you might see this pattern in the current code base. Please note that by class we mean an object that is class-like.

var ClassName = (function ClassNameClosure() {
  function ClassName(...) {
    ...
  }

  ClassName.prototype = {
    functionName(arg1, arg2, ...) {
      ...
    },

    aVeryVeryVeryVeryVeryLongFunctionName(
      arg1,
      arg2,
      ...
    ) {
      ...
    },
  };

  return ClassName;
})();