ใช้ Tslint เพื่อตรวจสอบการนำเข้าที่ไม่ถูกต้องระหว่างแพ็คเกจและโฟลเดอร์ในโครงการ TypeScript ของคุณ
การตรวจสอบความถูกต้องอัตโนมัติและเอกสารประกอบของสถาปัตยกรรมแพ็คเกจ (ผ่าน tslint-folders-diagrams )
โฟลเดอร์ Tslint มีความเสถียรและใช้งานได้ทุกวันใน CI Builds และบนกล่อง Dev (Linux, Mac, Windows) สำหรับผลิตภัณฑ์หลักอย่างน้อยหนึ่งรายการ
ประหยัดเวลาที่ใช้ในการตรวจสอบรหัสด้วยตนเองสำหรับความผิดพลาด 'โง่' เช่น:
file-name-casing ไฟล์ไม่สอดคล้อง เราใช้ semver สำหรับการกำหนดเวอร์ชัน สำหรับเวอร์ชันที่มีให้ดูรุ่น
yarn add tslint-folders
แก้ไข tslint.json ของคุณเพื่อให้มีรายการ "rulesDirectory" ที่ชี้ไปที่โฟลเดอร์ Tslint
โดยปกติแล้วสิ่งนี้จะเป็นเช่น:
"rulesDirectory": "./node_modules/tslint-folders/dist/lib/"
ดูตัวอย่าง tslint.tslint-folders.json สำหรับตัวอย่าง
กฎ Tslint ถูกเปิดใช้งานและกำหนดค่าใน tslint.json
ดูส่วนภายใต้ tsf-folders-imports-between-packages ใน tslint.tslint-folders.json หรือการทดสอบหน่วยสำหรับตัวอย่าง
ทางเลือกคุณสามารถแยกการกำหนดค่าโฟลเดอร์ Tslint ออกเป็นไฟล์แยกต่างหากเช่น tslint.tslint-folders.json ในการอ้างอิงไฟล์ให้เพิ่มรหัสนี้ลงใน tslint.json :
"extends": "./tslint.tslint-folders.json"
สมมติว่า Tslint อยู่ในสถานที่แล้วตอนนี้คุณควรเห็นการนำเข้าที่ไม่คาดคิด (หรือการทดสอบที่ปิดการใช้งาน) จะถูกตั้งค่าสถานะโดย Tslint สิ่งนี้ควรใช้งานได้ตามปกติสำหรับ Tslint: บนบรรทัดคำสั่งหรือในตัวแก้ไขเช่นรหัสภาพ (อาจต้องรีเฟรชตัวแก้ไข)
ดู Tslint-Folders-Diagrams
ไดอะแกรมสามารถสร้างได้โดยอัตโนมัติจากการกำหนดค่าเดียวกันกับที่ใช้ในการตรวจสอบรหัส:

