มีวิธีลบการนำเข้าและการประกาศที่ไม่ได้ใช้ออกจาก Angular 2+ หรือไม่?

ฉันได้รับมอบหมายให้รับโค้ดที่ยุ่งเหยิงจากนักพัฒนารายอื่นที่เพิ่งลาออกจาก บริษัท ไปแล้ว

ฉันถามอย่างสงสัยว่ามีปลั๊กอินของ Visual Studio Code หรือวิธีการอื่น ๆ ที่สามารถช่วยให้เราจัดระเบียบและจัดระเบียบการนำเข้าและการอ้างอิงได้อย่างรวดเร็วและมีประสิทธิภาพหรือไม่?

ตัวอย่างเช่นอาจมีการนำเข้าหลายร้อยรายการเช่นนี้

import { AutoCompleteModule,InputSwitchModule } from 'primeng/primeng';
import { ListboxModule } from 'primeng/primeng';

สามารถแปลงให้คล้ายกันได้

import { AutoCompleteModule,
         InputSwitchModule,
         ListboxModule  } from 'primeng/primeng';

หรือฟังก์ชั่นอื่น ๆ เช่นลบการนำเข้าและการประกาศที่ไม่ได้ใช้โดยอัตโนมัติออกจาก app.module หรือจากส่วนประกอบทั้งหมดผ่านโปรเจ็กต์ทั้งหมด?

ขอบคุณสำหรับคำติชม!

แก้ไข (ตามที่แนะนำในความคิดเห็นและบุคคลอื่น ๆ ) Visual Studio Code ได้พัฒนาและมีฟังก์ชันนี้ในตัวเป็นคำสั่ง "จัดระเบียบการนำเข้า" พร้อมแป้นพิมพ์ลัดเริ่มต้นต่อไปนี้:

option+ Shift+ Oสำหรับ Mac

Alt + Shift + Oสำหรับ Windows

คำตอบเดิม:

ฉันหวังว่าส่วนขยายโค้ดสตูดิโอภาพนี้จะเพียงพอต่อความต้องการของคุณ: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

มีคุณสมบัติดังต่อไปนี้:

• เพิ่มการนำเข้าโครงการหรือไลบรารีของคุณไปยังไฟล์ปัจจุบันของคุณ
• เพิ่มการนำเข้าสำหรับชื่อปัจจุบันใต้เคอร์เซอร์
• เพิ่มการนำเข้าไฟล์ที่ขาดหายไปทั้งหมดด้วยคำสั่งเดียว
• Intellisense ที่แนะนำสัญลักษณ์และเพิ่มการนำเข้า "คุณลักษณะหลอดไฟ" ที่จำเป็นโดยอัตโนมัติซึ่งจะแก้ไขโค้ดที่คุณเขียน
• จัดเรียงและจัดระเบียบการนำเข้าของคุณ (จัดเรียงและลบสิ่งที่ไม่ได้ใช้ )
• มุมมองโครงร่างรหัสของเอกสาร TS / TSX ที่เปิดอยู่ของคุณ
• สิ่งที่น่าสนใจสำหรับ JavaScript เช่นกัน! (ขั้นตอนการทดลอง แต่คำอธิบายที่ดีกว่าด้านล่าง)

สำหรับ Mac: control+ option+o

สำหรับ Win: Ctrl+ Alt+o

ตั้งแต่ Visual Studio Code Release 1.22สิ่งนี้มาฟรีโดยไม่ต้องใช้ส่วนขยาย

Shift+ Alt+Oจะดูแลคุณ

หากคุณเป็นผู้ใช้วิชวลสตูดิโอจำนวนมากคุณสามารถเปิดการตั้งค่าความต้องการของคุณและเพิ่มสิ่งต่อไปนี้ใน settings.json ของคุณ:

...
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.organizeImports": true
}
....

หวังว่านี่จะเป็นประโยชน์!

เพื่อให้สามารถตรวจจับการนำเข้าโค้ดหรือตัวแปรที่ไม่ได้ใช้ตรวจสอบให้แน่ใจว่าคุณมีตัวเลือกนี้ในไฟล์tsconfig.json

"compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true
}

มีการติดตั้งคอมไพเลอร์ typescript หากไม่ติดตั้งด้วย:

npm install -g typescript

และส่วนขยายtslint ที่ติดตั้งใน Vcode สิ่งนี้ใช้ได้ผลสำหรับฉัน แต่หลังจากเปิดใช้งานฉันสังเกตเห็นปริมาณการใช้งาน CPU ที่เพิ่มขึ้นโดยเฉพาะในโครงการขนาดใหญ่

ฉันขอแนะนำให้ใช้ส่วนขยายtypescript Heroเพื่อจัดระเบียบการนำเข้าของคุณ

ตั้งแต่ VSCode v.1.24 และ TypeScript v.2.9:

สำหรับ Mac: option+ Shift+O

สำหรับ Win: Alt+ Shift+O

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

ในบทความผู้เขียนอธิบายดังนี้:

สร้างไฟล์ tslint แบบสแตนด์อโลนที่มีสิ่งต่อไปนี้:

{
  "extends": ["tslint-etc"],
  "rules": {
    "no-unused-declaration": true
  }
}

จากนั้นรันคำสั่งต่อไปนี้เพื่อแก้ไขการนำเข้า:

 tslint --config tslint-imports.json --fix --project .

พิจารณาแก้ไขข้อผิดพลาดอื่น ๆ ที่เกิดขึ้น (ฉันทำ)

จากนั้นตรวจสอบผลงานของโครงการโดยสร้าง:

ng build

หรือ

ng build name_of_project --configuration=production 

สิ้นสุด:หากสร้างอย่างถูกต้องคุณได้ลบการนำเข้าโดยอัตโนมัติเรียบร้อยแล้ว!

หมายเหตุ:สิ่งนี้จะลบเฉพาะการนำเข้าที่ไม่จำเป็นเท่านั้น ไม่มีคุณสมบัติอื่น ๆ ที่ VS Code ทำเมื่อใช้หนึ่งในคำสั่งที่กล่าวถึงก่อนหน้านี้

ไปที่ของคุณtslint.jsonและเปลี่ยนค่าของคุณสมบัติno-unused-variableเป็นfalse