ขณะนี้ฉันกำลังตรวจสอบ JavaScript ของฉันกับ JSLint และกำลังดำเนินการต่อไปมันช่วยฉันในการเขียน JavaScript ที่ดีขึ้นโดยเฉพาะอย่างยิ่งในการทำงานกับห้องสมุด Jquery

ฉันมีตอนนี้เจอJSHintส้อมของJSLint
ดังนั้นฉันจึงสงสัยว่าเว็บแอปพลิเคชั่นซึ่งเป็นตัวขับเคลื่อนจาวาสคริปต์เป็นอย่างมากซึ่งเป็นเครื่องมือตรวจสอบที่ดีกว่าหรือมีประโยชน์มากที่สุดในการทำงานกับ:

• JSLint หรือ JSHint?

ฉันต้องการตัดสินใจตอนนี้เกี่ยวกับกลไกการตรวจสอบและก้าวไปข้างหน้าใช้สิ่งนี้เพื่อการตรวจสอบด้านลูกค้า

และความแตกต่างระหว่าง jshint และ jslint? โปรดอธิบายในตัวอย่างจาวาสคริปต์เดียว

ลิงค์:

1. jshint - http://www.jshint.com/

2. jslint - http://jslint.com/

[แก้ไข]
คำตอบนี้ได้รับการแก้ไข ฉันจะทิ้งคำตอบดั้งเดิมไว้ที่บริบท (ไม่เช่นนั้นความคิดเห็นจะไม่สมเหตุสมผล)

เมื่อคำถามนี้ถูกถามครั้งแรก JSLint เป็นเครื่องมือในการตัดกระดาษหลักสำหรับ JavaScript JSHint เป็นทางแยกใหม่ของ JSLint แต่ยังไม่ได้แยกจากต้นฉบับมากนัก

ตั้งแต่นั้นมา JSLint ยังคงนิ่งเงียบมากในขณะที่ JSHint มีการเปลี่ยนแปลงอย่างมาก - มันได้ทิ้งกฎการเป็นปรปักษ์กันมากขึ้นของ JSLint ได้เพิ่มกฎใหม่ทั้งหมดและมีความยืดหยุ่นมากขึ้น นอกจากนี้ยังมีเครื่องมืออื่น ESLint ซึ่งมีความยืดหยุ่นมากกว่าและมีกฎมากกว่า

ในคำตอบเดิมของฉันฉันบอกว่าคุณไม่ควรบังคับตัวเองให้ติดกับกฎของ JSLint; ตราบใดที่คุณเข้าใจว่าเหตุใดจึงมีการส่งคำเตือนคุณสามารถตัดสินเองว่าจะเปลี่ยนรหัสเพื่อแก้ไขคำเตือนหรือไม่

ด้วยชุดกฎพิเศษที่เข้มงวดของ JSLint จากปี 2011 นี่เป็นคำแนะนำที่สมเหตุสมผล - ฉันเห็นชุดรหัส JavaScript น้อยมากที่สามารถผ่านการทดสอบ JSLint อย่างไรก็ตามด้วยกฎที่ใช้งานได้จริงที่มีอยู่ในเครื่องมือ JSHint และ ESLint ในวันนี้จึงเป็นข้อเสนอที่สมจริงยิ่งขึ้นเพื่อพยายามให้โค้ดของคุณผ่านพวกเขาโดยไม่มีการเตือนใด ๆ

อาจมีบางครั้งยังเป็นกรณีที่ linter จะบ่นเกี่ยวกับสิ่งที่คุณได้กระทำโดยเจตนา - ตัวอย่างเช่นคุณรู้ว่าคุณควรใช้แต่เพียงครั้งนี้ครั้งเดียวคุณมีเหตุผลที่ดีในการใช้งาน=== ==แต่ถึงกระนั้นด้วย ESLint คุณมีตัวเลือกในการระบุeslint-disableรอบบรรทัดที่เป็นปัญหาเพื่อให้คุณยังคงสามารถผ่านการทดสอบผ้าสำลีที่มีคำเตือนเป็นศูนย์โดยที่รหัสที่เหลือของคุณจะปฏิบัติตามกฎ (อย่าทำสิ่งนั้นบ่อยเกินไป!)

