ESLint : กฏแปลกๆ 5 ข้อเมื่อเขียนโค้ดยามดึก

"Without rules, code is chaos." - ใครสักคน

ESLINT กฏของการเขียนโค้ด?

ESLint Rules คือตัวควบคุมมาตรฐานโค้ดและกำหนดกฏต่างๆ ให้ชาวเดฟเราเขียนโค้ดเป็นลักษณะเดียวกัน

พูดแล้วก็ต้องมีตัวอย่าง เช่น

• ประกาศตัวแปรแล้วต้องใช้

• ห้ามใช้ตัวเลข?

• if else ห้ามใช้ ==, ต้องใช้ === เท่านั้น

• ห้ามใช้ console.log()

• ทุกฟังก์ชั่นต้องมี return เสมอ

• ห้ามมีบรรทัดเกิน 300 ในไฟล์เดียวกัน

มีคำว่าห้าม ต้อง เต็มไปหมดเลยเนาะ อ่าวก็ถูกแล้วพวกนี้มันกฏไงหล่ะ

กฏบางข้อก็ดูแปลกๆว่าคิดขึ้นมาเพื่อออะไร แต่รวมๆแล้วก็เพื่อทำให้โค้ดอ่านง่าย ไล่ง่าย เป็นระเบียบ หรือเพื่อจุดประสงค์เฉพาะตัวแต่ละโปรเจค

ถ้าไม่ทำตามกฏหล่ะ?

....

ไม่เกิดอะไรขึ้น แค่จะขึ้น WARNING ตัวแดงๆให้เดฟสะดุ้งเท่านั้น ในบางโปรเจคก็จะ build ไม่ผ่าน

ตัวอย่างกฏ ESLint 5 ข้อ

กฏ 1 : ห้ามใช้ตัวเลข hard-coded ( no-magic-numbers )

❌

if (userAge > 18) {
  console.log("User is an adult.");
}

ปัญหาคือเลข 18 คนมาอ่านทีหลังไม่รู้ว่าเลขนี้ใช้ทำอะไร แก้ไขได้มั้ย

✅

const ADULT_AGE = 18;
if (userAge > ADULT_AGE) {
  console.log("User is an adult.");
}

ก็บอกความหมายไปเลย

กฏ 2 : จำกัดจำนวนบรรทัดไฟล์ ( max-lines )

"Too many lines, too little focus."

ไฟล์ที่ยาวเกินไปมักแปลว่า "มีมากเกินไปในไฟล์เดียว" — ควรแยก module หรือแยก function ออกมาให้อ่านง่ายกว่า

❌

// auth.js

function login() {
  // ...อีก 100 บรรทัด
}
function logout() {
  // ...อีก 100 บรรทัด
}
// แล้วก็ยังมี register, forgotPassword, reset, validateToken, etc...

มีโค้ด 1000 บรรทัดในไฟล์เดียวบางครั้งก็ไม่ใช่เรื่องดี

✅

// login.js
export function login() { ... }

// logout.js
export function logout() { ... }

📏 ตั้งกฎไว้เลย เช่น max-lines: ["error", { "max": 300 }] แล้วขึ้นไฟล์ใหม่

กฏ 3 : ห้ามเขียนย่อๆ ( curly )

"Braces save lives (and bugs)."

ถ้าไม่ใส่ {} แล้วเพิ่มบรรทัดทีหลัง = พังแบบเนียนๆ

❌

if (isLoggedIn)
  if (isAdmin)
    showDashboard();
else
  showLogin(); // ?

ผ่านไปอาทิตย์นึง ลองกลับมาอ่านดูสิ - else นี้เป็นของ if ไหนเนี่ย

✅

if (isLoggedIn) {
  if (isAdmin) {
    showDashboard();
  } else {
    showLogin();
  }
}

ชัดเจน อ่านง่าย ปลอดภัย 🔒

กฏ 4 : ห้ามใช้ var ( no-var )

"var is history, use let or const."

var มี scope แบบ function — งงง่าย, bug ง่าย

ไม่เหมือน let และ const ที่มี scope แบบ block

❌

function doSomething() {
  if (true) {
    var message = "Hello!";
  }
  console.log(message); // message ใช้ได้เฉยเลย
}

"เฮ้ย! อยู่ใน if ไม่ใช่เหรอ? ทำไมออกมาข้างนอกได้?"

เพราะ var มอง scope แค่ระดับ function — จะไม่สนใจ {}เ ลย

✅

function doSomething() {
  if (true) {
    const message = "Hello!";
  }
  console.log(message); // message is not defined
}

กฏ 5 : โค้ดไม่ได้ใช้ เขียนมาทำไม ( no-unreachable )

โค้ดที่ไม่ใช้ เขียนมาจะงง เปลืองเมโมรี่เปล่าๆ

"แล้วถ้าต้องใช้ที่หลังหล่ะ?"

"เอาขึ้นกิตครับ"

❌

function myFunction() {
  return "done";
  console.log("This will never run");
}

ผ่านไปอาทิตย์นึง ลองกลับมาอ่านดูสิ - else นี้เป็นของ if ไหนเนี่ย

✅

function myFunction() {
  console.log("doing stuff");
  return "done";
}

Lint อื่นๆ

Smell	กฎ ESLint / Plugin	ช่วยยังไง
ตัวแปรไม่ได้ใช้	no-unused-vars	ตัด dead code, ลดความสับสน
import ไม่ได้ใช้	no-unused-vars, eslint-plugin-import	เคลียร์ไฟล์ให้โล่ง, ลด bundle size
console.log หลงมา	no-console	กัน log หลุด production
ใช้ var แทน let/const	no-var	ป้องกัน hoisting, เพิ่มความปลอดภัย
ใช้ == แทน ===	eqeqeq	ลด bug จาก type coercion
if ซ้อนกันหลายชั้น	complexity, max-depth	เตือนให้แยก logic, refactor
function ยาวไป	max-lines-per-function, max-statements	บีบให้แยก function ย่อย
parameter เยอะเกิน	max-params	ชี้ว่าควรห่อ params เป็น object
ใช้ any เยอะเกิน	@typescript-eslint/no-explicit-any	บังคับ type ที่ชัดเจนขึ้น
ใช้ type แบบ implicit	@typescript-eslint/explicit-function-return-type	ช่วยให้ type ตรวจสอบได้ตรง
ใช้ code ซ้ำ	eslint-plugin-sonarjs – no-identical-functions	ลด duplication
magic number	no-magic-numbers	เตือนให้ตั้งชื่อค่าแทนเลขลอยๆ
ไม่จัด format code	indent, semi, quotes, prettier	อ่านง่าย, code consistency
import ไม่เรียง	eslint-plugin-import – order	import เป็นระเบียบ หาเจอง่าย
ใช้ hook ผิด pattern	eslint-plugin-react-hooks	ป้องกัน bug กับ React hook
JSX ไม่มี key ตอน map	react/jsx-key	ป้องกัน bug render ซ้ำ
JSX ใช้ tag ที่ไม่ accessible	eslint-plugin-jsx-a11y	เตือน accessibility issues
ใช้ this แบบผิดๆ	no-invalid-this	กัน context พังโดยไม่ตั้งใจ
ใช้ object ที่ไม่ได้ clone	no-restricted-syntax (custom)	ป้องกัน mutation side effects

อ่านเพิ่มเติม

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Lintergeteslint

typescript-eslinttypescript-eslint.io