Cách sử dụng Tích hợp Git trong Mã Visual Studio
Visual Studio Code (VS Code) đã trở thành một trong những trình soạn thảo phổ biến nhất hiện có để phát triển web. Nó đã trở nên phổ biến như vậy nhờ có nhiều tính năng tích hợp như tích hợp kiểm soát nguồn, cụ thể là với Git . Khai thác sức mạnh của Git từ bên trong VS Code có thể làm cho quy trình làm việc của bạn hiệu quả và mạnh mẽ hơn.Trong hướng dẫn này, bạn sẽ khám phá cách sử dụng Tích hợp kiểm soát nguồn trong VS Code với Git.
Yêu cầu
Để hoàn thành hướng dẫn này, bạn cần những thứ sau:
- Git đã được cài đặt trên máy của bạn. Để biết thêm chi tiết về việc hoàn thành điều này, hãy xem lại hướng dẫn Bắt đầu với Git .
- Phiên bản mới nhất của Visual Studio Code được cài đặt trên máy của bạn.
Bước 1 - Làm quen với Tab Điều khiển Nguồn
Điều đầu tiên bạn cần làm để tận dụng lợi thế của tích hợp kiểm soát nguồn là khởi tạo một dự án dưới dạng repository Git.
Mở Visual Studio Code và truy cập vào terminal tích hợp sẵn . Bạn có thể mở nó bằng cách sử dụng phím tắt CTRL + ` trên Linux, macOS hoặc Windows.
Trong terminal của bạn, hãy tạo một folder cho một dự án mới và thay đổi thành folder đó:
- mkdir git_test
- cd git_test
Sau đó, tạo một repository Git:
- git init
Một cách khác để thực hiện điều này với Visual Studio Code là bằng cách mở tab Điều khiển nguồn (biểu tượng trông giống như một con đường ) trong console bên trái:
Tiếp theo, chọn Mở folder :
Thao tác này sẽ mở trình khám phá file của bạn đến folder hiện tại. Chọn folder dự án ưa thích và nhấp vào Mở .
Sau đó, chọn Khởi tạo Kho lưu trữ :
Nếu bây giờ bạn kiểm tra hệ thống file của bạn , bạn sẽ thấy rằng nó bao gồm một .git . Để thực hiện việc này, hãy sử dụng terminal để chuyển đến folder dự án của bạn và liệt kê tất cả nội dung:
- ls -la
Bạn sẽ thấy .git đã được tạo:
Output- .
- ..
- .git
Bây giờ repo đã được khởi tạo, hãy thêm một file có tên là index.html .
Sau khi làm như vậy, bạn sẽ thấy trong control panel Nguồn mà file mới của bạn hiển thị với chữ U bên cạnh nó. U là viết tắt của unracked file , nghĩa là một file mới hoặc đã thay đổi, nhưng chưa được thêm vào repository :
Đến đây bạn có thể nhấp vào biểu tượng dấu cộng ( + ) bên cạnh danh sách file index.html để theo dõi file trong repository lưu trữ.
Sau khi được thêm, ký tự bên cạnh file sẽ chuyển thành chữ A. A đại diện cho một file mới đã được thêm vào repository .
Để commit các thay đổi , hãy nhập thông báo commit vào hộp nhập liệu ở đầu bảng Điều khiển Nguồn . Sau đó, nhấp vào biểu tượng dấu kiểm để thực hiện commit .
Sau khi làm như vậy, bạn sẽ nhận thấy rằng không có thay đổi nào đang chờ xử lý.
Tiếp theo, thêm một chút nội dung vào index.html của bạn.
Bạn có thể sử dụng phím tắt Emmet để tạo khung HTML5 trong VS Code bằng cách nhấn ! tiếp theo là phím Tab . Hãy tiếp tục và thêm một cái gì đó vào <body> như tiêu đề <h1> và lưu nó.
Trong console nguồn, bạn sẽ thấy rằng file của bạn đã được thay đổi. Nó sẽ hiển thị chữ M bên cạnh, viết tắt của một file đã được sửa đổi :
Để thực hành, hãy tiếp tục và thực hiện thay đổi này.
Đến đây bạn đã quen với việc tương tác với console nguồn, bạn sẽ chuyển sang phần diễn giải các chỉ báo máng xối.
Bước 2 - Chỉ báo máng xối
Trong bước này, bạn sẽ xem xét những gì được gọi là " Gutter " trong VS Code. Máng xối là vùng nhỏ ở bên phải của số dòng.
Nếu bạn đã sử dụng tính năng gấp mã trước đây, thì các biểu tượng phóng to và thu nhỏ sẽ nằm trong rãnh nước.
Hãy bắt đầu bằng cách thực hiện một thay đổi nhỏ đối với index.html của bạn, chẳng hạn như thay đổi đối với nội dung trong <h1> . Sau khi làm như vậy, bạn sẽ nhận thấy một dấu dọc màu xanh trong rãnh của đường mà bạn đã thay đổi. Dấu màu xanh dọc cho biết dòng mã tương ứng đã được thay đổi.
Bây giờ, hãy thử xóa một dòng mã. Bạn có thể xóa một trong các dòng trong phần <body> của index.html của bạn . Bây giờ chú ý trong máng xối có một hình tam giác màu đỏ. Hình tam giác màu đỏ biểu thị một dòng hoặc một group các dòng đã bị xóa.
Cuối cùng, ở cuối phần <body> của bạn, hãy thêm một dòng mã mới và để ý thanh màu xanh lục. Thanh dọc màu xanh lục biểu thị một dòng mã đã được thêm vào.
Ví dụ này mô tả các chỉ báo máng xối cho một dòng đã sửa đổi, một dòng đã xóa và một dòng mới:
Bước 3 - Tệp khác nhau
VS Code cũng có khả năng thực hiện khác biệt trên một file .Thông thường, bạn sẽ phải download một công cụ khác biệt riêng để thực hiện việc này, vì vậy tính năng tích hợp này có thể giúp bạn làm việc hiệu quả hơn.
Để xem điểm khác biệt, hãy mở console nguồn và nhấp đúp vào file đã thay đổi. Trong trường hợp này, hãy bấm đúp vào index.html . Bạn sẽ được đưa đến một dạng xem khác biệt điển hình với version hiện tại của file ở bên trái và version đã commit trước đó của file ở bên phải.
Ví dụ này cho thấy rằng một dòng đã được thêm vào trong version hiện tại:
Bước 4 - Làm việc với các Chi nhánh
Di chuyển đến thanh dưới cùng, bạn có khả năng tạo và chuyển đổi các nhánh. Nếu bạn nhìn vào phía dưới cùng bên trái của editor , bạn sẽ thấy biểu tượng điều khiển nguồn (biểu tượng trông giống như một con đường) theo sau rất có thể là master hoặc tên của nhánh làm việc hiện tại.
Để tạo một chi nhánh, hãy nhấp vào tên chi nhánh đó. Một menu sẽ bật lên cho bạn khả năng tạo một nhánh mới:
Hãy tiếp tục và tạo một nhánh mới có tên là test .
Bây giờ, hãy thực hiện thay đổi đối với index.html của bạn để cho biết bạn đang ở trong nhánh test mới, chẳng hạn như thêm văn bản this is the new test branch .
Commit những thay đổi đó cho nhánh test . Sau đó, nhấp vào tên chi nhánh ở phía dưới trái để chuyển về master chi nhánh.
Sau khi chuyển đổi trở lại master chi nhánh, bạn sẽ nhận thấy rằng this is the new test branch văn bản commit với test chi nhánh không còn hiện diện.
Bước 5 - Làm việc với Kho lưu trữ Từ xa
Hướng dẫn này sẽ không nói sâu về nó, nhưng thông qua console Nguồn, bạn có quyền truy cập để làm việc với các repository từ xa. Nếu bạn đã làm việc với một repository từ xa trước khi bạn nhận thấy các lệnh quen thuộc như kéo, đồng bộ hóa, xuất bản, lưu trữ, v.v.
Bước 6 - Cài đặt các tiện ích mở rộng hữu ích
VS Code không chỉ đi kèm với nhiều chức năng tích hợp cho Git, mà còn có một số tiện ích mở rộng rất phổ biến để thêm chức năng bổ sung.
Git Blame
Tiện ích mở rộng này cung cấp khả năng xem thông tin Git Blame trên thanh trạng thái cho dòng hiện được chọn.
Điều này nghe có vẻ đáng sợ, nhưng đừng lo lắng, tiện ích mở rộng Git Blame thiên về tính thực tế hơn là làm cho ai đó cảm thấy tồi tệ. Ý tưởng “đổ lỗi” cho một người nào đó về sự thay đổi mã không phải là để làm họ xấu hổ, mà nhiều hơn về việc tìm ra người phù hợp để đặt câu hỏi cho một số đoạn mã nhất định.
Như bạn thấy trong ảnh chụp màn hình, tiện ích mở rộng này cung cấp một thông báo tinh tế liên quan đến dòng mã hiện tại mà bạn đang làm việc trên thanh công cụ dưới cùng giải thích ai đã thực hiện thay đổi và khi họ thực hiện thay đổi.
Lịch sử Git
Mặc dù bạn có thể xem các thay đổi hiện tại, thực hiện các khác biệt và quản lý các chi nhánh bằng các tính năng tích hợp trong VS Code, nhưng nó không cung cấp một cái nhìn chuyên sâu về lịch sử Git của bạn.Phần mở rộng Lịch sử Git giải quyết vấn đề đó.
Như bạn thấy trong hình ảnh bên dưới, tiện ích mở rộng này cho phép bạn khám phá kỹ lịch sử của file , tác giả nhất định, chi nhánh, v.v. Để kích hoạt cửa sổ Lịch sử Git bên dưới, nhấp chuột phải vào file và chọn Git: View Lịch sử file :
Ngoài ra, bạn có thể so sánh các nhánh và các commit , tạo các nhánh từ các commit và hơn thế nữa.
Ống kính Git
GitLens tăng cường các khả năng Git được tích hợp trong Visual Studio Code. Nó giúp bạn trực quan hóa quyền tác giả mã trong nháy mắt thông qua chú thích Git và thấu kính mã, chuyển và khám phá các repository Git một cách liền mạch, có được thông tin chi tiết có giá trị thông qua các lệnh so sánh mạnh mẽ, v.v.
Tiện ích mở rộng Git Lens là một trong những tiện ích mở rộng phổ biến nhất trong cộng đồng và cũng là tiện ích mạnh mẽ nhất. Theo hầu hết các cách, nó có thể thay thế từng phần mở rộng trước đó bằng chức năng của nó.
Đối với thông tin "đổ lỗi", một thông báo tinh tế xuất hiện ở bên phải dòng bạn hiện đang làm việc để thông báo cho bạn biết ai đã thực hiện thay đổi, thời điểm họ thực hiện và thông báo commit liên quan. Có một số thông tin bổ sung bật lên khi di chuột qua thông báo này như mã tự thay đổi, dấu thời gian, v.v.
Đối với thông tin lịch sử Git, tiện ích mở rộng này cung cấp rất nhiều chức năng. Bạn có thể dễ dàng truy cập vào vô số tùy chọn bao gồm hiển thị lịch sử file , thực hiện các khác biệt với các version trước, mở một bản sửa đổi cụ thể, v.v. Để mở các tùy chọn này, bạn có thể nhấp vào văn bản trong thanh trạng thái dưới cùng chứa tác giả đã chỉnh sửa dòng mã và cách nó đã được chỉnh sửa cách đây bao lâu.
Thao tác này sẽ mở ra cửa sổ sau:
Tiện ích mở rộng này được đóng gói với chức năng và sẽ mất một lúc để khai thác tất cả những gì nó cung cấp.
Kết luận
Trong hướng dẫn này, bạn đã khám phá cách sử dụng tích hợp điều khiển nguồn với VS Code. VS Code có thể xử lý nhiều tính năng mà trước đây yêu cầu download một công cụ riêng biệt.
Các tin liên quan