ดูรายละเอียด Tslint-Folders-Diagrams
นี่คือบทสรุปของกฎที่กำหนดเองในปัจจุบัน
| รหัส | คำอธิบาย |
|---|---|
| การทดสอบแบบ DSF-folders-disable | ตรวจจับการทดสอบหน่วยปิดใช้งานชุดทดสอบหรือการทดสอบการรวม |
| ชื่อ TSF-folders-file | ตรวจสอบความถูกต้องของชื่อไฟล์ คล้ายกับกฎมาตรฐาน file-name-casing ยกเว้นว่ารองรับปลอกหลายตัวที่อนุญาตและไม่อนุญาตให้ใช้ชื่อไฟล์ที่มีอักขระที่ไม่ถูกต้อง (เช่นช่องว่างหรือเครื่องหมายจุลภาค) |
| TSF-folders-import-from-disallowed folders | ตรวจจับการนำเข้าจากโฟลเดอร์ที่ไม่ได้มาตรฐานเช่น node_modules |
| TSF-folders-imports-between packages | ตรวจจับการนำเข้าจากแพ็คเกจ 'ระดับสูงกว่า': ตัวอย่างเช่นนำเข้าจากแพ็คเกจ 'เชลล์' แอปพลิเคชันเมื่ออยู่ในแพ็คเกจ 'พื้นที่' นี่คือกฎหลักที่กำหนดเอง ยังสามารถตรวจจับได้เมื่อแพ็คเกจมีการนำเข้าโดยใช้ชื่อแพ็คเกจนี้ (แทนที่จะเป็นเส้นทางสัมพัทธ์) |
| TSF-folders-test-with-breakpoint | ตรวจจับเมื่อการทดสอบการรวมมีจุดพักเช่น browser.debug() |
| เว็บไซต์ | url |
|---|---|
| ซอร์สโค้ด (GitHub) | https://github.com/mrseanryan/tslint-folders |
| หน้า GitHub | https://mrseanryan.github.io/tslint-folders/ |
| NPM | https://www.npmjs.com/package/tslint-folders |
กฎทั้งหมดใช้คำนำหน้าแบบเดียวกัน tsf-folders-
เพื่อให้ชัดเจนกับนักพัฒนาว่ามีการเกี่ยวข้องกับกฎ ที่กำหนดเอง ข้อความทั้งหมดจากกฎยังรวมถึงรหัสกฎ
กฎเหล่านี้บางอย่างสามารถถูกแทนที่ด้วยการกำหนดค่า Tslint มาตรฐาน อย่างไรก็ตามการมีกฎที่กำหนดเองจะให้ข้อความที่ชัดเจนยิ่งขึ้นเพื่อช่วยให้นักพัฒนาทราบว่าจะแก้ไขอะไร (หรือกฎใดที่จะปิดการใช้งานสำหรับรหัสชิ้นนั้น)
กฎบางอย่างไม่ได้เกี่ยวกับ 'โฟลเดอร์' อย่างเคร่งครัด แต่รวมอยู่ที่นี่เนื่องจากดูเหมือนว่ามีประโยชน์
สำหรับรายละเอียดและตัวอย่างเพิ่มเติมโปรดดูการทดสอบหน่วย
ในการทำงานกับซอร์สโค้ดสำหรับโฟลเดอร์ Tslint มีสคริปต์บางส่วน:
| สั่งการ | คำอธิบาย |
|---|---|
| การสร้างเส้นด้าย | สร้างกฎไปยังโฟลเดอร์ 'dist' จากที่ที่พวกเขาสามารถดำเนินการได้ |
| ผ้าไหมพรม | ผ้าสำลีซอร์สโค้ดของกฎ |
| เส้นด้ายเริ่มต้น | สร้างทดสอบและผ้าสำลี |
| การทดสอบเส้นด้าย | ทดสอบกฎกับไฟล์สเป็ค (*.lint) |
| ทดสอบเส้นด้าย | ทดสอบกฎเดียวกับไฟล์ข้อมูลจำเพาะ (*.lint) |
การทดสอบหน่วยสำหรับกฎ tsf-folders-imports-between-packages อยู่ที่นี่
การทดสอบหน่วยใช้ข้อมูลทดสอบเพื่อตรวจสอบขอบเขตแพ็คเกจของเว็บไซต์ทั่วไป
การกำหนดค่าการจับคู่สามารถเห็นได้ใน tslint.tslint-folders.json
ข้อมูลการทดสอบนั้นขึ้นอยู่กับเว็บไซต์ที่ใช้หลายแพ็คเกจ:
| ชื่อแพ็คเกจ | คำอธิบาย |
|---|---|
| เปลือก | แอปพลิเคชันเชลล์ - นี่คือแพ็คเกจระดับบนสุดและสามารถนำเข้าจากแพ็คเกจอื่น ๆ |
| พื้นที่ที่ต้องทำ | พื้นที่ 'แอพ todo' ของเว็บไซต์ที่โฮสต์ภายในเชลล์ ไม่ควรนำเข้าจากเชลล์หรือจากแพ็คเกจ 'พื้นที่' อื่น ๆ |
| สัมผัส | พื้นที่ 'ข้อมูลติดต่อ' ของเว็บไซต์ที่โฮสต์ภายในเชลล์ ไม่ควรนำเข้าจากเชลล์หรือจากแพ็คเกจ 'พื้นที่' อื่น ๆ |
| แพคเกจกริด | กริด UI ที่ใช้โดยแพ็คเกจพื้นที่ ไม่ควรนำเข้าแพ็คเกจที่ได้รับการยอมรับอื่น ๆ |
| เครื่องใช้ | แพ็คเกจ 'Utils' ที่ใช้โดยแพ็คเกจเชลล์และพื้นที่ ไม่ควรนำเข้าแพ็คเกจที่ได้รับการยอมรับอื่น ๆ |
ตัวอย่างการตรวจสอบความถูกต้อง : 'เชลล์' ควรจะสามารถนำเข้าจาก 'TODO-AREA' แต่ไม่ใช่วิธีอื่น ๆ (เปลือกหอยอยู่ในระดับที่สูงขึ้นของนามธรรมและยังต้องการหลีกเลี่ยงการพึ่งพา 2 ทาง)
โฟลเดอร์ Tslint ยังสามารถตรวจสอบการนำเข้าระหว่างโฟลเดอร์ย่อยของแพ็คเกจ
แพ็คเกจการทดสอบ 'TODO-AREA' ได้รับการกำหนดค่าด้วยโฟลเดอร์ย่อยทั่วไปเช่น 'ส่วนประกอบ' และ 'โมเดล' tslint.tslint-folders.json ได้รับการกำหนดค่าเพื่อตรวจสอบการนำเข้าระหว่างโฟลเดอร์เหล่านี้
| ชื่อย่อย | คำอธิบาย |
|---|---|
| ส่วนประกอบ | โฟลเดอร์ระดับบนสุดของส่วนประกอบ UI สามารถนำเข้าจากโฟลเดอร์อื่น ๆ ที่ได้รับการยอมรับ |
| ViewModels | โมเดลโฟลเดอร์ของมุมมองที่ใช้โดยส่วนประกอบ UI สามารถนำเข้าจากโมเดลหรือ Utils เท่านั้น |
| แบบจำลอง | โฟลเดอร์ของรุ่นที่ใช้โดยรุ่นมุมมอง สามารถนำเข้าจาก Utils เท่านั้น |
| เครื่องใช้ | โฟลเดอร์ 'Utils' ไม่ควรนำเข้าโฟลเดอร์อื่น ๆ ที่ได้รับการยอมรับ |
ตัวอย่างการตรวจสอบความถูกต้อง : 'ส่วนประกอบ' ควรจะสามารถนำเข้าจาก 'โมเดล' แต่ไม่ใช่วิธีอื่น ๆ (ส่วนประกอบอยู่ในระดับที่สูงขึ้นของนามธรรมและต้องการหลีกเลี่ยงการพึ่งพา 2 ทาง)
ดู readme ที่มีส่วนร่วม
โครงการนี้ขึ้นอยู่กับโครงการ Seeder Project TypeScript-Library-Starter ที่ยอดเยี่ยม
โครงการเริ่มหลีกเลี่ยงการแก้ไขปัญหาการเข้ารหัสที่คล้ายกันซ้ำ ๆ ในฐานรหัสพิมพ์ขนาดใหญ่
ดูที่นี่
มันสวยมาก แจ้งให้เราทราบหากสิ่งนี้มีประโยชน์หรือสามารถปรับปรุงได้อย่างไร!
งานต้นฉบับโดย Sean Ryan - Mr.Sean.ryan (ที่ gmail.com)
โครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT - ดูไฟล์ใบอนุญาตสำหรับรายละเอียด