Format code trong vscode bằng Prettier Extension

Tích hợp với Visual Studio Code

Trước đây bạn có bao giờ thắc mắc việc format code cho htm, js hoặc json mất nhiều thời gian và phiền hà không? Hôm nay mình giới thiệu với các bạn một Extension format code để các bạn sẽ đỡ mất thời gian đó là Prettier. Các bạn có thể vào phần Extensions sau đó install Prettier. Trong quá trình sử dụng lần đâu, có thể sẽ xảy ra tranh chấp giữa Formatter mặc định và Prettier. Bạn sẽ được hỏi như hình sau đây. Sau đó bạn chọn Prettier. Nếu Visual Studio Code không có hỏi, bạn có thể vào Settings, gõ Default Formatter và chọn Default Formatter là ebsenp.prettier-vscode.

Cấu hình cho từng project

Nếu bạn không thích dùng một cấu hình của Prettier cho tất cả project. Bạn có thể tạo file .prettierrc đặt ở thư mục root của Project. Ví dụ rule như vậy.

{
  "arrowParens": "always",
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": false
}

Với cách ở trên, bạn chỉ cấu hình cho 1 loại file nhưng sẽ ảnh hưởng loại khác. Như đoạn code cấu hình trên là dành cho JavaScript, nhưng HTML cũng bị ảnh hưởng theo. Bạn có thể tham khảo ở đây để cấu hình cho 2 loại file khác nhau.

{
  "overrides": [
    {
      "files": "*.js",
      "options": {
        "arrowParens": "always",
        "singleQuote": true,
        "trailingComma": "all",
        "bracketSpacing": false
      }
    },
    {
      "files": "*.html",
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

Nếu khi bạn save file mà không tự động format thì bạn có thể vào setting > Text Editor > Formatting Tích vào ô Format On Save. Như vậy mỗi khi bạn save file thì code sẽ tự động được format nếu code đó không lỗi. Còn code lỗi thì sẽ không format được (đây cũng là 1 cách để kiểm tra xem mình có viết sai không :) )

Các bạn có thể xem config của Prettier mặc định bằng cách vào Setting > Extensions > Prettier và tìm hiểu thêm trên mạng cách config theo ý muốn.