Code Conventions ใน JavaScript
ว่ากันด้วยเรื่องการควบคุม Code Conventions หรือ Style Guideในภาษา JavaScript
เนื่องด้วยเมื่อเราทำงานเป็นทีมกับเพื่อนของเราในโปรเจ็คต่างๆ การทะเลาะกันในเรื่องของสไตล์การเขียนโค้ดคงเป็นเรื่องปกติ
ตัวอย่างความไม่ลงรอย ?
บางคนอาจเขียนโค้ดโดยใช้ Tab บางคนอาจเขียนโดยใช้ Space ขึ้นอยู่กับความชอบ หรือความเชื่อ(?!) ในแต่ละตัวบุคคล
หรืออีกตัวอย่างนึงสำหรับการเคาะวรรคเวลาเขียน function หรือ if else เช่น
function foo(){...}กับ
function foo () {...}สิ่งเหล่านี้ไม่ใช่เรื่องแปลกใหม่สำหรับโปรแกรมเมอร์อย่างเราๆ แต่จะทำยังไงให้โค้ดภายในโปรเจ็คของเราที่ทำงานด้วยกันกับเพื่อน มีรูปแบบที่ไปในแนวทางเดียวกัน ไม่ใช่คนนึงเขียนแบบนึง พอมาอีกคนก็เขียนแบบนึง
เครื่องมือ…
วันนี้จึงขอมาแนะนำให้รู้จักกับ Tools สำหรับจัดการเรื่อง Code Conventions ในภาษา JavaScript 2 ตัว ที่จะขาดไม่ได้เลยในทุกๆ โปรเจ็คที่ผมทำ
1. ESLint
ตัว ESLint นั้น เป็นเหมือนเจ้าใหญ่เจ้าดังเลยสำหรับเครื่องมือในการตรวจสอบ Code Conventions ในภาษา JavaScript
โดยข้อดีของ ESLint นั่นคือ มีผู้ใช้จำนวนมาก จึงทำให้มี standard ที่บริษัทต่างๆ ทำขึ้นมาเป็นของตัวเอง
หากใครอยากลอกเลียนการเขียนโค้ดสไตล์บริษัทที่ตนสนใจอยู่ ก็สามารถ import เข้ามา แล้วเจ้า ESLint ตัวนี้ก็จะบังคับเราให้เขียนโค้ดตามสไตล์ที่เราเลือกทันที
คำว่า lint เป็นเหมือน keywords สำหรับการตรวจสอบ Code Conventions หากใครหา tools เหล่านี้อยู่ ก็ลอง search ด้วย keyword นี้ดูจะมีตัวอื่นอีกเยอะแยะ
Prerequisite
Install ESLint for Global
$ npm install -g eslintหลังจากนั้นเราจะได้คำสั่ง eslint ที่ใช้ที่ไหนก็ได้ในเครื่องเราแล้ว
Create and Setup Project
$ mkdir my-awesome-project
$ cd my-awesome-project
$ npm init// และกรอกข้อมูลโปรเจ็คให้เรียบร้อย
Setup ESLint and Rules
$ eslint --initหลังจากนั้นจะขึ้นตัวเลือกมาถามว่า
- เราอยากให้ ESLint ของเรา ยึด Rule ตามแบบไหน
- หากเป็นแบบที่คนนิยมกัน ก็จะมีให้เลือก Google, Airbnb หรือ Standard
- ไฟล์สำหรับจัดการ Rules จะอยู่ใน Format หรือสกุลไฟล์อะไร (.eslintrc)
โดยในบทความนี้ผมจะใช้ Rules ตามที่ Airbnb คิดไว้ และเก็บไฟล์ Rules ใน format JSON
Install ESLint in Text Editor
ตรงขั้นตอนนี้ขึ้นอยู่กับ Text Editor ที่ท่านเลือกใช้เลยครับ
สำหรับผมนั้นเลือกใช้ Sublime Text ก็ต้องทำการลง
Usage
เมื่อเราจัดการลงทุกอย่างเสร็จสรรพหมดแล้ว วิธีใช้ก็ง่ายมากๆ นั่นคือ..
สร้างไฟล์ .js ขึ้นมา เช่น index.js จากนั้นทำการพิมพ์อะไรเฉิ่มๆ เข้าไป เช่น
จากรูปภาพดังกล่าวจะเห็นว่า ผมประกาศฟังก์ชันไปชื่อนึง แต่ตอนเรียกใช้กลับเรียกผิดชื่อ หรือว่าผมไปเรียกใช้ console.log() ที่ทาง Airbnb ตั้ง rule ไว้ว่าจะ warn หากใช้
เจ้า ESLint ภายใน Sublime Text ของผมก็จะทำการด่าผมทันที เป็นกรอบสีแดงๆ เหลืองๆ ตามที่เห็นนั่นเอง
ใครอยากรู้ Airbnb ตั้ง Rules ไว้ยังไงบ้าง อ่านได้จาก ที่นี่
2. EditorConfig
สำหรับการใช้เจ้าตัวนี้ก็ตามชื่อของมันเลย เป็นเหมือนดั่ง config สำหรับ Editor ที่เราใช้อยู่นั่น แถมยังเข้าใจง่าย แต่กลับมีประโยชน์สุดๆ
Prerequisite
Install EditorConfig in Text Editor
เช่นเดิม การลง Package นั้นขึ้นอยู่กับ Editor ที่ท่านเลือกใช้
ในกรณีของผม ผมใช้ Sublime Text เป็น Editor เพราะฉะนั้นผมก็ต้องทำการลง
Create EditorConfig File
ทำการสร้างไฟล์ โดยตั้งชื่อว่า .editorconfig ขึ้นมาในโปรเจ็ค
จากนั้นทำการใส่ค่า config ตามที่ต้องการ เช่น
Usage
การใช้งานนั้นใน Sublime Text ของผม มันจะทำการแก้ไขไฟล์ให้เป็นไปตามกฎที่ผมตั้งไว้ภายใน .editorconfig
เช่น จากกฎด้านบน ผมบอกว่าให้มันทำการ trim หรือลบ space bar หลังคำสั่งแต่ละบรรทัดหากมี และทุกไฟล์บรรทัดสุดท้ายต้องขึ้นบรรทัดใหม่เสมอ
ตัวอย่าง
ในกรณีนี้ผมใส่ space เข้าไปไว้หลังคำสั่งแต่ละบรรทัด รวมไปถึงบรรทัดท้ายสุดที่ไม่มีการขึ้นบรรทัดใหม่ สังเกตได้จากกรอบสีแดงที่ lint มันกำลังด่าผมอยู่
หลังจากนั้นเมื่อผมทำการกด save ไฟล์โดยที่ยังไม่ได้แก้ไขอะไร ผมก็คือ
มันจะทำการ trim space หลังคำสั่งแต่ละบรรทัด และเติมการขึ้นบรรทัดใหม่ให้ในบรรทัดสุดท้ายโดยอัตโนมัติ โดยที่ผมไม่จำเป็นต้องแก้ไขอะไรเลย
ส่งท้าย
สำหรับ Tools ที่ผมเลือกใช้ในการควบคุม Code Conventions ในโปรเจ็ค ก็จบไปแล้วนะครับ
จริงๆ ยังมีบทความที่ยังอยากเขียนถึงในเรื่องของ Clean Code JavaScript ว่าทำยังไงให้ Code ของเราที่เขียนออกมานั้น ดูสละสลวย สวยงาม กิ้บเก๋ น่าอ่าน
แต่ด้วยกลัวว่าบทความจะยาวเกิน ก็จะขอแยกเขียนไว้เป็นอีกบทความในโอกาสหน้าละกันครับ
สำหรับเพื่อนๆ ใครที่มี Tools ต่างๆ ที่ใช้ในการควบคุม Code Conventions หรือรูปแบบการเขียน Clean Code ก็อย่าลืมมาแชร์ หรือพูดคุยกันในคอมเม้นท์ข้างใต้นะครับ ขอบคุณครับ
สุดท้ายนี้ขอปิดด้วยคลิปตลกจากซีรีส์ชื่อดัง Silicon Valley ที่ได้มีบทลักษณะการเถียงกันเรื่อง Tabs VS Spaces
