Skip to content

Style Guide

Tim van der Meij edited this page Jul 8, 2019 · 32 revisions

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

Many of these conventions will be checked automatically by a linter after each push to a branch of a pull request. Please 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

The standard way of creating classes in PDF.js used to be the following, so you might see this pattern in the current codebase. 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;
})();

However, we are in the process of converting the codebase to ES6 syntax since classes are generally available in browsers and well optimized nowadays, so for new code we prefer the following way of creating classes.

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

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

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