คู่มือการใช้ SublimeLinter สำหรับนักพัฒนา

linter เป็นเครื่องมือที่ขาดไม่ได้ในการพัฒนาเว็บยุคใหม่ มันช่วยให้เราสามารถตรวจสอบข้อผิดพลาดและบังคับใช้แนวทางปฏิบัติที่ดีที่สุดเมื่อเขียนรหัส หากคุณใช้ SublimeText ฉันขอแนะนำให้ติดตั้ง SublimeLinters ในช่วงหลายปีที่ผ่านมา SublimeLinters ได้กลายเป็นชุดเครื่องมือไฟฟ้าใน SublimeText และนำแพคเกจอย่างเป็นทางการที่เชื่อมต่อกับ linters ของภาษาการเขียนโปรแกรมต่างๆ.

ในบทช่วยสอนนี้เราจะดูวิธีการติดตั้งและตั้งค่า SublimeLinter มาเริ่มกันเลยดีกว่า.

เริ่มต้นใช้งาน

วิธีที่ง่ายที่สุดในการติดตั้ง SublimeLinter 4 คือการควบคุม SublimeText Package นับตั้งแต่ใน SublimeLinter 3, แต่ละ linter จะต้องติดตั้งแยกต่างหาก สิ่งนี้ช่วยให้ SublimeLinter ทำงานได้อย่างมีประสิทธิภาพมากขึ้นโดยการรันเฉพาะ linters ที่เราได้ติดตั้ง.

เนื่องจากฉันใช้ HTML, CSS, JS และ PHP เป็นส่วนใหญ่ในโครงการของฉันฉันต้องการติดตั้ง linters สำหรับภาษาเหล่านี้ ใน การควบคุมบรรจุภัณฑ์, ฉันติดตั้ง SublimeLinter พร้อมกับปลั๊กอินต่อไปนี้:

• SublimeLinter-HTML-เป็นระเบียบเรียบร้อย
• SublimeLinter-stylelint
• SublimeLinter-eslint
• SublimeLinter-PHP

จากนั้นเพื่อให้ปลั๊กอินเหล่านั้นทำงานได้เราจำเป็นต้องติดตั้ง linter สำหรับภาษาซึ่ง ได้แก่ HTML Tidy, CSSLint, JSHint และ PHP CLI.

สำหรับผู้ที่ใช้ OSX, Tidy และ PHP จะถูกติดตั้งไว้ล่วงหน้าในระบบ หากต้องการตรวจสอบให้รันคำสั่งสองคำสั่งต่อไปนี้อย่างต่อเนื่อง.

 เป็นระเบียบเรียบร้อย - phersion --version 

คำสั่งเหล่านี้จะแสดงเวอร์ชั่นที่เป็นระเบียบและ PHP ที่คุณมี คุณสามารถใช้พวกมันต่อไปใน Sublime Text.

หากคุณใช้ Windows หรือ Linux หรือไม่มีการติดตั้งไว้คุณสามารถทำตามคำแนะนำด้านล่าง.

การติดตั้ง HTML Tidy

วิธีติดตั้ง HTML Tidy:

• ใน OSX, เรียกใช้คำสั่งนี้ในเทอร์มินัล ชงติดตั้ง homebrew / dupes / tidy
• ใน Linux, ใช้คำสั่งนี้ sudo apt-get install tidy.
• ใน Windows, คุณสามารถคว้าตัวติดตั้ง EXE จาก TidyBatchFiles.

การติดตั้ง PHP CLI

• ผู้ใช้ OSX สามารถติดตั้ง PHP ในระบบได้ curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5 คำสั่ง สิ่งนี้จะติดตั้ง PHP 5.5 ซึ่งเป็นเวอร์ชั่นล่าสุดในขณะที่เขียน.
• ลินุกซ์ ผู้ใช้สามารถติดตามบทช่วยสอนที่ครอบคลุมจาก DigitalOcean.
• สำหรับผู้ใช้ Windows, คุณสามารถดาวน์โหลดตัวติดตั้งได้ที่นี่.

การติดตั้ง Styleint

