iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 25
4

 airbnb 基本撰寫規則Hi~
你寫程式時都隨便換行、隨便空白,看心情加逗號跟分號嗎?你覺得反正程式沒有錯誤,結果有出來就好嗎?偶爾還會因為忘記分號導致出錯嗎?你覺得其實看了很不舒服,但也不知道要怎麼寫比較好嗎?誒嘿!沒關係,這邊推薦你個好東西:
ESLint airbnb 已經幫你把規則訂好囉!就算沒有想要完全照著他所有的規則走,但在基本撰寫習慣的部分,建議各位可以找個規則來遵循,除了讓程式碼看起來乾乾淨淨、心情變好之外,也可以減少錯誤的發生,更重要的是團隊一起工作時,如果大家使用同一個規範,也可以提升開發效率歐!
今天就來看看 airbnb 的基本撰寫規則有哪些ㄅ!


● 將 Tab 設定為兩個空格

這邊順便提供 vscode 設定的方法:

  1. 編輯器最下方右下角有一個工具列,點選 spaceESLint airbnb 空白
  2. 選擇 indent Using SpacesESLint airbnb 空白
  3. 選擇 2ESLint airbnb 空白

● 在大括號前加一個空格

function test() {
  console.log('test');
};

const me = {
  type: 'cute',
  bad: false,
};

● 在控制流程的語句(if, while 等)的左括號前加上一個空格,宣告的函式和傳入的變數間則沒有空格。

// 括號()前要空白 - 錯誤示範
if(whiteEyes) {
  fight ();
}

// good
if (whiteEyes) {
  fight();
}

// 函式的名稱跟括號()不用空白 - 錯誤示範
function whiteEyes () {
  console.log ('天生白目!');
}

// good
function whiteEyes() {
  console.log('天生白目!');
}

● 將運算元用空格隔開

// 錯誤示範
const x=y+5;

// good
const x = y + 5;

● 在檔案的最尾端加上一行空白行。

● 當大於兩個方法鏈結時請換行縮排,利用前面的 . 強調該行是呼叫方法,而不是一個新的宣告

// 錯誤示範
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// good
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

● 在區塊的結束及下個語法間加上空行

// good
const arr = [
  function foo() {
  },

  function bar() {
  },
];

return arr;

● 別在區塊中置放空行

// 錯誤示範
function bar() {

  console.log(foo);

}

// good
function bar() {
  console.log(foo);
}

● 不要在括號內的兩側置放空格

// 錯誤示範
function bar( foo ) {
  return foo;
}

// good
function bar(foo) {
  return foo;
}

● 不要在中括號內的兩側置放空格

// 錯誤示範
const foo = [ 1, 2, 3 ];
console.log(foo[ 0 ]);

// good
const foo = [1, 2, 3];
console.log(foo[0]);

● 在大括號內的兩側置放空格

// 錯誤示範
const foo = {clark: 'kent'};

// good
const foo = { clark: 'kent' };

● 避免一行的程式碼超過 100 字元(包含空白)

這樣確保可讀性及維護性!如果要組很長的字串可以使用之前介紹過的模板字串符

● 不要將逗號放在前方

// 錯誤示範
const love = [
 speel
, milkTea
, cat
];

// good
const love = [
speel,
milkTea,
cat,
];

● 增加結尾的逗號、分號

不要偷懶!


以上~希望有幫助到還沒找到撰寫真理的朋友們^___^,另外有興趣了解 ESlint 工具 or 其他規範的人可以參考這篇:ESLint 工具簡介&安裝教學-來個乾淨的程式碼,裡面也有介紹到歐!

參考資料:
airbnb 規則(19點與20點)


上一篇
Day24【ES6 小筆記】資料型別 Symbol 使用時機
下一篇
Day26【ES6 小筆記】 陣列好兄弟 Set 怎麼用? - 以 30 天平民滷肉飯挑戰為例
系列文
透過 ESLint 練習 JavaScript ES630

尚未有邦友留言

立即登入留言