คุณฟอร์แมตโค้ดในการบันทึกใน VS Code อย่างไร

ฉันต้องการจัดรูปแบบรหัส TypeScript โดยอัตโนมัติโดยใช้ตัวจัดรูปแบบในตัวเมื่อฉันบันทึกไฟล์ใน Visual Studio Code

ฉันตระหนักถึงตัวเลือกต่อไปนี้ แต่ไม่มีตัวเลือกใดที่ดีพอ:

• จัดรูปแบบด้วยตนเอง Shift + Alt + F
• จัดรูปแบบตามประเภท "editor.formatOnType": true
  • มันจัดรูปแบบบรรทัดเมื่อคุณกด Enter โชคไม่ดีที่มันไม่ได้ฟอร์แมตเมื่อคุณคลิกเมาส์ที่บรรทัดอื่นหรือกดลูกศรขึ้น / ลง
• ใช้ส่วนขยายที่มีอยู่
  • ฉันพยายามนี้อย่างใดอย่างหนึ่งแต่ก็ดูเหมือนจะไม่ทำงานดีเกินไป
• ใช้บรรเจิด "beautify.onSave": true
  • มันไม่ทำงานกับ TypeScript
• เขียนส่วนขยายที่กำหนดเอง
  • มันยากหากคุณต้องการจัดการบันทึกอัตโนมัติและสร้างอย่างถูกต้อง

ตั้งแต่เดือนกันยายน 2559 (VSCode 1.6) ตอนนี้ได้รับการสนับสนุนอย่างเป็นทางการแล้ว

เพิ่มสิ่งต่อไปนี้ในsettings.jsonไฟล์ของคุณ:

"editor.formatOnSave": true

ในการจัดรูปแบบรหัสโดยอัตโนมัติเมื่อบันทึก:

• กดCtrl ,เพื่อเปิดการตั้งค่าผู้ใช้

• ป้อนรหัสต่อไปนี้ในไฟล์การตั้งค่าที่เปิด

  {
      "editor.formatOnSave": true
  }

• บันทึกไฟล์

แหล่ง

หากคุณต้องการจัดรูปแบบอัตโนมัติในการบันทึกโดยใช้แหล่งที่มาของ Javascript ให้เพิ่มอันนี้ลงในUsers Setting(กดCmd,หรือCtrl,):

"[javascript]": { "editor.formatOnSave": true }

ไม่จำเป็นต้องเพิ่มคำสั่งอีกต่อไป สำหรับผู้ที่ยังใหม่กับ Visual Studio Code และค้นหาวิธีที่ง่ายในการจัดรูปแบบรหัสในการบันทึกกรุณาทำตามขั้นตอนด้านล่าง

1. เปิดการตั้งค่าโดยกด[Cmd+,]ใน Mac หรือใช้หน้าจอด้านล่าง

2. พิมพ์ ' รูปแบบ ' ในช่องค้นหาและเปิดใช้งานตัวเลือก ' Format On Save '

คุณทำเสร็จแล้ว ขอบคุณ.

สำหรับผู้ใช้MACให้เพิ่มบรรทัดนี้ในการตั้งค่าเริ่มต้นของคุณ

เส้นทางของไฟล์คือ: / Users / USER_NAME / Library / Application Support / Code / User / settings.json

"tslint.autoFixOnSave": จริง

ตัวอย่างของไฟล์จะเป็น:

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-icons",
    "typescript.check.tscVersion": false,
    "vsicons.projectDetection.disableDetect": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true
}