Frontend Academy · บทเรียน

การตั้งค่า Prettier และ ESLint

เพิ่ม Prettier สำหรับจัดรูปแบบอัตโนมัติและ ESLint สำหรับตรวจจับข้อผิดพลาด กำหนดค่าเครื่องมือทั้งสอง และผสานเข้ากับกระบวนการจัดรูปแบบเมื่อบันทึก

การตั้งค่า Prettier และ ESLint เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงควรทำให้รูปแบบโค้ดเป็นอัตโนมัติ

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

การติดตั้ง Prettier

ติดตั้ง Prettier เป็นการพึ่งพาสำหรับการพัฒนา สร้างไฟล์กำหนดค่า และเพิ่มสคริปต์จัดรูปแบบลงใน package.json Prettier ทำงานได้โดยไม่ต้องมีการกำหนดค่า ค่าเริ่มต้นใช้งานได้อย่างเหมาะสม แต่คุณสามารถปรับแต่งค่าเหล่านี้ได้

npm install --save-dev prettier

# .prettierrc (optional config)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

การผสาน Prettier กับ VSCode

ติดตั้งส่วนขยาย Prettier - Code Formatter จากนั้นตั้งค่าให้เป็นตัวจัดรูปแบบเริ่มต้น และเปิดใช้ formatOnSave ในการตั้งค่า ต่อจากนี้ Prettier จะทำงานทุกครั้งที่คุณบันทึกไฟล์

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

การติดตั้ง ESLint

ติดตั้ง ESLint แล้วเริ่มต้นใช้งานด้วย npm init @eslint/config ตัวช่วยนี้ช่วยให้คุณเลือกสภาพแวดล้อม (เบราว์เซอร์/Node) ระบบมอดูล และการรองรับ TypeScript จากนั้นจะสร้างไฟล์ eslint.config.js

npm install --save-dev eslint
npx eslint --init

# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.js

ตัวอย่างการกำหนดค่า ESLint

ตัวอย่างการกำหนดค่าแบบแบนของ ESLint อย่างง่ายสำหรับโครงการ JavaScript บนเบราว์เซอร์ กฎสามารถเป็น 'error', 'warn' หรือ 'off' ได้ ขยายการกำหนดค่าที่ใช้ร่วมกัน เช่น @eslint/js recommended เพื่อสร้างพื้นฐานที่เข้มแข็ง

// eslint.config.js
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'eqeqeq': 'error'
    }
  }
];

ESLint สำหรับ TypeScript

สำหรับโครงการ TypeScript ให้เพิ่ม typescript-eslint เพื่อจับปัญหาเฉพาะของ TypeScript เช่น การใช้ any ที่ไม่ปลอดภัย การไม่ระบุชนิดข้อมูลที่ส่งกลับ และการใช้ Promise ผิดวิธี

npm install --save-dev typescript-eslint

// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.recommended
);

การใช้ Prettier และ ESLint ร่วมกัน

ESLint มีกฎการจัดรูปแบบบางอย่างที่ขัดแย้งกับ Prettier ใช้ eslint-config-prettier เพื่อปิดใช้กฎเหล่านั้น โดยให้ Prettier จัดการการจัดรูปแบบทั้งหมด และให้ ESLint จัดการเฉพาะคุณภาพโค้ด

npm install --save-dev eslint-config-prettier

// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
  js.configs.recommended,
  prettierConfig  // disables ESLint formatting rules
];

.eslintignore และ .prettierignore

ระบุให้เครื่องมือทราบว่าควรข้ามไฟล์ใด ไฟล์ .eslintignore ใช้ไวยากรณ์แบบ gitignore โดยทั่วไปคุณควรละเว้น node_modules, dist และไฟล์ที่สร้างขึ้นโดยอัตโนมัติ

# .eslintignore
node_modules
dist
.next
coverage

สคริปต์ npm สำหรับการตรวจสอบรูปแบบโค้ด

เพิ่มสคริปต์สำหรับตรวจสอบรูปแบบโค้ดและจัดรูปแบบลงใน package.json เพื่อให้ CI และเพื่อนร่วมทีมเรียกใช้ได้อย่างสอดคล้องกัน

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.tsx",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src"
  }
}

lint-staged และ husky สำหรับฮุกก่อนยืนยันการเปลี่ยนแปลง

ใช้ husky ร่วมกับ lint-staged เพื่อตรวจสอบรูปแบบโค้ดและจัดรูปแบบเฉพาะไฟล์ที่สเตจไว้โดยอัตโนมัติก่อนการยืนยันการเปลี่ยนแปลงใน git ทุกครั้ง วิธีนี้ช่วยป้องกันไม่ให้โค้ดที่ไม่ได้จัดรูปแบบหรือมีข้อผิดพลาดเข้าสู่แหล่งเก็บโค้ด

npm install --save-dev husky lint-staged
npx husky init

# package.json:
"lint-staged": {
  "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{css,json,md}": "prettier --write"
}

EditorConfig เพื่อความสอดคล้องพื้นฐาน

ไฟล์ .editorconfig บังคับใช้การตั้งค่าตัวแก้ไขพื้นฐาน เช่น รูปแบบการเยื้องและจุดสิ้นสุดบรรทัด ในตัวแก้ไขโค้ดและ IDE ทั้งหมด โดยไม่ขึ้นกับปลั๊กอิน ควรเพิ่มไฟล์นี้ไว้ร่วมกับ Prettier

# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

ตรวจสอบความเข้าใจ

เหตุใดจึงควรเพิ่ม eslint-config-prettier ลงในการกำหนดค่า ESLint ที่ใช้ Prettier ร่วมด้วย

ทบทวน: Prettier และ ESLint

Prettier จัดรูปแบบโค้ดโดยอัตโนมัติเมื่อบันทึกผ่านส่วนขยาย VSCode ESLint ตรวจจับข้อบกพร่องและการละเมิดรูปแบบ ใช้ eslint-config-prettier เพื่อหลีกเลี่ยงความขัดแย้ง เพิ่ม lint-staged + husky เพื่อบังคับใช้ก่อนยืนยันการเปลี่ยนแปลง เครื่องมือที่สอดคล้องกันช่วยขจัดการถกเถียงเรื่องการจัดรูปแบบและจับข้อบกพร่องได้ก่อนนำโค้ดไปใช้งาน

คำถามที่พบบ่อย

บทเรียน “การตั้งค่า Prettier และ ESLint” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การตั้งค่า Prettier และ ESLint” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า Prettier และ ESLint”

เพิ่ม Prettier สำหรับจัดรูปแบบอัตโนมัติและ ESLint สำหรับตรวจจับข้อผิดพลาด กำหนดค่าเครื่องมือทั้งสอง และผสานเข้ากับกระบวนการจัดรูปแบบเมื่อบันทึก คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การตั้งค่า Prettier และ ESLint” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

Chrome DevTools: Elements Console Network
VSCode: ส่วนขยาย Emmet และแป้นพิมพ์ลัด
การตั้งค่า Prettier และ ESLint
ความเข้ากันได้ของเบราว์เซอร์และ caniuse.com

← กลับไปที่ Frontend Academy