[คำตอบเดิมต่อไปนี้]

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

รหัส Javascript ใด ๆ ที่มีความยาวหรือความซับซ้อนค่อนข้างมากจะสร้างคำเตือนใน JSLint ไม่ว่าจะเขียนไว้ดีเพียงใดก็ตาม หากคุณไม่เชื่อฉันลองใช้ไลบรารี่ยอดนิยมอย่าง JQuery

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

tl; dr takeaway :

หากคุณกำลังมองหามาตรฐานที่สูงมากสำหรับตัวคุณเองหรือทีมงาน JSLint แต่มันไม่จำเป็นต้องเป็นมาตรฐานเพียงมาตรฐานซึ่งบางอย่างมาถึงเราดื้อรั้นจากพระเจ้าจาวาสคริปต์ชื่อ Doug Crockford หากคุณต้องการมีความยืดหยุ่นเพิ่มขึ้นเล็กน้อยหรือมีผู้เชี่ยวชาญเก่าในทีมของคุณที่ไม่ได้ซื้อความคิดเห็นของ JSLint หรือกลับไปมาระหว่าง JS และภาษาตระกูล C อื่น ๆ เป็นประจำลอง JSHint

รุ่นยาว :

เหตุผลเบื้องหลังการแยกอธิบายค่อนข้างดีว่าทำไม JSHint จึงมีอยู่:

http://badassjs.com/post/3364925033/jshint-an-community-driven-fork-of-jslint http://anton.kovalyov.net/2011/02/20/why-i-forked-jslint-to -jshint /

ดังนั้นฉันจึงคิดว่าความคิดนี้คือ "ชุมชนเป็นตัวขับเคลื่อน" แทนที่จะเป็นครอคฟอร์ด ในการปฏิบัติจริง JSHint โดยทั่วไปค่อนข้างผ่อนปรน (หรืออย่างน้อยสามารถกำหนดค่าได้หรือไม่เชื่อเรื่องพระเจ้า) ใน "ความคิดเห็น" โวหารและรองลงมาเล็กน้อยที่ JSLint เป็นคนติดขัด

ตัวอย่างเช่นถ้าคุณคิดว่าทั้ง A และ B ด้านล่างนั้นใช้ได้หรือถ้าคุณต้องการเขียนโค้ดด้วยลักษณะอย่างน้อยหนึ่งอย่างของ A ที่ไม่มีอยู่ใน B JSHint เหมาะสำหรับคุณ หากคุณคิดว่า B เป็นตัวเลือกที่ถูกต้องเท่านั้น ... JSLint ฉันแน่ใจว่ามีความแตกต่างอื่น ๆ แต่สิ่งนี้จะเน้นบางอย่าง

A) ส่ง JSHint ออกจากกล่อง - ล้มเหลว JSLint

(function() {
  "use strict";
  var x=0, y=2;
  function add(val1, val2){
    return val1 + val2;
  }
  var z;
  for (var i=0; i<2; i++){
    z = add(y, x+i);
  }
})();

B) ผ่านทั้ง JSHint และ JSLint

(function () {
    "use strict";
    var x = 0, y = 2, i, z;
    function add(val1, val2) {
       return val1 + val2;
    }
    for (i = 0; i < 2; i += 1) {
        z = add(y, x + i);
    }
}());

โดยส่วนตัวฉันพบว่าโค้ด JSLint ดูดีมากและคุณสมบัติที่ยากเพียงอย่างเดียวของที่ฉันไม่เห็นด้วยคือ เกลียดชังของการประกาศ var มากกว่าหนึ่งรายการในฟังก์ชันและการvar i = 0ประกาศวนรอบและการบังคับใช้ช่องว่างบางรายการสำหรับการประกาศฟังก์ชัน .

