VS Code cho phép bạn làm việc từ xa với môi trường phát triển đầy đủ tính năng. Mặc dù bạn làm việc từ xa nhưng bạn không cần phải hy sinh tất cả các tính năng tuyệt vời có sẵn khi làm việc cục bộ - đầy đủ Intellisense, điều hướng, tái cấu trúc, gỡ lỗi và thử nghiệm
Có 3 tùy chọn về cách phát triển từ xa với Mã VS, mỗi tùy chọn được kích hoạt bởi một tiện ích mở rộng riêng
Trong hướng dẫn này, chúng ta sẽ tập trung vào phát triển bên trong một docker container. Cách tiếp cận này sẽ cho phép bạn có một môi trường phát triển riêng biệt tách biệt với môi trường cục bộ của bạn. Khi bạn cần chuyển sang một dự án khác, với các phụ thuộc, công cụ hoặc hệ thống khác, bạn chỉ cần chuyển sang một vùng chứa khác
Yêu cầu
BƯỚC 0 - Bắt đầu nhanh chóng
Mã mẫu có sẵn Github. Giả sử bạn đã có Docker Desktop, bạn có thể bắt đầu nhanh bằng cách nhấp vào nút này
Liên kết này hướng dẫn Mã VS cài đặt tiện ích mở rộng Remote - Containers nếu bạn chưa có và sao chép dự án mẫu từ Github vào một ổ đĩa vùng chứa
BƯỚC 1 - Mở Vùng chứa trong Mã VS
Nếu bạn đã mở dự án mẫu của chúng tôi, bạn không cần phải làm theo bước này. Tôi chỉ muốn đề cập rằng bạn có nhiều tùy chọn để mở vùng chứa trong Mã VS. Khi bạn nhấp vào nút màu xanh lục ở góc dưới cùng bên trái của Mã VS, bạn sẽ thấy các tùy chọn sau
- Mở thư mục trong vùng chứa - mở thư mục hiện có và hiển thị cho bạn trình hướng dẫn sẽ tạo vùng chứa thích hợp cho ứng dụng của bạn
- Clone Repository trong Container Volume - bạn sẽ chọn kho lưu trữ nào và vùng chứa nào sẽ được sử dụng cho nó nếu nó chưa được xác định bởi dự án
- Đính kèm vào Bộ chứa đang chạy - bạn có thể đính kèm vào bộ chứa đang chạy
- Thêm tệp cấu hình bộ chứa phát triển - thêm vào không gian làm việc hiện đang mở
- Dùng thử Mẫu vùng chứa phát triển - Microsoft đã chuẩn bị nhiều mẫu cho các ngôn ngữ và cấu hình khác nhau
- Bắt đầu với Remote-Containers - liên kết
BƯỚC 2 - Khởi tạo
Sau khi bạn đã mở một vùng chứa trong Mã VS, bạn thường đợi một lúc khi đây là lần đầu tiên bạn mở một vùng chứa cụ thể. Mã VS cần thực hiện một loạt công việc - sao chép kho lưu trữ, xây dựng vùng chứa, cài đặt máy chủ Mã VS, cài đặt các tiện ích mở rộng cần thiết, v.v.
Bạn có thể nhấp vào liên kết để mở để tìm hiểu chi tiết về những gì đang làm
Khi mọi thứ đã sẵn sàng, bạn có thể xem bạn đang chạy vùng chứa nào ở góc dưới cùng bên trái của Mã VS
Bạn cũng có thể tìm thấy vùng chứa nào đang chạy, thông tin bổ sung và danh sách khối lượng vùng chứa trong cửa sổ VS Code Remote Explorer
BƯỚC 3 - Kiểm tra devcontainer. json
Tất cả điều kỳ diệu tập trung vào một tệp devcontainer.json, nằm trong thư mục .devcontainer. Tệp cho Mã VS biết vùng chứa nào sẽ mở (hoặc tạo) cũng như các tùy chỉnh khác
devcontainer.json cho ứng dụng mẫu trông như thế này
{ "name": "PHP", "build": { "dockerfile": "Dockerfile", "args": { // Update VARIANT to pick a PHP version: 8, 8.1, 8.0, 7, 7.4 // Append -bullseye or -buster to pin to an OS version. // Use -bullseye variants on local on arm64/Apple Silicon. "PHP_VERSION": "8.1" } }, // Configure tool-specific properties. "customizations": { // Configure properties specific to VS Code. "vscode": { // Set *default* container specific settings.json values on container create. "settings": { "php.executablePath": "/usr/local/bin/php" }, // Add the IDs of extensions you want installed when the container is created. "extensions": [ "DEVSENSE.phptools-vscode" ] } }, // Use 'forwardPorts' to make a list of ports inside the container available locally. "forwardPorts": [8000], // Use 'postCreateCommand' to run commands after the container is created. "postCreateCommand": "composer install", // Comment out to connect as root instead. More info: //aka.ms/vscode-remote/containers/non-root. "remoteUser": "vscode" }Như bạn có thể thấy phần build tham chiếu một Dockerfile duy nhất bởi vì đây là một ứng dụng vùng chứa duy nhất. Có lẽ không cần thiết phải giải thích chi tiết nội dung của mẫu Dockerfile. Đủ để nói rằng chúng tôi đang sử dụng hình ảnh vùng chứa đã chuẩn bị từ VS Code Remote / GitHub Codespaces Development Container Images. Nhưng hãy thoải mái sử dụng bất kỳ hình ảnh nào bạn muốn. Bạn có thể xem hướng dẫn của chúng tôi về PHP trên docker tại https. //Blog. phát minh. com/2019/introduction-to-php-on-docker-with-visual-studio-code
Đối với các tình huống phức tạp hơn, khi cần thiết lập nhiều vùng chứa, sẽ có tham chiếu đến docker-compose.yml. Một kịch bản như vậy có thể là PHP trong một vùng chứa, máy chủ Nginx ở một vùng chứa khác - chúng tôi có một hướng dẫn chính xác cho điều đó tại đây
Phần customization cho phép bạn xác định cài đặt và tiện ích mở rộng nào sẽ được cài đặt trong vùng chứa. Đối với ứng dụng mẫu, chúng tôi sẽ sử dụng Công cụ PHP để cung cấp cho chúng tôi hỗ trợ PHP đầy đủ cho Mã VS
Nếu bạn quyết định chỉnh sửa tệp này hoặc các tệp khác được tham chiếu bởi tệp này, bạn sẽ cần xây dựng lại vùng chứa. Nhấp vào biểu tượng màu xanh lá cây phía dưới bên trái rồi chọn cat /etc/os-release0
devcontainer.json cho phép nhiều tình huống khác nhau, bạn có thể tìm thấy tài liệu tham khảo đầy đủ tại đây
BƯỚC 4 - Nhà ga
Thiết bị đầu cuối có thể là một trong số ít nơi bạn có thể nhận thấy rằng bạn không làm việc cục bộ
Nhấn Ctrl + ` để mở terminal và chạy lệnh sau
cat /etc/os-releaseBƯỚC 5 - Khám phá trình chỉnh sửa
Mở cat /etc/os-release2 và bạn có thể thấy nó giống hệt như bạn sẽ trải nghiệm khi mở cục bộ
Cú pháp được đánh dấu chính xác, có một ống kính mã phía trên định nghĩa hàm - bạn có thể nhấp vào nó để xem vị trí của tham chiếu. Hoặc nếu bạn di chuột qua bất kỳ biểu tượng nào, bạn sẽ nhận được chú giải công cụ
Nhấp vào cat /etc/os-release3 và nhấn F12, bạn sẽ nhận được hướng dẫn sử dụng được tạo cho chức năng này
Nhấp vào hàm cat /etc/os-release4, nhấn F2 và đổi tên hàm
Đây chỉ là sự lựa chọn tùy ý các tính năng của trình chỉnh sửa do Công cụ PHP cung cấp với mục đích cho thấy rằng mặc dù bạn đang làm việc từ xa nhưng bạn vẫn có được trải nghiệm đầy đủ tính năng
BƯỚC 6 - Chạy và gỡ lỗi
Trong cat /etc/os-release5 đặt con trỏ trên dòng có câu lệnh cat /etc/os-release6 và nhấn F9 để đặt điểm ngắt, sau đó nhấn F5 để bắt đầu gỡ lỗi
Như bạn có thể thấy quá trình gỡ lỗi hoạt động trực tiếp từ hộp - hình ảnh docker đã cấu hình sẵn Xdebug và kho lưu trữ chứa tệp cat /etc/os-release7
Bạn cũng có thể xem các phần trang bị sửa lỗi với giá trị biến được hiển thị trong trình chỉnh sửa
Nếu bạn nhấn F5 lần nữa, trình duyệt sẽ xuất hiện với trang kết quả
Trình duyệt được mở trên hệ thống cục bộ của bạn, nhưng điều đó có thể xảy ra do cổng cat /etc/os-release8 được chuyển tiếp đến máy chủ lưu trữ. Để kiểm tra những cổng nào khác được chuyển tiếp đến máy chủ, hãy nhấn F1 và viết cat /etc/os-release9
BƯỚC 7 - Kiểm tra
Nhấp vào biểu tượng kiểm tra trong thanh menu bên trái. Bạn sẽ thấy các bài kiểm tra được xác định trong thư mục devcontainer.json0
Nhấp vào nút ► phát để chạy tất cả các bài kiểm tra. Bạn sẽ thấy ngay kết quả trong cửa sổ Test Explorer
Nhấp vào bài kiểm tra devcontainer.json1 để kiểm tra lý do tại sao nó không vượt qua
Đặt một điểm dừng bằng cách nhấn F9 vào hàm devcontainer.json1 và nhấp chuột phải vào biểu tượng màu đỏ bên cạnh tiêu đề hàm và chọn devcontainer.json3
Có lẽ không cần thiết phải gỡ lỗi cái này để tìm hiểu lý do tại sao nó không vượt qua. Khi bạn sửa nó và nhấp vào devcontainer.json4, biểu tượng bên cạnh tiêu đề chức năng sẽ chuyển sang màu xanh lục
Các thử nghiệm được chạy bởi PHPunit được cài đặt bởi nhà soạn nhạc khi bộ chứa được khởi tạo bởi VSCode. Bạn có thể tìm thấy lệnh trong phần devcontainer.json5 trong tệp devcontainer.json
Phần kết luận
Mã VS với phần mở rộng Remote - Containers là một công cụ rất mạnh cho các nhà phát triển. Khi kết hợp với PHP Tools, bạn sẽ có được một môi trường phát triển PHP đầy đủ tính năng trong khi làm việc từ xa trong một bộ chứa