10 เครื่องมือ CSS และจาวาสคริปต์สำหรับการเพิ่มประสิทธิภาพรหัส

เครื่องมือการเย็บผ้าสำลีสามารถช่วยนักพัฒนาได้อย่างมาก เขียนคุณภาพดีรหัสเพิ่มประสิทธิภาพ. ผ้าสำลีเป็นกระบวนการตรวจสอบโค้ดที่ค้นหาข้อผิดพลาดในซอร์สโค้ดและทำเครื่องหมายข้อบกพร่องที่อาจเกิดขึ้น linters ส่วนใหญ่ใช้เทคนิคการวิเคราะห์รหัสแบบคงที่ซึ่งหมายความว่า ตรวจสอบรหัสโดยไม่ต้องดำเนินการจริง.

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

Linters ไม่เพียง แต่เป็นเครื่องมือในการป้องกันบั๊กเท่านั้น แต่ยังสามารถใช้ในระหว่างการดีบักได้อย่างมีประสิทธิภาพ เพื่อค้นหาข้อผิดพลาดที่จับยาก มิฉะนั้น. ในโพสต์นี้เราจะตรวจสอบเครื่องมือตีเส้น 10 อันที่มีประสิทธิภาพซึ่งคุณสามารถใช้เพื่อขยี้ไฟล์ CSS และ JavaScript ของคุณเพื่อปรับปรุงคุณภาพของโค้ดของคุณ.

1. CSSLint

CSSLint ยอมรับอย่างตั้งใจที่จะ "ทำร้ายความรู้สึกของคุณ" แต่ในการแลกเปลี่ยนมัน "ทำให้คุณรหัสดีขึ้นมาก" CSSLint ในปัจจุบันเป็นผู้นำตลาดของผ้าสำลี CSS มันเขียนใน JavaScript เป็นโอเพ่นซอร์สและมาพร้อมกับตัวเลือกที่กำหนดค่าได้มากมาย.

CSSLint ช่วยให้คุณ เลือกประเภทของข้อผิดพลาดและคำเตือน (ความเข้ากันได้ประสิทธิภาพการทำสำเนา ฯลฯ ) คุณต้องการทดสอบ, และ ตรวจสอบความถูกต้องของไวยากรณ์ CSS ของคุณกับกฎที่คุณเลือก.

มันไม่เพียงทำงานในเบราว์เซอร์ แต่ยังมีอินเตอร์เฟสบรรทัดคำสั่งและคุณสามารถรวมเข้ากับระบบการสร้างของคุณเองได้เช่นกัน.

2. SublimeLinter CSSLint

CSSLint เป็นอุปกรณ์เสริม CSS ที่มีประสิทธิภาพซึ่งยากที่จะหาคู่แข่งที่วัดได้ อาจเป็นเหตุผลว่าทำไม SublimeLinter framework linting สร้าง CSS linting plugin ขึ้นมา SublimeLinter เป็นปลั๊กอิน SublimeText ให้ผู้ใช้มีวิธีในการ lint รหัสของพวกเขา (CSS, PHP, Python, Java, Ruby, ฯลฯ ) ขวาภายใน SublimeText editoR.

ก่อนที่คุณจะติดตั้งปลั๊กอิน SublimeLinter CSSLint คุณต้องติดตั้ง CSSLint เป็นโมดูล Node.js สิ่งที่ยอดเยี่ยมเกี่ยวกับเครื่องมือที่มีประโยชน์นี้คือคุณ เพียงแค่ต้องกำหนดการตั้งค่าเพียงครั้งเดียว, หรือหากคุณพอใจกับค่าเริ่มต้นที่คุณไม่จำเป็นต้องทำคุณก็สามารถรับคำเตือนและการแจ้งเตือนที่เกี่ยวข้องภายในเครื่องมือแก้ไข SublimeText ของคุณได้โดยไม่ต้องยุ่งยากอีกต่อไป.

3. StyleLint

StyleLint ช่วยให้นักพัฒนาหลีกเลี่ยงข้อผิดพลาดใน CSS, SCSS หรือไวยากรณ์อื่น ๆ ที่ PostCSS สามารถแยกวิเคราะห์ ทดสอบ StyleLint มานานกว่าร้อยกฎแล้วคุณก็ทำได้ เลือกสิ่งที่คุณต้องการเปิด (ดูตัวอย่างการกำหนดค่า).

หากคุณไม่ต้องการสร้างการกำหนดค่าของคุณเองคุณสามารถเลือกการกำหนดค่ามาตรฐานที่เขียนไว้ล่วงหน้าซึ่งมีกฎ StyleLint ประมาณ 60 กฎ StyleLint เป็นเครื่องมือที่ค่อนข้างยืดหยุ่นสามารถขยายได้โดยปลั๊กอินเสริมและใช้ใน 3 รูปแบบที่แตกต่างกัน: เป็นเครื่องมือบรรทัดคำสั่งเป็นโมดูล Node.js หรือเป็นปลั๊กอิน PostCSS.