สิ่งที่ช่องว่างบางอย่างที่ JSLint บังคับใช้นั้นฉันคิดว่าไม่จำเป็นต้องเลวร้ายไปหมด แต่ไม่ซิงค์กับการประชุมช่องว่างมาตรฐานที่ค่อนข้างดีสำหรับภาษาอื่น ๆ ในครอบครัว (C, Java, Python, ฯลฯ ... ) ซึ่งมักจะ ติดตามเป็นอนุสัญญาใน Javascript เช่นกัน เนื่องจากฉันเขียนในภาษาต่าง ๆ เหล่านี้ตลอดทั้งวันและทำงานกับสมาชิกในทีมที่ไม่ชอบช่องว่างสไตล์ Lint ในรหัสของเราฉันจึงพบว่า JSHint นั้นมีความสมดุลที่ดี มันจับสิ่งที่เป็นข้อผิดพลาดที่ถูกต้องตามกฎหมายหรือรูปแบบที่ไม่ดีจริง ๆ แต่ไม่เห่าใส่ฉันอย่างที่ JSLint ทำ (บางครั้งฉันไม่สามารถปิดการใช้งาน) สำหรับความคิดเห็นของโวหารหรือ nitpicks เกี่ยวกับวากยสัมพันธ์ที่ฉันไม่สนใจ

ห้องสมุดที่ดีจำนวนมากนั้นไม่ใช่ Lint'able ซึ่งสำหรับฉันแสดงให้เห็นว่ามีความจริงบางอย่างเกี่ยวกับความคิดที่ว่า JSLint บางส่วนเป็นเพียงแค่การผลักดัน "รหัสที่ดี" รุ่นที่ 1 (ซึ่งก็คือรหัสที่ดีจริงๆ) แต่แล้วอีกครั้งห้องสมุดเดียวกัน (หรือคนดีอื่น ๆ ) อาจไม่เป็นคำแนะนำอย่างใดอย่างหนึ่งดังนั้นสัมผัส

มี"ผู้เล่น" ที่เป็นผู้ใหญ่และพัฒนาขึ้นอย่างแข็งขันบนหน้าจาวาสคริปต์ - ESLint:

ESLint เป็นเครื่องมือสำหรับการระบุและการรายงานเกี่ยวกับรูปแบบที่พบในรหัส ECMAScript / JavaScript มีหลายวิธีที่คล้ายคลึงกับ JSLint และ JSHint โดยมีข้อยกเว้นบางประการ:

• ESLint ใช้ Esprima สำหรับการแยกวิเคราะห์ JavaScript
• ESLint ใช้ AST เพื่อประเมินรูปแบบในโค้ด
• ESLint สามารถเสียบได้อย่างสมบูรณ์ทุกกฎเดียวคือปลั๊กอินและคุณสามารถเพิ่มได้มากขึ้นในขณะทำงาน

สิ่งที่สำคัญจริงๆที่นี่ก็คือว่ามันสามารถขยายผ่านทางปลั๊กอินที่กำหนดเอง / กฎระเบียบ มีปลั๊กอินหลายรายการที่เขียนขึ้นเพื่อจุดประสงค์ที่แตกต่างกัน กลุ่มอื่น ๆมี:

• eslint-plugin-angular (บังคับใช้แนวทางบางอย่างจากแนวทางแบบเชิงมุมของ John Papa )
• eslint-ปลั๊กอินมะลิ
• eslint ปลั๊กอินกระดูกสันหลัง

และแน่นอนคุณสามารถใช้เครื่องมือบิลด์ที่คุณต้องการรันESLint:

• ฮึดฮัด eslint
• อึก-eslint

ฉันมีคำถามเดียวกันเมื่อสองสามสัปดาห์ก่อนและประเมินทั้ง JSLint และ JSHint

ตรงกันข้ามกับคำตอบในคำถามนี้ข้อสรุปของฉันไม่ได้:

โดยทั้งหมดใช้ JSLint

หรือ:

