Recommended Coding Standards

The following are the coding standards that the Cocos Creator development team use. They are included in the manual for game developers and tool developers reference.

Naming standards

  • When naming the variables, functions and instances, we use camelCase nomenclature:

      // Bad
      const FOOBar = {};
      const foo_bar = {};
      function FOOBar () {}
    
      // Good
      const fooBar = {};
      function fooBar () {}
    
  • When variable, function, and instance naming involves abbreviations, the abbreviations are all lowercase at the beginning, and all uppercase in subsequent words:

      // Bad
      const Id = 0;
      const iD = 0;
      function requireId () {}
    
      // Good
      const id = 0;
      const uuid = '';
      function requireID () {}
      class AssetUUID {}
    
  • When naming types or modules, use PascalCase nomenclature:

      // Bad
      const foobar = cc.Class({
          foo: 'foo',
          bar: 'bar',
      });
      const foobar = require('foo-bar');
    
      // Good
      const FooBar = cc.Class({
          foo: 'foo',
          bar: 'bar',
      });
      const FooBar = require('foo-bar');
    
  • It is recommended to use full uppercase underline to name “constants”:

      // Bad
      const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';
    
      // Bad
      var THING_TO_BE_CHANGED = 'should obviously not be uppercased';
    
      // Bad
      let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';
    
      // ---
    
      // Allowed but does not supply semantic value
      export const apiKey = 'SOMEKEY';
    
      // Better in most cases
      export const API_KEY = 'SOMEKEY';
    
      // ---
    
      // Bad - unnecessarily uppercases key while adding no semantic value
      export const MAPPING = {
          KEY: 'value'
      };
    
      // Good
      export const Type = {
          SIMPLE: 'value'
      };
    
  • Use underscores _ when naming private attributes:

      // Bad
      this.__firstName__ = 'foobar';
      this.firstName_ = 'foobar';
    
      // Good
      this._firstName = 'foobar';
    
  • Use dash nomenclature for files:

      // bad
      fooBar.js
      FooBar.js
    
      // good
      foo-bar.js
    

Grammar standards

  • When a class has a property declaration without initialization style, declare should be declared, otherwise may face performance problems. Please refer to this issue for details.

      // Bad
      class A {
          public a: number;
          constructor (a : number) {
              // This is equivalent to another sentence ‘this.a = void 0;’ here.
              // Be aware that may face performance problems!
              this.a = a;
          }
      }
    
      // Good
      class A {
          public a: number = 0; // Ok.
          constructor (a : number) {
              // This is equivalent to another sentence ‘this.a = 0;’ here.
              // Does not cause major performance problems.
              this.a = a;
          }
      }
    
      // Best
      class A {
          public declare a: number;
          public b: undefined | object; // OK: b No secondary assignment in the constructor.
          public declare c: object | null;
    
          constructor (a: number, c: object) {
              this.a = a;
              this.c = c;
          }
      }
    
  • Use Object.create(null) to create an object:

      // Bad
      const obj = new Object();
    
      // Bad
      const obj = {};
    
      // Good
      const obj = Object.create(null);
    
  • Use [] to create an array:

      // Bad
      const array = new Array();
    
      // Good
      const array = [];
    
  • Try your best to use single quotation marks '' to define a string in TypeScript code:

      // Bad
      const str = "Hello World";
    
      // Good
      const str = 'Hello World';
    
  • When defining multi-lines string, try your best to use +:

      // Bad
      const errorMessage = 'This is a super long error that was thrown out because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
    
      // Bad
      const errorMessage = 'This is a super long error that was thrown out because \
      of Batman. When you stop to think about how Batman had anything to do \
      with this, you would get nowhere \
      fast.';
    
      // Good
      const errorMessage = 'This is a super long error that was thrown out because ' +
        'of Batman. When you stop to think about how Batman had anything to do ' +
        'with this, you would get nowhere fast.';
    
  • Use === and !== rather than == and !=.

