แนวทางปฏิบัติ: ควรจำกัดความยาวบรรทัดไม่เกิน 80 ตัวอักษร (หรือ 100-120 ตาม Team Convention) เพื่อให้โค้ดอ่านง่าย ไม่ต้อง Scroll แนวนอน
ตัวอย่าง: แบบยาวเกินไป (ยากต่อการอ่าน)
function display() { var a = ""; a = a + isNaN(6234) + ": 6234<br>"; a = a + isNaN(-52.1) + ": -52.1<br>"; a = a + isNaN('') + ": ''<br>"; document.getElementById("test").innerHTML = a; }
ตัวอย่าง: ใช้ Line Breaks หลัง Operator/Comma (อ่านง่าย)
function display() {
var a = "";
a = a + isNaN(6234) + ": 6234<br>";
a = a + isNaN(-52.1) + ": -52.1<br>";
a = a + isNaN('') + ": ''<br>";
document.getElementById("test").innerHTML = a;
}
กฎการขึ้นบรรทัดใหม่ (Line Breaking)
- ขึ้นบรรทัดใหม่ หลัง Operator (+, -, *, /, =, &&, ||, ?, :, ฯลฯ)
- ขึ้นบรรทัดใหม่ หลัง Comma ใน Parameter List, Array, Object
- Indent ต่อไป 1 Level (มัก 2 หรือ 4 Spaces)
- ไม่ขึ้นบรรทัดใหม่ก่อน Operator
ตัวอย่าง Patterns
// ✅ ดี: Break หลัง Operator
const result = veryLongVariableName +
anotherLongVariable +
thirdValue;
// ✅ ดี: Break หลัง Comma
function foo(
param1,
param2,
param3
) { ... }
const arr = [
item1,
item2,
item3
];
// ❌ ไม่ดี: Break ก่อน Operator
const result = veryLongVariableName
+ anotherLongVariable; // สับสนง่าย
Tools ช่วยจัด Format
- Prettier - Opinionated Formatter (แนะนำ ใช้กับทีม)
- ESLint - Linter มี Rule
max-len - Editor Settings:
editor.rulers: [80, 100, 120]ใน VS Code
Team Convention: กำหนดร่วมกันใน Project (80, 100, หรือ 120) และ Enforce ด้วย Prettier/ESLint