หากคุณกำลังมองหามาตรฐานที่สูงมากสำหรับตัวคุณเองหรือทีมงาน JSLint

ในขณะที่คุณสามารถกำหนดค่ากฎเกือบเดียวกันใน JSHint เช่นเดียวกับใน JSLint ดังนั้นฉันจะยืนยันว่าไม่มีความแตกต่างในกฎที่คุณสามารถทำได้

ดังนั้นเหตุผลที่เลือกมากกว่าหนึ่งอย่างนั้นเป็นเรื่องทางการเมืองมากกว่าเรื่องทางเทคนิค

ในที่สุดเราก็ตัดสินใจไปกับ JSHint เพราะเหตุผลดังต่อไปนี้:

• ดูเหมือนว่าจะกำหนดค่าเพิ่มเติมได้ที่ JSLint
• ดูเป็นชุมชนที่ขับเคลื่อนชุมชนมากกว่าการแสดงเดี่ยว (แน่นอนว่าThe Manนั้นยอดเยี่ยม)
• JSHint จับคู่โค้ดสไตล์ OOTB ของเราดีกว่าที่ JSLint

ฉันจะให้คำแนะนำที่สามคือGoogle Closure Compiler (รวมถึงการปิด Linter ด้วย ) คุณสามารถลองออนไลน์ที่นี่

Closure Compiler เป็นเครื่องมือสำหรับการดาวน์โหลด JavaScript และทำงานได้เร็วขึ้น มันเป็นคอมไพเลอร์ที่แท้จริงสำหรับ JavaScript แทนที่จะรวบรวมจากภาษาต้นฉบับเป็นรหัสเครื่องจะรวบรวมจาก JavaScript เป็น JavaScript ที่ดีกว่า มันแยกวิเคราะห์ JavaScript ของคุณวิเคราะห์ลบรหัสที่ตายแล้วและเขียนใหม่และลดสิ่งที่เหลืออยู่ นอกจากนี้ยังตรวจสอบไวยากรณ์การอ้างอิงตัวแปรและประเภทและเตือนเกี่ยวกับข้อผิดพลาดทั่วไปของ JavaScript

คำนำ: เอาละที่เพิ่มขึ้นอย่างรวดเร็ว แต่ตัดสินใจที่จะดึงมันออกมา คำตอบนี้อาจเป็นประโยชน์กับคุณและผู้อ่านคนอื่น ๆ

คำแนะนำรหัส

ในขณะที่ JSLint และ JSHint เป็นเครื่องมือที่ดีในการใช้งานในช่วงหลายปีที่ผ่านมาฉันได้ชื่นชมสิ่งที่เพื่อนของฉัน@ugly_syntaxเรียก:

การออกแบบพื้นที่ขนาดเล็ก

นี่เป็นหลักการทั่วไปเช่นเดียวกับ "พระเซน" ซึ่ง จำกัด ทางเลือกที่ต้องทำมีใครสามารถสร้างสรรค์และสร้างสรรค์ได้มากขึ้น

ดังนั้นสไตล์โค้ด zero-config JS ที่ฉันโปรดปรานในปัจจุบัน:

StandardJS

UPDATE :

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

Quickstart / TL; DR

เพิ่มstandardเป็นการพึ่งพาโครงการของคุณ

npm install --save standard

จากนั้นในpackage.jsonเพิ่มสคริปต์ทดสอบต่อไปนี้:

"scripts": {
    "test": "node_modules/.bin/standard && echo put further tests here"
},

สำหรับเอาต์พุต snazzier ขณะพัฒนาnpm install --global snazzyและรันแทนnpm testและใช้มันแทน

หมายเหตุ: การตรวจสอบประเภทกับ Heuristics

เพื่อนของฉันเมื่อพูดถึงพื้นที่การออกแบบที่เรียกว่าElmและฉันขอแนะนำให้คุณลองใช้ภาษานั้น

