Jav airbnb

Hôm nay, Code Dạo sẽ giới thiệu với các bạn một công cụ đơn giản, miễn phí mà lại rất mạnh mang tên … linter

Công cụ này có thể xem lại, tìm những lỗi đặt bổ sung trong cách viết mã của bạn, đưa ra đề xuất cải tiến (hoặc tự động sửa mã luôn)

Thật đấy. Sử dụng linter, bạn sẽ thấy như có thêm một người anh, người thầy ngồi cạnh mình khi code, nhắc nhở mình mỗi khi mình viết mã lô, mã đểu và nhắc sửa

Trong vi bài viết, mình sẽ giới thiệu về linter, cũng như hướng dẫn cách cài đặt ESLint cho JavaScript trên VSCode nhé

Trong quá trình viết JS, nhiều người chắc ai cũng gặp phải nhiều vấn đề về Style có cho JS đặc biệt là ECMAScript 6 chuẩn, không biết viết sao cho đúng chuẩn. Trong bài viết này mình sẽ giới thiệu về style viết JS của công ty Airbnb. Mong sau bài viết này mọi người sẽ tìm ra được style chuẩn cho mình để code khoa học, đẹp hơn

Hàm mũi tên

1. Khi bạn bắt buộc phải sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   0 (truyền vào một

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   1), hãy sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   2

Vì sao nên? . Cú pháp cũng rút gọn hơn

Vì sao không nên?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. If function only only one question

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   32, does not survival at

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   33, thì hãy bỏ qua

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   34, và bỏ luôn từ khóa

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   32. If not please keep

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   34 and to back

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   32

tại sao?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Trong trường hợp biểu thức tràn xuống dòng, nên sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   39 để dễ đọc

tại sao?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Nếu

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   4 chỉ có 1 tham số duy nhất, hãy bỏ dấu

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   39 đi, ngược lại hãy luôn sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   39 cho nó

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   74 (hehe)

Vì sao?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Tránh việc dễ hiểu lầm giữa

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   75 và toán tử so sánh

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   76,

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   77

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

Lớp & Constructor

1. Luôn luôn sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   78, tránh việc sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   79

tại sao?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   71 cho kế thừa trong

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   72

tại sao?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Trong trường hợp muốn sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   74, hãy sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   75

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Bạn có thể sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   76

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   77, những hãy chắc chắn rằng nó chạy ngon lành và không xuất hiện

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   33

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Mỗi

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   78 đều có một

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   70 nếu không khai báo.

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   71 trống hoặc

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   72 đến

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   73 là không cần thiết

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Default _______

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   74

tại sao?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

mô-đun

1. Luôn luôn sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   77 (

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   78)

tại sao?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Không nên sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   79 trong

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   30

tại sao?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Không phải

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   31 trực tiếp thứ hai vừa phải

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   30

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   30 1 con đường 1 lần ở 1 nơi thôi

tại sao?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Không nên sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   31 cho

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   35

tại sao?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. If

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   38 only

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   31 1 chỗ thì nên sử dụng

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   000 hơn là

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   001

Vì sao?

// bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

1. Luôn luôn bỏ câu lệnh

   // bad
   const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
   
   // bad
   const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
   
   // good
   const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
   
   // good
   const itemHeight = (item) => {
     const { height, largeSize, smallSize } = item;
     return height > 256 ? largeSize : smallSize;
   };
   

   30 up on the same

Vì sao?