ESLint Installation

โดยปรกติแล้วเวลาเราเขียน Javascript Code มักจะไม่ค่อยมีตัวแสดง Error ให้เห็นบน editor บางที่กว่าจะรู้ก็ต้องไปเห็นตอน runtime ทุกที

จะดีกว่ามั๊ย หากเราสามารถทำให้ editor ตัวโปรดของเราตรวจเจอ error ใน code ได้ตั้งแต่ตอนเขียน code โดยแจ้งเป็น error ชัดเจน พร้อมทั้งบอกวิธีแก้ไขแบบเดียวกับพวก strong type language อย่าง Java, C#

และ ESLint คือคำตอบที่จะทำให้คุณสามารถเขียน Javascript ใน editor ตัวโปรดของคุณได้อย่างละมุนนิ้วยิ่ง

Install on Atom

เริ่มต้นจาก Editor อันดับหนึ่งในใจใครหลายคน Atom

Editor Setup

สำหรับภาษาทุกภาษานั้น จะมีมาตรฐานกลางอยู่ ซึ่งมาตรฐานการเขียน code เหล่านั้น เขาเรียกว่า Lint หรือ Linter ดังนั้น เพียงแต่ linter นั้นเป็นแค่แกนกลวงๆ ที่ยังไม่มีมาตรฐานของภาษาใดๆ เป็นการเฉพาะเจาะจง ต้องรอให้เราติดตั้งตัว linter เฉพาะกิจของแต่ละภาษาพ่วงเข้าไปด้วย ดังนั้น เวลาเราติดตั้ง ESLint ให้กับ Atom เราจึงต้องติดตั้งทั้ง linter และ linter-eslint (linter สำหรับ ECMAScipt หรือ JavaScript) โดยวิธีการก็ง่ายมาก ดังนี้

ให้เปิดหน้า Settings โดยเลือก Atom -> Preferences…

screen-shot-2559-11-17-at-1-22-05-pm

จากนั้นให้เลือก Install แล้วให้ search ด้วยคำว่า ‘linter-eslint’ จากนั้นให้คลิก install linter-eslint และ linter ดังรูปscreen-shot-2559-11-17-at-1-59-27-pm

Project setup

งานยังไม่จบครับ เพราะการจะให้ ESLint ช่วยเราตรวจ code นั้น ต้องลง js module บางตัวเพิ่มด้วย ซึ่งตัว module นี้มีชื่อว่า eslint-config-rallycoding อันเป็น module ที่เราจะต้องทำการ install ผ่าน NPM ให้เป็น dependency ของแต่ละโปรเจ็กท์

ดังนั้น เราจึงต้องสร้างโปรเจ็กท์ที่เราต้องการทำงานขึ้นมาก่อน ชื่อว่า albums โดยให้เราพิมพ์ command ต่อไปนี้ใน terminal ตรง folder ที่เราเตรียมไว้สำหรับสร้างโปรเจ็กท์ของเรา ดังนี้

หมายเหตุ: เวลาที่ใช้ในการ init react native project อาจจะนานนิสนึง

จากนั้นให้ทำการติดตั้ง eslint-config-rallycoding ผ่าน npm ดังนี้

สร้างไฟล์ .eslintrc

ให้สร้างไฟล์ที่ root path ของ project albums ชื่อว่า .eslintrc แล้วเขียน code ดังนี้

จบครับ คราวนี้ให้เปิดไฟล์ index.ios.js ที่อยู่ตรง root path ขึ้นมา แล้วลองลบ หรือแก้ให้ code มันผิดดูดิครับ จะเห็นอะไรดี ดังรูป

screen-shot-2559-11-17-at-5-24-24-pm

จากตัวอย่างข้างบน ผมลบ ‘;’ ออกจากตัว import มันก็แจ้ง error เลย

Install on Sublime

ต่อไปก็เป็นการ install ESLint สำหรับ editor สุดฮิตอีกตัวหนึ่ง Sublime (บอกไว้ก่อนเลยนะครับ Sublime ถูกตัดแต้มเยอะมากสำหรับผม เพราะติดตั้ง ESLint ยากกว่า แถมยังตรวจจับ code error ได้ไม่เนียนตาเท่า Atom ด้วย)

Editor Setup

ขั้นต้นให้ทำการ install eslint module แบบ global ก่อน (คือลงครั้งเดียวแล้วทุกโปรเจ็กท์สามารถใช้ได้) โดยพิมพ์คำสั่งดังนี้

จากนั้นให้ทำการ install package control ให้กับ sublime สำหรับคนที่ยังไม่ได้ install (คือไม่เข้าใจว่า Sublime แล้วทำไมไม่ติดตั้งมาให้เลยฟะ จะมามีกระบวนการ post installation ที่มันยุ่งยากตามมาทำไม) โดยให้เข้าไปที่ https://packagecontrol.io/installation จากนั้นให้ copy ตรง textbox ที่เขียนว่า SUBLIME TEXT3 ดังรูป

screen-shot-2559-11-17-at-5-37-08-pm

จากนั้นให้กลับมาที่ Sublime จากนั้นแล้วเลือกเมนู View > Show Console แล้วนำข้อมูลที่เรา copy ไว้ไปวางไว้ใน console ด้านล่างสุด จากนั้นก็เคาะ enter

screen-shot-2559-11-17-at-5-40-36-pm

จากนั้นให้เลือกเมนู Tools > Command Palette… แล้ว search หาคำว่า Package Control: Install Package แล้วคลิกเลือก ดังรูปscreen-shot-2559-11-17-at-5-48-29-pm

จากนั้นให้ค้นหา sublimelinter-contrib-eslint เพื่อทำการติดตั้ง

screen-shot-2559-11-17-at-5-51-42-pm

หลังจากติดตั้งเสร็จแล้วให้ทำการ restart Sublime ใหม่

Project Setup

ขั้นตอนการเซตอัพให้แต่ละโปรเจ็กท์สามารถใช้งาน ESLint สำหรับ Sublime นั้นจะเหมือนกับของ Atom ดังนั้น สามารถไปดูหัวข้อ Project Setup ของ Atom ได้เลย

เมื่อทำการติดตั้งเสร็จแล้วให้เราลองทดสอบทำ code ให้ผิด จากนั้นก็ให้ save file มันก็จะแสดง error ออกมา (จะเห็นว่ามันต่างจาก Atom ตรงที่ของ Sublime ต้อง save เสียก่อนจึงจะแสดง error แต่ของ Atom ไม่จำเป็น)

screen-shot-2559-11-17-at-5-58-20-pm

สรุป

เสร็จแล้วนะครับสำหรับการเซตอัพให้ code แสดง error เมื่อมีการเขียนผิดโดยใช้ ESLint