ทำไม? JS ในความเป็นจริงแรงบันดาลใจจากเสียงกระเพื่อมซึ่งเป็นชั้นเรียนพิเศษภาษาที่เกิดขึ้นจะuntyped ภาษาเช่น Elm หรือPurescriptจะพิมพ์โปรแกรมปฏิบัติการภาษา

พิมพ์ จำกัด เสรีภาพของคุณเพื่อให้คอมไพเลอร์ตรวจสอบและให้คำแนะนำคุณเมื่อคุณละเมิดภาษาหรือกฎของโปรแกรมของคุณ โดยไม่คำนึงถึงขนาด (LOC) ของโปรแกรมของคุณ

เมื่อเร็ว ๆ นี้เรามีเพื่อนร่วมงานรุ่นน้องใช้อินเทอร์เฟซแบบโต้ตอบสองครั้ง: หนึ่งครั้งใน Elm หนึ่งครั้งใน React ลองดูความคิดของสิ่งที่ฉันกำลังพูดถึง

เปรียบเทียบMain.elm(พิมพ์) ⇔ index.js(ไม่พิมพ์) ไม่มีการทดสอบ

(ps. โปรดทราบว่ารหัสการตอบสนองไม่ได้เป็นสำนวนและสามารถปรับปรุงได้)

หนึ่งคำพูดสุดท้าย

ความจริงก็คือ JS ไม่ได้พิมพ์ ฉันจะแนะนำการเขียนโปรแกรมแบบพิมพ์ให้กับคุณคือใคร

ดูด้วย JS เราอยู่ในโดเมนที่แตกต่าง: เป็นอิสระจากประเภทเราสามารถแสดงสิ่งที่ยากหรือเป็นไปไม่ได้ที่จะให้ประเภทที่เหมาะสม (ซึ่งอาจเป็นข้อได้เปรียบอย่างแน่นอน)

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

ฉันแนะนำให้คุณดู LISP (เช่นClojureScript ) เพื่อหาแรงบันดาลใจและลงทุนในการทดสอบรหัสของคุณ อ่านวิธีการของสต็อกย่อยเพื่อให้ได้แนวคิด

สันติภาพ.

ดีแทนที่จะทำการตั้งค่าผ้าสำลีด้วยตนเองเราสามารถรวมการตั้งค่าผ้าสำลีทั้งหมดที่ด้านบนของไฟล์ JS ของเราเองเช่น

ประกาศ var โกลบอลทั้งหมดในไฟล์นั้นเช่น:

/*global require,dojo,dojoConfig,alert */

ประกาศการตั้งค่าผ้าสำลีทั้งหมดเช่น:

/*jslint browser:true,sloppy:true,nomen:true,unparam:true,plusplus:true,indent:4 */

หวังว่านี่จะช่วยคุณ :)

นอกจากนี้ยังมีทางเลือกอื่นที่พัฒนาขึ้นอย่างแข็งขัน - JSCS - สไตล์โค้ด JavaScript :

JSCS เป็นโค้ดสไตล์สำหรับการบังคับใช้คู่มือสไตล์ของคุณโดยทางโปรแกรม คุณสามารถกำหนดค่า JSCS สำหรับโครงการของคุณอย่างละเอียดโดยใช้กฎการตรวจสอบมากกว่า 150 กฎรวมถึงค่าที่ตั้งล่วงหน้าจากคู่มือสไตล์ยอดนิยมเช่น jQuery, Airbnb, Google และอื่น ๆ

มันมาพร้อมกับสถานีที่ตั้งไว้ล่วงหน้าหลายที่คุณสามารถเลือกได้โดยเพียงแค่ระบุpresetใน.jscsrcไฟล์การกำหนดค่าและปรับแต่ง - แทนที่เปิดหรือปิดกฎใด ๆ :

{
    "preset": "jquery",
    "requireCurlyBraces": null
}

นอกจากนี้ยังมีปลั๊กอินและส่วนขยายที่สร้างขึ้นสำหรับบรรณาธิการยอดนิยม

ดูเพิ่มเติมที่:

• รหัสที่สมบูรณ์แบบความพยายามเป็นศูนย์