ต่อไปเราจะติดตั้ง CSS linter ที่เรียกว่า Stylelint ซึ่งจะช่วยให้เราตรวจสอบและบังคับใช้แนวทางปฏิบัติที่ดีที่สุดในไฟล์ CSS ของเรา คำแนะนำต่อไปนี้สามารถติดตามได้ในแพลตฟอร์มทั้งสาม: OSX, Windows และ Linux ฉันคิดว่าคุณได้ติดตั้ง Node.js ด้วย NPM แล้ว.

ในการติดตั้ง Stylelint ให้เรียกใช้:

 npm install -g stylelint 

โปรดทราบว่าคุณจะต้องเพิ่มไฟล์การกำหนดค่า Stylelint ไปยังไดเรกทอรีโครงการของคุณติดตั้งการกำหนดค่าที่กำหนดไว้ล่วงหน้าเพิ่มเติมเช่น stylelint-config-standard เมื่อกำหนดค่าเหล่านี้แล้วคุณควรพบข้อผิดพลาดที่เน้นด้านล่าง.

กำลังติดตั้ง ESLint

เรากำลังจะติดตั้ง ESLint ซึ่งเป็นส่วนต่อประสานที่ทันสมัยและกำหนดค่าสูงสำหรับ JavaScript สิ่งนี้จะช่วยเราในการบังคับใช้แนวทางปฏิบัติที่ดีที่สุดรวมถึงตรวจจับข้อผิดพลาดที่อาจเกิดขึ้นเมื่อเขียน JavaScript การติดตั้ง ESLint ยังต้องใช้ Node.js ด้วย NPM.

หากต้องการติดตั้งให้เรียกใช้.

 npm install -g eslint 

ในทำนองเดียวกันคุณจะต้องเพิ่มการกำหนดค่า ESLint ในโครงการของคุณหรือใช้การกำหนดค่าที่กำหนดไว้ล่วงหน้าเช่นแนะนำ eslint-config.

พวกเราทุกคนพร้อมแล้ว เราสามารถเริ่ม linting HTML, CSS, JS และ PHP ใน SublimeText โดยใช้ SublimeLinter 4.

คุณสมบัติใหม่ใน SublimeLinter 4

SublimeLinter 4 นำคุณสมบัติใหม่ ๆ มาใช้และคุณสมบัติที่สังเกตได้ง่ายคือแผงควบคุมที่แสดงข้อผิดพลาดทั้งหมดของไฟล์ที่เปิด หากคุณอยู่ใน Mac ให้กด Command + Ctrl + A ใน Windows และ Linux คุณสามารถกด Ctrl + K, Ctrl + A.

ปุ่มลัดจะแสดงรายการข้อผิดพลาดดังที่แสดงในภาพหน้าจอต่อไปนี้.

ใช้ ↑ และ ↓ เพื่อนำทางรายการและหน้าจะเลื่อนไปยังบรรทัดที่แน่นอนที่เกิดข้อผิดพลาด.

ภาพที่ดีขึ้น

ตอนนี้เราสามารถโฮเวอร์เหนือรางน้ำในตัวแก้ไขหรือเพียงแค่บรรทัดที่มีข้อผิดพลาดเกิดขึ้นเพื่อดูข้อความแสดงข้อผิดพลาด สิ่งนี้เป็นไปไม่ได้ในรุ่นก่อนหน้า.

กำหนดค่าได้สูง

SublimeLinter 4 สามารถปรับแต่งได้มากขึ้นกว่าเดิม ตัวอย่างเช่นตอนนี้เราสามารถกำหนดเองได้ “รูปแบบ” ไปยังการกำหนดค่า linter แต่ละครั้ง สิ่งนี้ทำให้เราสามารถตั้งค่าไอคอน, สี, โหมดผ้าสำลี, เส้นทางและตัวแปรสภาพแวดล้อมสำหรับแต่ละ linter แยกจากกัน.

อ้างอิงเพิ่มเติม

ฉันหวังว่าการแนะนำสั้น ๆ นี้จะช่วยให้สามารถเริ่มต้นใช้งาน SublimeLinter ได้ คุณยังสามารถอ้างถึงข้อมูลอ้างอิงหากคุณต้องการข้อมูลขั้นสูงเพิ่มเติม.

• SublimeLinter เอกสารทางการ
• ขุยในซอฟต์แวร์และการเขียนโปรแกรม - WikiPedia
• ที่เก็บ SublimeLinter