Category as Ecommerce: Magento Coding Standard

Literal Namespace Rule 

For class name resolution, use the Class keyword instead of a string literal for every class name reference outside of that class. This includes references to: 

Fully qualified class name 

Imported/non-imported class name 

Namespace relative class name 

Import relative class name 

example: 

$this->get(ClassName::class); 

$this->get(\Magento\Path\To\Class::class); 

Addition Formatting Standard 

When you declare an anonymous function as an argument in a function call, indent the body of the function byfour spaces from the left edge of the statement or function keyword to increase readability. 

myObject.myFunction(param1, function (a,b) { 

    //Function logic 

    return a > b; 

}); 

Multi-line string literals  

Ex: 

var myString = 'JavaScript was originally developed in Netscape, by Brendan Eich. ' + 

    'Battling with Microsoft over the Internet, Netscape considered their client-server solution ' + 

    'as a distributed OS, running a portable version of Sun Microsystem’s Java. ' + 

    'Because Java was a competitor of C++ and aimed at professional programmers, ' + 

    'Netscape also wanted a lightweight interpreted language that would complement Java ' + 

    'by appealing to nonprofessional programmers, like Microsoft’s VB.[9] (see JavaScript and Java)' 

Blocks 

Use braces with all multiline blocks. May only omit braces if entire block can be written in one line and improves readability. 

Don’t	Do
if (true)       blah();  function () { return false; }	if (true) return;   if (true) {     return;  }  if (true) {     blah();  }  function () {     return false;  }

Semicolons  

Always put semicolons as statement terminators. 

The following code examples show the dangers of missing semicolons: 

// Example 1: JavaScript Error 

MyClass.prototype.myMethod = function() { 

    return 42; 

}  // <-- Missing semicolon 

(function() { 

    // Some initialization code wrapped in a function to create a scope for locals. 

})(); 

Use a variable initialized with a function expression to define a function within a block. 

Don’t	Do
if (x) {     function foo() {}  }	if (x) {     var foo = function() {}  }

Method Defination 

There are several ways to attach methods and properties to a constructor, but the preferred style is: 

Foo.prototype.bar = function() { 

    // ... 

}; 

Array and object initializers  

Single-line array and object initializers are allowed when they fit on a line as follows: 

var arr = [1, 2, 3];  // No space after [ or before ]. 

var obj = {a: 1, b: 2, c: 3};  // No space after { or before }. 

Variable declarations  

Declare a variable with var wherever possible to avoid overwriting existing global values. 

Using only one var per scope promotes readability. 

var foo = 'bar', 

    num = 1, 

    arr = [1, 2, 3]; 

Development Standard 

Place abstract, share-able widgets under the<installdir>/pub/lib/<your company>directory so non-Magento applications can access them. 

For example: 

/app 

  /code 

    /Mage 

      /DesignEditor 

        /view 

          /frontend 

            /js 

              vde-block.js 

              vde-container.js

HTML Style Guide 

Indentations 

Use only spaces for indentation: 

Tab size: 4 spaces 

Indent size: 4 spaces 

Continuation indent: 4 spaces 

Self-closing tags  

<ul> 

    <li>One</li> 

    <li>Two</li> 

</ul> 

<br /> 

<img src="image.png" alt="image" /> 

<input type="text" name="username" /> 

Line length  

<input data-bind="attr: { 

       id: 'cart-item-'+item_id+'-qty', 

       'data-cart-item': item_id, 

       'data-item-qty': qty 

       }, value: qty" 

       type="number" 

       size="4" 

       class="item-qty cart-item-qty" 

       maxlength="12"/> 

Spaces around equals sign (“=”)  

<link rel="stylesheet" href="styles.css"> 

 Spaces and colon in attributes 

<span data-bind="i18n: 'Update'"></span>

Class names 

<button type="submit" class="action-primary">Submit</button>