Làm thế nào để bạn định dạng mã khi lưu trong Mã VS

Tôi muốn tự động định dạng mã TypeScript bằng cách sử dụng trình định dạng dựng sẵn khi tôi lưu tệp trong Visual Studio Code.

Tôi biết các tùy chọn sau, nhưng không có lựa chọn nào đủ tốt:

• Định dạng thủ công Shift + Alt + F
• Định dạng về loại "editor.formatOnType": true
  • Nó định dạng dòng khi bạn nhấn enter. Không may mắn, nó khiến nó không được định dạng khi bạn nhấp chuột vào dòng khác hoặc nhấn mũi tên lên / xuống.
• Sử dụng tiện ích mở rộng hiện có
  • Tôi cố gắng này một , nhưng nó dường như không làm việc quá tốt.
• Dùng làm đẹp "beautify.onSave": true
  • Nó không hoạt động với TypeScript
• Viết phần mở rộng tùy chỉnh
  • Thật khó khăn nếu bạn muốn xử lý ô tô và xây dựng chính xác.

Kể từ tháng 9 năm 2016 (VSCode 1.6), điều này hiện đã được hỗ trợ chính thức .

Thêm phần sau vào settings.jsontập tin của bạn :

"editor.formatOnSave": true

Để tự động định dạng mã khi lưu:

• Nhấn Ctrl ,để mở tùy chọn người dùng

• Nhập mã sau vào tệp cài đặt đã mở

  {
      "editor.formatOnSave": true
  }
  

• Lưu tập tin

Nguồn

Nếu bạn muốn tự động định dạng lưu chỉ với nguồn Javascript, hãy thêm định dạng này vào Users Setting(nhấn Cmd,hoặc Ctrl,):

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

Không cần thêm lệnh nữa. Đối với những người chưa quen với Visual Studio Code và đang tìm kiếm một cách dễ dàng để định dạng mã khi lưu, vui lòng làm theo các bước dưới đây.

1. Mở Cài đặt bằng cách nhấn [Cmd+,]trong Mac hoặc sử dụng ảnh chụp màn hình bên dưới.

2. Nhập ' định dạng ' trong hộp tìm kiếm và bật tùy chọn ' Định dạng khi lưu '.

Bạn xong việc rồi. Cảm ơn bạn.

Đối với người dùng MAC , hãy thêm dòng này vào Cài đặt mặc định của bạn

Đường dẫn tệp là: / Users / USER_NAME / Thư viện / Hỗ trợ ứng dụng / Mã / Người dùng / settings.json

"tslint.autoFixOnSave": đúng

Mẫu của tệp sẽ là:

{
    "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
}