Syntax Checking แบบถูกสุขอนามัยบน Sublime

cover

หัวข้อพูดถึงการเขียนโค้ดแบบถูกสุขอนามัย แค่ดูจากภาพนี้มันต้องถูกสุขอนามัยแน่ๆ (credit http://www.zerochan.net/948521)

 

ก่อนจะเริ่มอ่านบทความนี้ หากใครยังไม่รู้จัก Sublime ขอแนะนำให้อ่านบทความที่แล้วก่อนนะครับ เพื่อความง่ายในการเข้าใจ

สวัสดีทุกคนอีกครั้งนะครับ วันทำงาน/วันเรียน ของทุกคนเป็นยังไงกันบ้างครับ มีความสุขกับ  Errors กันดีมั้ยครับ แต่ถ้าถามผมนี่ สุขทั้งน้ำตาเลยครับ ฮาาา แงงงง

เข้าใจว่าในการเขียนโปรแกรมนั้นปกติทุกคนมักเจอเจอกับปัญหา errors บ้าง โค้ดรันไม่ผ่านบ้าง อะไรพวกนี้กันเป็นปกติอยู่แล้ว โดยเฉพาะพวกที่เขียนภาษาสคริปต่างๆ เช่น PHP, Javascript, Python, etc. เพราะส่วนใหญ่พวกนี้ ไม่ค่อยมี IDE เฉพาะทางให้ใช้กันเท่าไหร่ ฉะนั้น เวลาเขียนโค้ดออกมาเลยไม่ค่อยต่างจากเขียนบน Notepad มากนัก เพราะเราไม่สามารถเทสพวก Syntax error อะไรได้เลย

แต่ปัญหาที่ใหญ่กว่าพวก Syntax Errors แต่เราไม่ค่อยรู้สึกถึงมันก็คือ การเขียนโค้ดให้ถูก Convention ของภาษานั้นๆ เช่นสมมุติเราจะเขียนฟังชั่นนึงขึ้นมาดังตัวอย่างใน python / javascript ดังนี้

จะสังเกตุได้ว่า ทั้ง 2 ภาษานี้ มีรูปแบบในการตั้งชื่อของฟังชั่นที่ต่างกัน โดยใน python นั้นจะเป็น snake_case ส่วน javascript นั้น จะเป็น camelCase ซึ่งจริงๆ แล้ว เราจะเขียนโค้ดแบบไม่สนใจ case อะไรที่ยุ่งยากแบบนี้ก็ได้ แต่มันก็มักจะทำให้เกิดปัญหาตามมาภายหลัง เช่น โค้ดไม่เข้ากับคนอื่นบ้าง อ่านยากบ้าง งงกับการเรียกใช้ฟังชั่นเองบ้าง (เพราะจำไม่ได้ว่าตัวเองใช้ case ไหน) หรือในโปรเจคใหญ่ๆที่มีคนเขียนโค้ดร่วมกันหลายคน ซึ่งการเขียนโค้ดลักษณะนี้ เราจะเรียกว่า “การเขียนโค้ดที่ไม่ถูกสุขอนามัย” นั่นเอง

ก่อนอื่น เรามาลองมองโค้ดทางด้านล่างนี้กัน มองผ่านๆแล้ว เราจะเข้าใจว่า มันก็เป็นโค้ดที่ดูปกคิธรรมดา ที่น่าจะทำงานได้อันนึง

okay

แต่ ถ้าเราให้ปลั้กอิน เช็คโค้ดแบบละเอียดให้ละ

not-okay

 

โอ้ มาย ก้อด!!! โค้ดเรามีปัญหาเยอะขนาดนี้เลยเชียว!!! เอาจริงๆ ปัญหาส่วนใหญ่พวกนี้มักจะเป็นปัญหาเล็กๆน้อยๆทั้งนั้น ชื่อคลาสที่ตั้ง ไม่ตรงกับที่ใช้บ้าง, ลืม semi-colon บ้างหรือการใช้ == กับ null ซึ่งแทบทั้งหมดนี้ ถ้าเราเขียนแบบปกติเรามักจะแทบมองไม่เห็นเลย หรือแม้แต่ต่อให้เราแก้จนโค้ดรันผ่านได้แล้ว ปัญหาเล็กๆน้อยๆหลายอย่างก็ยังอยู่ในโค้ดอยู่ดี

ปัญหาเล็กๆน้อยๆอย่างนี้ โดยทั่วไป เรามักจะไม่มองว่าเป็นปัญหากันเท่าไหร่ แต่หากเราได้ทำโปรเจคขนาดใหญ่ ที่มีไฟล์เป็นพันๆไฟล์ โดยที่แต่ละไฟล์ มีปัญหาเล็กน้อยเต็มไปหมด หรือวิธีการตั้งชื่อตัวแปรแตกต่างกันไม่เป็นมาตรฐาน โค้ดในโปรเจคนี้ก็อาจจะกลายเป็นโค้ดที่ไร้คุณภาพได้ไปในที่สุด

ฉะนั้น!! เรามาเริ่มทำการแก้ปัญหากันดีกว่า

การติดตั้ง

0.1. ทำการติดตั้ง Package Control
0.2. ตัวอย่างวิธีการลง Package ดูได้จากบทความที่แล้ว
0.3. ลง Node.js
0.4. ลง npm (เฉพาะผู้ใช้ Mac/Linux)

1. ทำการลง Package “SublimeLinter”

linter2. ทำการลง Package “SublimeLinter-jshint” (ตัวเช็ค Syntax สำหรับ Javascript)

jshint3. หลังจากลงเสร็จแล้ว Package นี้จะยังใช้ไม่ได้ทันที ต้องมีการตั้งค่าเล็กน้อย

3.1 ทำการลง jshint (ต้องมี Node.js และ npm ก่อน)  [sudo] npm install -g jshint

ins-jshintสามารถทดสอบว่าลง jshint สำเร็จรึเปล่าได้โดยการพิมพ์ jshint -v  บน cmd/terminal ได้

3.2 สร้างไฟล์ขึ้นมาใหม่ ชื่อว่า .jshintrc โดยวางไว้ที่ไหนก็ได้ ภายในไฟล์มีเนื้อหาดังนี้

3.4 จากนั้น ให้เข้าไปที่ Settings ของ SublimeLinter

settings

 

3.5. ทำการใส่ไฟล์ .jshintrc เข้าไปที่บรรทัดดังกล่าว (หรือทำการคัดลอกไฟล์นี้ไปทับ เพื่อที่จะให้การตั้งค่าเหมือนกับผู้เขียนก็ได้)

3.6 ทำการ Restart Sublime (ปิด/เปิดใหม่ นั่นเอง)
3.7 หากทำการแก้ไขไฟล์ .jshintrc ต้องทำการ ClearCache ของ SublimeLinter ทุกครั้งถึงจะมีผล

clear cache

4. Benefit

ปล. เราสามารถคลิกในตำแหน่งที่มีการเตือนได้ เพื่อแสดงสาเหตุที่มีการแจ้งเตือนทางมุมซ้ายล่าง

end

5. บางครั้ง เราอาจไม่ต้องการกฏบางอย่าง เราสามารถทำการเพิ่ม/ลบ กฏต่างๆได้ผ่านไฟล์ .jshintrc ได้เลย

และสุดท้ายนี้ นี่คือโค้ดที่เราทำการ Cleanup ให้ถูกสุขอนามัยนั่นเอง

last

 ท้ายที่สุดนี้ ผู้เขียนเชื่อว่าการใช้ตัวช่วยตรกูล Lint ไม่ว่าจะภาษาอะไร ก็จะสามารถช่วยให้โค้ดของเรามีประสิทธิภาพ และ ถูกสุขอนามัยขึ้นไม่มากก็น้อย (ขึ้นอยู่กับ Lint ของแต่ละภาษา) และช่วยลดเวลาในการทำงานเข้าไปอีกขั้น ในวันนี้ ขอกล่าวคำอำลาเพียงเท่านี้ สวัสดีครับ

Leave a Reply

Your email address will not be published. Required fields are marked *