การใช้ .editorconfig เป็นวิธีที่ช่วยให้ทีมพัฒนาซอฟต์แวร์ทำงานร่วมกันได้ราบรื่นขึ้น โดยเฉพาะเมื่อสมาชิกในทีมใช้ Code Editor ที่ต่างกัน ไฟล์นี้จะช่วยกำหนดมาตรฐานของรูปแบบ Code ให้ตรงกันโดยอัตโนมัติครับ
.editorconfig คืออะไร ? ทำไมต้องใช้ ?
.editorconfig คือไฟล์กำหนดค่าขนาดเล็กที่วางไว้ใน Root ของโปรเจกต์ เพื่อบอกให้ Code Editor ทราบว่าควรจัดรูปแบบโค้ดอย่างไร เช่น การย่อหน้า , การขึ้นบรรทัดใหม่ หรือการจัดการช่องว่างท้ายบรรทัด
ประโยชน์หลัก
- Consistency: โค้ดทั้งโปรเจกต์จะมีรูปแบบเดียวกัน ไม่ว่าจะเขียนโดยใคร
- IDE Agnostic: ใช้งานข้าม Editor ได้ ไม่ต้องไปตั้งค่าใน Preference ของโปรแกรมแต่ละคน
- No More “Tab vs Space” War: ลดความขัดแย้งในทีมเรื่องการใช้ Tab หรือ Space เพราะตัวไฟล์จะบังคับให้เองตามที่ตกลงกันไว้
โครงสร้างและคำสั่งที่ใช้บ่อย
ไฟล์นี้มักจะเริ่มต้นด้วย root = true เพื่อบอกว่านี่คือไฟล์ตั้งค่าหลัก และใช้การระบุชนิดของไฟล์ผ่าน Wildcards
ตัวอย่างไฟล์ .editorconfig
# บอกว่าเป็นไฟล์ระดับบนสุดของโปรเจกต์
root = true
# ตั้งค่าเฉพาะไฟล์ Markdown (ใช้ 2 spaces) [*.md]
indent_size = 2
trim_trailing_whitespace = false
# ตั้งค่าเฉพาะไฟล์ในโฟลเดอร์ lib
[lib/**.js]
indent_style = tab
# ตั้งค่าสำหรับทุกไฟล์
[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
spelling_language = th_TH
tab_width = 4
trim_trailing_whitespace = true
# C# Files
[*.cs]
indent_size = 4
indent_style = tab
insert_final_newline = true
tab_width = 4
trim_trailing_whitespace = true
คำอธิบาย Property สำคัญ
indent_style: เลือกระหว่างtabหรือspaceindent_size: จำนวนช่องว่าง หรือความกว้างของ tabend_of_line: กำหนดการขึ้นบรรทัดใหม่trim_trailing_whitespace: ลบช่องว่างที่เกินมาท้ายบรรทัดให้อัตโนมัติเมื่อกด Saveinsert_final_newline: เพิ่มบรรทัดว่างต่อท้ายไฟล์เสมอ
วิธีเริ่มต้นใช้งาน
- สร้างไฟล์: สร้างไฟล์ชื่อ
.editorconfigไว้ที่โฟลเดอร์นอกสุดของโปรเจกต์ - เขียน Rule: ใส่การตั้งค่าตามความต้องการของทีม
- ตรวจสอบ Editor: * VS Code: ต้องติดตั้ง Extension ที่ชื่อว่า EditorConfig for VS Code
- JetBrains : รองรับในตัวอยู่แล้ว ไม่ต้องลงเพิ่ม
- Commit เข้า Git: อย่าลืม push ไฟล์นี้ขึ้น Git เพื่อให้ทุกคนในทีมได้รับค่าติดตั้งเดียวกัน
ข้อควรระวัง: อย่าลืม Backup หรือทำ Snapshot ของโปรเจกต์ก่อนที่จะทำการ Re-format โค้ดชุดใหญ่ตามไฟล์ .editorconfig ใหม่ เพื่อป้องกันความผิดพลาดที่อาจเกิดขึ้นกับโครงสร้างไฟล์เดิมครับ
อ่านเพิ่มเติม