วิธีตรวจสอบรหัสทีมโดยอัตโนมัติ

คำนำ

ในการพัฒนาทีมไม่ว่าจะเป็นการเขียน front-end (JS, CSS, HTML) หรือ back-end เรามักจะต้องแก้ปัญหา: วิธีรวมรูปแบบรหัสของทีม บทความนี้ส่วนใหญ่ใช้ pre-git, eslint และ js-beautify เพื่อใช้การควบคุมสไตล์รหัส

ต่อไปนี้เป็นเครื่องมือสามอย่างและวิธีการใช้งาน:

ก่อนการแข่งขัน

เครื่องมือนี้สามารถใช้ฟังก์ชั่นของ Git Hook แทรกพฤติกรรมที่กำหนดเองบางอย่างลงในกระบวนการ GIT เช่นการตรวจจับการตรวจจับรหัสก่อนที่จะส่งมอบและหากไม่ผ่านไปจะมีการรายงานข้อผิดพลาด

eslint

เครื่องมือตรวจสอบรูปแบบรหัสคุณสามารถรวมและกำหนดค่าสไตล์ต่าง ๆ ตามต้องการและใช้เพื่อสร้างข้อกำหนดรหัสแบบครบวงจรของทีม

js-beautiful

JS Code Organization และเครื่องมือเสริมความงาม

จากนั้นเครื่องมือทั้งสามร่วมมือกันเพื่อสร้างเอฟเฟกต์ต่อไปนี้:

1. ผู้นำโครงการกำหนดข้อกำหนดรหัสของ ESLINT

2. ใช้ pre-git เพื่อเรียกใช้การตรวจสอบรหัส ESLINT และการตกแต่งรหัส JS-Beautiful ก่อนที่จะกระทำ

3. ถ้าผ่านไปโดยอัตโนมัติ "Git Add" โดยอัตโนมัติ จะได้รับอนุญาตให้ผลักดัน

ทำให้สำเร็จ

1: NPM ติดตั้งเครื่องมือด้านบน

$ npm install eslint js-beautify pre-git --save-dev

สอง: การกำหนดค่าเครื่องมือ

สร้างไฟล์. eslintrc.json ใหม่ในไดเรกทอรีรูทและกำหนดค่าข้อมูลจำเพาะและให้เวอร์ชันที่ง่ายขึ้น:

หมายเหตุ: หากคุณต้องการการทดสอบเพิ่มเติมกรุณาเยี่ยมชมเว็บไซต์ทางการ ESLINT

 {"กฎ": {"Comma-Dangle": ["ข้อผิดพลาด", "Never"], "Arrow-Body-Style": ["Warn", "Always", "No-Const-assign": ["ข้อผิดพลาด"], "Parseroptions": {"Ecmaversion": 6}

เนื่องจากการทดสอบมีข้อผิดพลาดอยู่เสมอเมื่อใช้ไฟล์หลายชั้นแบบเรียกซ้ำ JS-Beautiful ใน BASH ดังนั้นสคริปต์จึงใช้เพื่อทำให้รหัสสวยงาม:

Beatufyjs.js

 const fs = ต้องการ ('fs'); const path = ต้องการ ('path'); const child_process = ต้องการ ('child_process'); สำหรับ (ให้ arg ของ process.argv.splice (2)) {ให้ pathname = path.join (process.cwd (), arg); if (isfile (path.join (process.cwd (), arg)))) {child_process.exec (`./node_modules/js-beautify/js/bin/js-beautify.js -p -e -j -a $ {pathname} msg.replace ('//// n', '')); } else {read_dir (ชื่อพา ธ ); }} function read_dir (dir) {let files = fs.readdirsync (dir); สำหรับ (ให้ไฟล์ของไฟล์) {ให้ pathName = path.join (dir, ไฟล์); if (isfile (pathname)) {child_process.exec (`./node_modules/js-beautify/js/bin/js-beautify.js -p -e -j -a $ {pathname} -r`, ฟังก์ชัน (ข้อผิดพลาด, msg, stderr) } else {read_dir (ชื่อพา ธ ); }}} ฟังก์ชั่น isfile (พา ธ ) {return มีอยู่ (พา ธ ) && fs.statsync (พา ธ ) .isfile (); } ฟังก์ชั่นมีอยู่ (พา ธ ) {return fs.existssync (เส้นทาง) || path.existssync (เส้นทาง); -

สาม: ใช้เครื่องมือด้านบน

กำหนดค่าในไฟล์ package.json:

 {"ชื่อ": "สาธิต", "เวอร์ชัน": "1.0.0", "คำอธิบาย": "", "หลัก": "index.js", "สคริปต์": {"lint": "./node_modules/.bin/ESLINT ROUTES/ROUTELEST. libs-Quiet--fix "," js-beautify ":" โหนด-harmony-use_strict ./bin/beatufyjs.js libs middlewares index.js "}," ผู้แต่ง ":" kelvv "," nication ":" isc "," config ": {pre-git": " Lint-Fix "," NPM Run Js-beautify "," Git Add " ], "pre-push": [], "post-commit": [], "post-checkout": [], "post-merge": []}}, "devdependencies": {"eslint": "^2.12.0", "js-beautify": "^1.6.3"

ในเวลานี้เมื่อคุณแก้ไขไฟล์ใดไฟล์หนึ่งแล้ว "Git add && git commit -m 'msg'" คำสั่งทั้งสามใน pre -commit จะถูกดำเนินการ หากมีข้อผิดพลาดอยู่ตรงกลางการส่งจะหยุดลงและการส่งจะดำเนินต่อไปหลังจากการแก้ไขเสร็จสมบูรณ์

สิ่งหนึ่งที่ควรทราบคือหากปัญหารูปแบบบางอย่างไม่เพียงพอที่จะรายงานข้อผิดพลาดวิธีการแก้ไขจะแก้ไขรหัสการเพิ่มประสิทธิภาพโดยอัตโนมัติและเพิ่มและแก้ไขโดยอัตโนมัติ ในขั้นตอนสุดท้ายเพียงแค่ดำเนินการ: Git Push ! สามารถรวมกับการทดสอบหน่วยได้ดีกว่า

สรุป

ข้างต้นเป็นเนื้อหาทั้งหมดของวิธีการตรวจสอบรหัสของทีมโดยอัตโนมัติโดยใช้ Node.js โดยอัตโนมัติ หากคุณต้องการคุณสามารถอ้างอิงได้