4. เครื่องมือตรวจสอบ CSS ของ W3C

แม้ว่า CSS Validator ของ W3C มักจะไม่คิดว่าเป็นเครื่องมือขัดมันช่วยให้นักพัฒนามีโอกาสที่ดีในการตรวจสอบซอร์สโค้ด CSS ของพวกเขากับมาตรฐานอย่างเป็นทางการของ W3C W3C สร้างเครื่องมือตรวจสอบความถูกต้องเพื่อให้เครื่องมือที่คล้ายกับโปรแกรมตรวจสอบ Lint สำหรับภาษา C.

ตอนแรกพวกเขาสร้างเครื่องมือตรวจสอบมาร์กอัป HTML ที่ตามมาในภายหลังโดยเครื่องมือตรวจสอบ CSS เครื่องมือตรวจสอบ CSS ของ W3C ไม่มีตัวเลือกมากเท่า CSSLint แต่มี ส่งคืนข้อความแสดงข้อผิดพลาดและการแจ้งเตือนที่มีรายละเอียดและเข้าใจง่าย.

ในฐานะคุณสมบัติพิเศษคุณสามารถตรวจสอบรหัสของคุณเทียบกับมาตรฐานเว็บบนมือถือล่าสุดของ W3C ซึ่งไม่ใช่เรื่องเลวร้ายในยุคของเว็บบนมือถือ.

5. Dirty Markup

มาร์กอัปสกปรกจะล้างรูปแบบและตรวจสอบความถูกต้องของ HTML, CSS และรหัส JavaScript มันอาจเป็นตัวเลือกที่ดีถ้าคุณชอบการออกแบบที่ตรงไปตรงมาและต้องการทางออกที่รวดเร็ว มาร์กอัปสกปรก แสดงข้อความผิดพลาดและการแจ้งเตือนแบบเรียลไทม์ ในขณะที่คุณ เขียนหรือแก้ไขรหัสของคุณภายในตัวแก้ไข.

เมื่อคุณกดปุ่ม “สะอาด” ปุ่มมัน แก้ไขข้อผิดพลาดทางไวยากรณ์พร้อมกันจัดรูปแบบให้เรียบร้อย แต่ยังคงคำเตือนเหมือนเดิม ให้คุณแก้ปัญหาได้ตามที่คุณต้องการ คุณไม่สามารถเลือกกฎที่คุณต้องการทดสอบ แต่เป็นไฟล์ทั้งสามประเภท มีการตั้งค่าบางอย่างที่ช่วยให้คุณสามารถตัดสินใจรูปแบบ ของเอาต์พุตที่ทำความสะอาด.

6. JSLint

JSLint เปิดตัวครั้งแรกในปี 2545 โดยดักลาสคร็อคฟอร์ดและไม่สูญเสียโมเมนตัมมาก่อนดังนั้นคุณจึงสามารถสันนิษฐานได้ว่ามันเป็นเครื่องมือจาวาสคริปต์ที่เสถียร.

JSLint สามารถประมวลผลซอร์สโค้ด JavaScript และข้อความ JSON และมาพร้อมกับ การกำหนดค่าสำเร็จรูปที่เป็นไปตามแนวทางปฏิบัติที่ดีที่สุดของ JS Crockford เขียนเกี่ยวกับในหนังสือของเขาที่ชื่อ JavaScript: The Good Parts.

JSLint มีตัวเลือกไม่กี่ตัวเลือกที่คุณสามารถเลือกได้ แต่คุณ ไม่สามารถเพิ่มกฎที่กำหนดเองของคุณเองหรือปิดใช้งานคุณลักษณะส่วนใหญ่. JSLint ได้เริ่มรวมมาตรฐาน ECMAScript 6 ล่าสุดแล้วคุณสามารถตรวจสอบขั้นตอนปัจจุบันของการนำ ES6 ไปใช้ที่นี่.

7. JSHint

JSHint เป็นทางแยกที่ได้รับความนิยมอย่างสูงของ JSLint และถูกใช้โดย บริษัท เทคโนโลยีชั้นนำเช่น Facebook, Twitter และ Medium

