ArkTS programming specification(3)

Spacing and Code Style Guidelines

Highlighting Keywords and Important Information with Spaces

• Level: Recommendation

• Description: Use spaces to highlight keywords and important information while avoiding unnecessary spaces. Follow these general guidelines:

  • Add a space between keywords like if, for, while, switch and the left parenthesis (.
  • Do not add a space between the function name and the left parenthesis ( in function definitions and calls.
  • Add a space between keywords like else or catch and the preceding right brace }.
  • Add a space before any opening brace {, except in the following cases:
    • When an object is the first parameter of a function or the first element of an array, no space is needed before the object. For example: foo({ name: 'abc' }).
    • In templates, no space is needed. For example: abc${name}.
  • Add spaces around binary operators (+ - * = < > <= >= === !== && ||) and on both sides of the ternary operator (? :).
  • Add a space after commas in array initializations and between parameters in functions.
  • Do not add spaces before commas (,) or semicolons (;).
  • Do not add spaces inside the brackets of arrays ([]).
  • Avoid multiple consecutive spaces unless they are used for indentation.

• Negative Example:
  
  

// No space between if and the left parenthesis (
if(isJedi) {
  fight();
}

// Space between function name fight and the left parenthesis (
function fight (): void {
  console.log('Swooosh!');
}

• Positive Example:

// Space between if and the left parenthesis (
if (isJedi) {
  fight();
}

// No space between function name fight and the left parenthesis (
function fight(): void {
  console.log('Swooosh!');
}

• Negative Example:

if (flag) {
  // ...
}else {  // No space between else and the preceding right brace }
  // ...
}

• Positive Example:

if (flag) {
  // ...
} else {  // Add space between else and the preceding right brace }
  // ...
}

• Positive Example:

function foo() {  // Add a space before the opening brace { in function declarations
  // ...
}

bar('attr', {  // Add a space before the opening brace {
  age: '1 year',
  sbreed: 'Bernese Mountain Dog',
});

• Positive Example:

const arr = [1, 2, 3];  // Add a space after commas in array initializations
myFunc(bar, foo, baz);  // Add a space after commas between function parameters

String Quotation Marks

• Level: Recommendation

• Description: It is conventional to prefer single quotes over double quotes.

• Negative Example:
  

let message = "world";
console.log(message);

• Positive Example:

let message = 'world';
console.log(message);

Object Literal Line Breaks

• Level: Recommendation

• Description: Object literals should either have each property on a separate line or all properties on the same line. When an object literal has more than four properties, it is recommended to place each property on a new line.

• Negative Example:
  

interface I {
  name: string
  age: number
  value: number
  sum: number
  foo: boolean
  bar: boolean
}

let obj: I = { name: 'tom', age: 16, value: 1, sum: 2, foo: true, bar: false }

• Positive Example:

interface I {
  name: string
  age: number
  value: number
  sum: number
  foo: boolean
  bar: boolean
}

let obj: I = {
  name: 'tom',
  age: 16,
  value: 1,
  sum: 2,
  foo: true,
  bar: false
}

Placement of else/catch

• Level: Recommendation

• Description: When writing conditional statements, place else on the same line as the closing brace of the if block. Similarly, when writing exception handling statements, place catch on the same line as the closing brace of the try block.

• Negative Example:
  

if (isOk) {
  doThing1();
  doThing2();
}
else {
  doThing3();
}

• Positive Example:

if (isOk) {
  doThing1();
  doThing2();
} else {
  doThing3();
}

• Negative Example:

try {
  doSomething();
}
catch (err) {
  // Handle error
}

• Positive Example:

try {
  doSomething();
} catch (err) {
  // Handle error
}

Brace Placement

• Level: Recommendation

• Description: Maintain a consistent brace style. It is recommended to place braces on the same line as control statements or declaration statements.

• Negative Example:
  

function foo()
{
  // ...
}

• Positive Example:

function foo() {
  // ...
}