จาวาสคริปต์แบบต่อเนื่องกับ JSHint

linting ในการเขียนโปรแกรมคอมพิวเตอร์เป็นกระบวนการของ รหัสการวิเคราะห์แบบคงที่เพื่อค้นหาปัญหาเช่นไวยากรณ์ผิดและการใช้รหัสไม่แน่นอน. เครื่องมือที่ใช้สำหรับผ้าสำลีเป็นที่รู้จักกันในชื่อ ผ้าสำลี หรือ linter. หนึ่งใน linters ที่มีให้สำหรับ JavaScript ในวันนี้คือ JSHint.

JSHint พร้อมใช้งานสำหรับหลายแพลตฟอร์ม เครื่องมือเว็บออนไลน์ที่พวกเราส่วนใหญ่คุ้นเคยคือ jshint.com นอกจากนี้ยังมี เครื่องมือบรรทัดคำสั่งผ่าน Node.js, JavaScript API, เครื่องมือแก้ไขข้อความหลายตัวและปลั๊กอิน IDE สำหรับ JSHint คุณสามารถดูรายการทั้งหมดของเครื่องมือ JSHint ที่มีอยู่สำหรับสภาพแวดล้อมที่แตกต่างกันในหน้าดาวน์โหลดและติดตั้งของเว็บไซต์ JSHint.

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

ผ่านเครื่องมือบรรทัดคำสั่ง

(1) หากคุณยังไม่ได้ติดตั้ง Node.js ในคอมพิวเตอร์ของคุณคุณจะต้องไปที่เว็บไซต์และดาวน์โหลดและติดตั้งก่อน เพื่อตรวจสอบว่า Node.js ได้รับการติดตั้งเรียบร้อยแล้วคุณสามารถเรียกใช้คำสั่ง npm -version ใน command-line interface (CLI) และมันจะแสดงเวอร์ชั่นของ Node.js ในคอมพิวเตอร์ของคุณ (หรือคุณเพียงแค่เรียกใช้คำสั่ง NPM และดูว่าเกิดอะไรขึ้น).

(2) ในการติดตั้งเครื่องมือ JSHint ให้รันคำสั่ง npm ติดตั้ง jshint ใน CLI หากคุณต้องการตรวจสอบว่าติดตั้ง JSHint สำเร็จหรือไม่ให้รันคำสั่ง jshint -version เพื่อดูเวอร์ชั่น เมื่อขั้นตอนนี้สิ้นสุดลงการติดตั้งเสร็จสมบูรณ์.

(3) หากต้องการเรียกใช้เครื่องมือให้ไปที่ไดเรกทอรีใน CLI ที่ไฟล์ JavaScript ของคุณ (พูด test.js) เป็นและเรียกใช้คำสั่ง jshint test.js. ผลลัพธ์ของการวิเคราะห์เครื่องมือในโค้ด JavaScript ของคุณจะปรากฏขึ้น (เช่นนี้):

ผ่านทาง API API

(1) ดาวน์โหลดไฟล์บีบอัดจากลิงค์ GitHub นี้และแตกไฟล์ ใน อ. คุณจะพบโฟลเดอร์ jshint ไฟล์ JS (ไลบรารี API).

(2) หากต้องการใช้ API ให้เพิ่ม jshint ไฟล์ JS ไปยังโครงการของคุณและเชื่อมโยงไปยังหน้าของคุณ API สามารถเข้าถึงได้ในรหัส JavaScript โดยใช้ฟังก์ชั่น / วัตถุที่เรียกว่า JSHINT. ด้านล่างเป็นตัวอย่างโค้ด HTML ที่ใช้ JavaScript API ของ JSHint เพื่อวิเคราะห์รหัส JavaScript ที่มีอยู่ใน แหล่ง อาร์เรย์และแสดงผลการวิเคราะห์บนหน้า.

(3) เราผ่าน แหล่ง อาร์เรย์ที่มีรหัสต้นฉบับ JavaScript ที่จะวิเคราะห์และ ตัวเลือก วัตถุที่มีตัวเลือก linting (เราจะเข้าไป ตัวเลือก ในไม่ช้า) เป็นพารามิเตอร์สำหรับ JSHINT ฟังก์ชัน ผลการวิเคราะห์ (วัตถุ JSON) ถูกดึงออกมาจาก JSHINTคุณสมบัติของฟังก์ชันที่เรียกว่า ข้อมูล.

(4) JSON.stringify ใช้สำหรับแสดงอย่างเดียวที่นี่เพื่อแสดงผลลัพธ์ที่ส่งคืนจาก ข้อมูล ฟังก์ชั่นในรูปแบบสตริงในหน้า เชิดชู สตริง JSON มีลักษณะเช่นนี้ ส่วนที่ไฮไลต์คือข้อผิดพลาดที่ JSHint พบในประโยคง่าย ๆ.

ตัวเลือก Linting

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

undef ตัวเลือกธงตัวแปรที่ไม่ได้ประกาศและ ไม่ได้ใช้ จะตั้งค่าสถานะตัวแปรที่ประกาศ แต่ไม่เคยใช้ เช่นนี้มีตัวเลือกมากมายที่คุณสามารถดูรายการในหน้านี้หากคุณต้องการค้นหาตัวเลือกมีแถบค้นหาที่มุมด้านขวาบน.

หากคุณใช้เครื่องมือ CLI ผ่าน Node.js คุณสามารถเขียนตัวเลือก linting ภายใน a package.json ไฟล์ภายใต้คุณสมบัติ jshintConfig ในไดเรกทอรีเดียวกัน คุณยังสามารถเพิ่มตัวเลือกเป็นคำสั่งในรหัส JavaScript.

 // - test.js - / * jshint undef: true, ไม่ได้ใช้: true * / foo (); a = 7;

มีวิธีเพิ่มเติมในการกำหนดค่าตัวเลือก linting ในโครงการของคุณตามเครื่องมือที่คุณใช้ ลองดูวิธีการต่างๆ องค์ประกอบ ที่นี่.