Format (Làm đẹp) code php trong VS Code

Bài viết được sự cho phép của tác giả Phạm Bình

Chào các bạn,

Đây là bài viết tiếp theo của bài Code PHP chuẩn convention với PHP CodeSniffer. Trong bài này, mình sẽ hướng dẫn các bạn auto check lỗi và format code PHP trong Vs Code – một trong những code editor được yêu thích nhất hiện nay.

Lưu ý, để hiểu bài viết này hơn, thì bạn cần đảm bảo các yêu cầu sau:

  • Máy tính đã cài composer ở dạng global.
  • Máy tính đã cài PHP CodeSniffer ở dạng global.
  • Bạn hiểu ý nghĩa của 2 công cụ phpcs và phpcbf.
  • Bạn hiểu ý nghĩa của file cấu hình phpcs.xml trong dự án.

Nếu không, hãy đọc phần trước của bài viết này, tại đó mình có cung cấp các nội dung hữu ích về các yêu cầu trên.

  10 Frameworks tốt nhất hiện nay cho PHP
  4 lý do để VS Code là Text Editor ưa thích của mọi lập trình viên

I. GIỚI THIỆU VỀ TÍNH NĂNG FORMAT CODE TRONG VS CODE

Giống như nhiều editor khác, VS Code có tính năng tự động format code của bạn cho chuẩn hơn.

Hình ảnh mượn tạm từ một nguồn khác phambinh.net 

Phím tắt để format code trên VS Code tương ứng với từng hệ điều hành như sau:

  1. Trên Windows: Shift + Alt + F.
  2. Trên Mac: Shift + Option + F.
  3. Trên Linux: Ctrl + Shift + I.

Tuy nhiên, mặc định thì VS Code không tích hợp sẵn việc format code PHP, mà chúng ta phải cài thêm từ extension bên ngoài, và mình sẽ hướng dẫn các bạn cài ở ngay mục phía dưới đây.

II. FORMAT CODE PHP TRONG VS CODE VỚI PHP SNIFFER & BEAUTIFIER

Mình đã dùng thử khá nhiều extension format code PHP, thì thấy có thằng PHP Sniffer & Beautifier này là dễ dùng và dễ tùy biến nhất. Để cài đặt extension này, các bạn vào mục Extensions của VS Code, tìm kiếm với từ khóa là “Sniffer & Beautifier” sẽ ra.

Cách tìm và cài đặt extension trong VS Code

Chúng ta tiến hành cài đặt bình thường như các extension khác, và sau khi cài đặt xong, thì hãy đi đến phần cài đặt riêng của extension này như hình dưới.

Đi đến trang cài đặt riêng cho extension

Tại trang cài đặt riêng của extension Sniffer & Beautifier, có 3 thông tin setting quan trọng là Allowed Auto Rulesets, Executable Path CBF và Executable Path CS. Mình sẽ hướng dẫn các bạn các cấu hình các thông tin này sao cho phù hợp ngay sau đây.

Các setting quan trọng

2.1 Cấu hình thông tin Allowed Auto Rulesets

Tại mục (1) như trong hình, hãy bấm vào Edit in settings.json, và đảm bảo ở phpsab.allowedAutoRulesets được cấu hình như sau:

Để dễ copy, thì mình viết các value ra đây nhé:

1
2
3
4
5
6
7
8
9
10
11
12
{
    // ...
    "phpsab.allowedAutoRulesets": [
        ".phpcs.xml",
        ".phpcs.xml.dist",
        "phpcs.xml",
        "phpcs.xml.dist",   
        "phpcs.ruleset.xml",
        "ruleset.xml"
    ],
    // ...
}

2.2 Cấu hình 2 thông tin Executable Path CBF và Executable Path CS

Tại mục (2) như trong hình, chúng ta cần điền đường dẫn tới 2 công cụ là phpcbf và phpcs. Mình sẽ hướng dẫn các bạn cách lấy thông qua mấy bước đơn giản dưới đây.

Chạy lệnh sau để lấy ra đường dẫn tới thư mục home của composer:

composer config --list --global | grep "home"

Kết quả sẽ có dạng như sau, và phần bôi đậm chính là đường dẫn bạn cần quan tâm.

Lưu ý: mỗi máy sẽ cho ra một kết quả khác nhau, và bên dưới là kết quả trên máy của mình

[home] /Users/admin/.composer

Sau khi có đường dẫn home, thì đường dẫn tới phpcs và phpcbf sẽ có dạng như sau:

# Đường dẫn tới phpcbf
/Users/admin/.composer/vendor/bin/phpcbf

# Đường dẫn tới phpcs
/Users/admin/.composer/vendor/bin/phpcs

Vậy là chúng ta đã có đường dẫn tới phpcbf và phpcs, giờ chỉ cần điền chúng lần lượt mục Executable Path CBF và Executable Path CS trong trang cài đặt của extension Sniffer & Beautifier là xong.

Xem thêm các việc làm PHP lương cao trên TopDev

III. Dùng thử

Khởi tạo một dự án mới với 1 file phpcs.xml ở thư mục gốc, có rules theo PSR12 như sau:

1
2
3
4
<?xml version="1.0"?>
<ruleset name="PHP Standards">
    <rule ref="PSR12" />
</ruleset>

Tạo tiếp 1 file PHP có sẵn một vài lỗi convention:

1
2
3
4
5
6
7
8
9
<?php
// File này cố tình code sai convention
 
function sum ($a ,$b){
    return $a+$b;
}
 
echo sum(1,2);

Bật dự án lên bằng VS Code, và bạn sẽ thấy nó báo rất nhiều lỗi convention như sau:

Rất nhiều lõi convention được phát hiện

Và để fix hết các lỗi này, bạn chỉ cần Nhấn chuột phải chọn Format document, hoặc sử dụng tổ hợp phím format code như mình hướng dẫn ở đầu bài. Và dưới đây là kết quả sau khi format lại code, bạn sẽ thấy các lỗi convention trên đã được fix.

Các lỗi convention đã được fix.

Công việc tích hợp Sniffer & Beautifier vào VS Code để format code PHP đến đây là kết thúc, chúc các bạn thử nghiệm thành công.

Hẹn gặp lại bạn trong các bài viết tiếp theo.

Bài viết gốc được đăng tải tại phambinh.net

Có thể bạn quan tâm:

Truy cập ngay việc làm IT đãi ngộ tốt trên TopDev