Grammar standards

  • Choose quadruple spacing or double spacing for indentation according to your own habits and the primary code writer's format:

      // Bad
      function() {
      ∙const name;
      }
    
      // Very bad
      function() {
      ∙∙<tab>∙∙const name;
      }
    
      // Good
      function() {
      ∙∙const name;
      }
    
      // Good
      function() {
      ∙∙∙∙const name;
      }
    
  • Do not leave spaces at the end of the line. Leave an empty line at the bottom of the file:

      // Bad
      function () {∙
      ∙∙∙∙const name;∙
      }
      /* EOF */
    
      // Good
      function () {
      ∙∙∙∙const name;
      }
    
      /* EOF */
    
  • Please add ; at the end of the statement:

      // Bad
      proto.foo = function () {
      }
    
      // Good
      proto.foo = function () {
      };
    
      // Bad
      function foo () {
          return 'test'
      }
    
      // Very bad
      //   Returns `undefined` instead of the value on the next line,
      //   Always happens when `return` is on a line by itself because of Automatic Semicolon Insertion!
      function foo () {
          return
              'test'
      }
    
      // Good
      function foo () {
          return 'test';
      }
    
      // Bad
      function foo () {
      };
    
      // Good, this is not the end of the statement
      function foo () {
      }
    
  • Try to put { and the expression in the same line:

      // Bad
      if ( isFoobar )
      {
      }
    
      // Good
      if ( isFoobar ) {
      }
    
      // Bad
      function foobar()
      {
      }
    
      // Good
      function foobar() {
      }
    
      // Bad
      const obj =
      {
          foo: 'foo',
          bar: 'bar',
      }
    
      // Good
      const obj = {
          foo: 'foo',
          bar: 'bar',
      }
    
  • Put a space before {:

      // Bad
      if (isJedi){
          fight();
      }
      else{
          escape();
      }
    
      // Good
      if (isJedi) {
          fight();
      } else {
          escape();
      }
    
      // Bad
      dog.set('attr',{
          age: '1 year',
          breed: 'Bernese Mountain Dog',
      });
    
      // Good
      dog.set('attr', {
          age: '1 year',
          breed: 'Bernese Mountain Dog',
      });
    
  • Please put a space before ( of the logic state expressions ( if, else, while, switch):

      // Bad
      if(isJedi) {
          fight ();
      }
      else{
          escape();
      }
    
      // Good
      if (isJedi) {
          fight();
      } else {
          escape();
      }
    
  • Leave one space between the binary ternary operators:

      // Bad
      const x=y+5;
      const left = rotated? y: x;
    
      // Good
      const x = y + 5;
      const left = rotated ? y : x;
    
      // Bad
      for (let i=0; i< 10; i++) {
      }
    
      // Good
      for (let i = 0; i < 10; i++) {
      }
    
  • The way some functions are declared:

      // Bad
      const test = function () {
          console.log('test');
      };
    
      // Good
      function test () {
          console.log('test');
      }
    
      // Bad
      function divisibleFunction () {
          return DEBUG ? 'foo' : 'bar';
      }
    
      // Good
      const divisibleFunction = DEBUG ?
          function () {
              return 'foo';
          } :
          function () {
              return 'bar';
          };
    
      // Bad
      function test(){
      }
    
      // Good
      function test () {
      }
    
      // Bad
      const obj = {
          foo: function () {
          }
      };
    
      // Good
      const obj = {
          foo () {
          }
      };
    
      // Bad
      array.map(x=>x + 1);
      array.map(x => {
          return x + 1;
      });
    
      // Good
      array.map(x => x + 1);
    
  • Put a space between Block definitions:

      // Bad
      if (foo) {
          return bar;
      }
      return baz;
    
      // Good
      if (foo) {
          return bar;
      }
    
      return baz;
    
      // Bad
      const obj = {
          x: 0,
          y: 0,
          foo() {
          },
          bar() {
          },
      };
      return obj;
    
      // Good
      const obj = {
          x: 0,
          y: 0,
    
          foo() {
          },
    
          bar() {
          },
      };
    
      return obj;
    
  • Do not use a comma to define:

      // Bad
      const story = [
            once
          , upon
          , aTime
      ];
    
      // Good
      const story = [
          once,
          upon,
          aTime,
      ];
    
      // Bad
      const hero = {
            firstName: 'Ada'
          , lastName: 'Lovelace'
          , birthYear: 1815
          , superPower: 'computers'
      };
    
      // Good
      const hero = {
          firstName: 'Ada',
          lastName: 'Lovelace',
          birthYear: 1815,
          superPower: 'computers',
      };
    
  • Single line comments, please add a space after the slash:

      // Bad
      // Good
    
  • Multiline comments:

      /*
       * Good
       */
    
  • A multiline comments that needs to be exported to the API document:

      /**
       * Good
       */
    

Airbnb JavaScript Style Guide

results matching ""

    No results matching ""