JSHint เป็นโครงการที่ขับเคลื่อนด้วยชุมชนที่เริ่มต้นด้วยความพยายาม สร้าง JSLint เวอร์ชันที่สามารถกำหนดค่าได้และมีความเห็นน้อยกว่า. JSHint ช่วยให้นักพัฒนาสามารถกำหนดค่าตัวเลือก linting ใด ๆ และวางการกำหนดค่าที่กำหนดเองลงในไฟล์แยกต่างหากตัวเลือกที่ทำให้เครื่องมือสามารถนำมาใช้ใหม่ได้ง่ายและเหมาะสำหรับโครงการขนาดใหญ่.

คุณไม่เพียง แต่สามารถใช้ JSHint เพื่อขานรับ JavaScript วานิลลา แต่ก็ยังมีการสนับสนุนนอกกรอบสำหรับไลบรารี JS ที่ได้รับความนิยมมากมายเช่น jQuery, Mootools, Mocha และ Node.js.

8. ESLint

ESLint เป็นสิ่งที่ยิ่งใหญ่ล่าสุดบนแนวนอนลายจาวาสคริปต์ ความนิยมของมันเกิดจากธรรมชาติที่มีความยืดหยุ่นสูง คุณไม่เพียง แต่สามารถปรับแต่งกฎการตัดต่อที่ซับซ้อนมากมายและรวมเข้ากับเครื่องมือแก้ไขโค้ดหลักทั้งหมด แต่คุณยังสามารถ ขยายฟังก์ชันการทำงาน โดยเพิ่มปลั๊กอินที่แตกต่างกัน.

ด้วยการระบุตัวเลือกการแยกวิเคราะห์คุณสามารถทำได้เช่นกัน เลือกมาตรฐานของภาษา JS ที่คุณต้องการสนับสนุน ในระหว่างกระบวนการ linting ซึ่งหมายความว่าคุณไม่เพียง แต่สามารถตรวจสอบสคริปต์ของคุณกับไวยากรณ์ ECMAScript 5 ที่เป็นค่าเริ่มต้น แต่ยังใช้กับ ECMAScript 6, ECMAScript 7 และ JSX.

9. JSCS

JSCS หรือสไตล์โค้ด JavaScript เป็นรูปแบบโค้ดที่เสียบได้สำหรับ JavaScript ซึ่งจะตรวจสอบกฎการจัดรูปแบบโค้ด.

เป้าหมายของ JSCS คือการจัดให้มีวิธีการ โปรแกรมบังคับใช้การยึดมั่นกับแนวทางสไตล์การเข้ารหัสบางอย่าง. ถึงแม้ว่า JSCS จะไม่ตรวจสอบข้อผิดพลาดและข้อผิดพลาด แต่ก็ยังมีผู้เล่นสำคัญ ๆ หลายรายในอุตสาหกรรมเทคโนโลยีเช่น Google, AirBnB และ AngularJS เนื่องจากช่วยให้นักพัฒนาสามารถอ่านรหัสฐานที่สอดคล้องและอ่านง่าย.

JSCS เป็นตัวช่วยประหยัดเวลาตามจริงเนื่องจากมันจะแก้ไขข้อผิดพลาดในการจัดรูปแบบของคุณโดยอัตโนมัติดังนั้นคุณไม่จำเป็นต้องทำแบบนี้ทีละตัว มันมีค่าที่ตั้งล่วงหน้าที่แตกต่างกันจำนวนมากซึ่งเป็นของโครงการขนาดใหญ่เช่น Google, Grunt หรือการตั้งค่ารูปแบบการเข้ารหัสแบบวิกิมีเดียซึ่งคุณสามารถใช้ในโครงการของคุณเองได้อย่างง่ายดาย แต่ คุณยังสามารถสร้างการกำหนดค่าแบบกำหนดเองของคุณเอง.

10. StandardJS

StandardJS หรือ JavaScript Standard Style เป็นรูปแบบโค้ดแบบเดียวกับ JSCS แต่แตกต่างจากความเรียบง่ายและตรงไปตรงมา StandardJS สามารถเป็นตัวเลือกที่ยอดเยี่ยม, หากคุณไม่ต้องการใช้เวลากับการกำหนดค่า, แค่ต้องการเครื่องมือที่มีประสิทธิภาพที่จะหมดไป.

StandardJS ปฏิบัติตามกฎการจัดรูปแบบที่เขียนไว้ล่วงหน้าจำนวนหนึ่งและค่าหลักคือการทำให้การเข้ารหัสของคุณปราศจากสิ่งรบกวนกระบวนการทำงานดังนั้นคุณจึงไม่สามารถเปลี่ยนกฎที่คุณไม่เห็นด้วย เลือก StandardJS เท่านั้นหากคุณไม่ต้องการกำหนดค่าที่กำหนดเองและเพียงต้องการ บังคับใช้สไตล์โค้ดที่สอดคล้องกันในไฟล์ JavaScript ของคุณ.