Visual Studio Code là lựa chọn số 1 của hầu hết các lập trình viên trên thế giới. Trong bài viết này tôi chỉ dẫn bạn cách cài đặt và sử dụng VSCode cho học lập trình web một cách hiệu quả nhất.
Visual Studio Code là gì?
Tiếp xúc và làm việc với lập trình đã trên 10 năm nhưng thực sự để tìm được một phần mềm viết code chuyên nghiệp tiện lợi thực sự khó khăn cho đến khi tôi biết được Visual Studio Code từ các bạn lập trình viên nước ngoài.
Không phải nói quá đâu nhưng hầu hết các phần mềm soạn thảo code được được như Php Store, Sublime Text… thì đều tốn phí mua bản quyền hoặc phải mất rất nhiều thủ thuật mới có được nó.
Visual Studio code thì hoàn toàn khác hẵn, nó thực sự là ngon.
- Được tạo ra và phát hành miễn phí bởi Microsoft tập đoàn công nghệ hàng đầu thế giới.
- Phần mềm được phát hành dùng miễn phí trong khi giá trị sử dụng cao.
- Thao tác trên phần mềm vô cùng tiện lợi vô cùng dễ dàng đặc biệt là cho lập trình web
- Hỗ trợ kho Extension rộng lớn phục vụ nhiều nhu cầu khá nhau của lập trình viên giúp công việc tốt hơn.
- Cài đặt nhẹ nhàng, khởi động nhanh chóng.
- Quản lý file và thư mục trên dự án tiện lợi, các thao tác như copy, paste, move, tạo file, tạo thư mục cực kỳ linh hoạt.
- Tóm lại là ngon
Ok, nếu bạn đang tìm một phần mềm lập trình web thì Visual Studio Code là lựa chọn tốt nhất cho bạn rồi đó. Ở phần tiếp theo tôi có một series video hướng dẫn cách sử dụng phần mềm này, rất hữu ích cho bạn!
1. Hướng dẫn cài đặt Visual Studio Code
Video này tôi hướng dẫn bạn cách cài đặt VS code chỉ sau vài phút. Mọi thứ nhanh gọn thôi, bạn bật máy tính lên và thực hành theo luôn nhé.
2. Gỡ triệt để phần mềm Visual Studio Code
Trong quá trình bạn sử dụng VS Code đôi khi mình cài đặt nhiều extension quá đẫn đến xung đột thì video bên dưới là cách gỡ triệt để Visual Studio Code. Bạn cứ xem qua biết đâu sau này gặp thì biết là có video này để xử lý.
Lưu ý là nếu chỉ gỡ VS Code theo cách thông thường thì sẽ không gỡ triệt để phần mềm nên nhiều cài đặt sẽ bị giữ lại.
3. Cài đặt Color Theme cho Visual Studio Code
Trong VS code có nhiều option màu chủ đạo khác nhau, video bên dưới giúp bạn chọn được giao diện soạn thảo VS Code mà bạn thấy dễ code nhất.
4. Cài đặt Material Icon Theme cho VS Code
Mặc định VSC có Icon cơ bản và có phần khó để phân biệt được các loại file khác nhau. Yên tâm trong video tôi hướng dẫn bạn chọn Material Icon để từ đó giúp bạn có phần hiển thị file thư mục trực quan và gắn liên với ngôn ngữ mà bạn đang dùng.
5. Cách Zoom code trong VS Code
Mắt mỗi người phù hợp với font-size code khác nhau. Video dưới giúp bạn cấu hình để phóng to và thu nhỏ code chỉ bằng cú lắn chuột.
6. Cài đặt Live Server cho Visual Studio Code
Khi lập trình web thì kết quả cần hiển thị lên giao diện. Trong quá trình học xây dựng giao diện bằng Html, Css, Js thay vì cần phải chạy code trên server ảo như Xampp bạn hoàn toàn có thể sử dụng Live Server để có thể hiển thị kết quả của những mã code của bạn lên trình duyệt Realtime[ngay khi bạn lưu code thì kết quả hiển thị ngay trên màn hình mà không cần load lại page].
7. Quản lý File và thư mục trên Visual Studio Code
Trong dự án thì không gì ngoài file và các thư mục. Vậy làm thế nào để có thể sử dụng linh hoạt những thao tác đó? Video bên dưới tôi chia sẻ bạn nhanh chóng những thứ bạn cần để chủ động trong quá trình tổ chức file thư mục trong dự án của mình trên VS Code.
8. Tự động xuống hàng trong VS Code
Mặc định thì nếu bạn có một đoạn text dài thì VS Code không tự động xuống dòng mà để 1 dòng dài lòng thòng. Điều đó không hay cho lắm vì chúng ta khó kiểm soát được những thông tin mình code ra của dự án.
Video bên dưới tôi chỉ cho bạn mẹo cài đặt để text ngoan ngoãn xuống hàng làm cho code của bạn rõ ràng sạch sẽ, dễ quản lý hơn.
9. Căn chỉnh code php trên Visual Studio Code
Để tự động căn chỉnh code trên VS Code bạn sử dụng tổ hợp phím Alt + Shift + F nhưng với Php thì cần cài đặt thêm extension. Video này hướng dẫn bạn điều đó để có thể code php ngăn nắp hơn.
Tạm kết
Trên đây tôi chia sẻ tới bạn những bài hướng dẫn những thứ bạn cần để sử dụng Visual Studio Code dễ dàng hơn và giúp học tập và phát triển website dễ dàng.
Nếu có bất kỳ vướng mắc nào bạn cứ để lại dưới comment, tôi sẽ dành thời gian tư vấn hỗ trợ bạn.
À, nếu bạn đang học lập trình web để đi làm nhưng chưa biết bắt đầu từ đâu? Chưa biết học như nào để kiếm được tiền thì bạn nên xem qua Lộ trình học web đi làm unitop.vn, tôi chia sẻ những thứ bạn cần để có thu nhập 8-30tr/tháng từ nghề lập trình này.
Hãy nâng cấp lên Microsoft Edge để tận dụng các tính năng mới nhất, bản cập nhật bảo mật và hỗ trợ kỹ thuật.
Sử dụng phần mở rộng Visual Studio Code
- Bài viết
- 03/14/2023
Trong bài viết này
Tổng quan
Visual Studio Code [VS Code] là một trình soạn thảo mã nguồn nhẹ nhưng mạnh mẽ, chạy trên máy tính và hỗ trợ Windows, macOS và Linux. Nó đi kèm với hỗ trợ tích hợp sẵn cho JavaScript, TypeScript và Node.js và có một hệ sinh thái mở rộng phong phú cho các ngôn ngữ khác [chẳng hạn như C ++, C#, Java, Python, PHP và Go] và thời gian chạy [chẳng hạn như .NET và Unity]. Để biết thêm thông tin, hãy xem phần Bắt đầu với VS Code.
VS Code cho phép bạn mở rộng khả năng của mình thông qua phần mở rộng. Các tiện ích của VS Code có thể bổ sung thêm tính năng cho trải nghiệm tổng thể. Với việc phát hành tính năng này, giờ đây, bạn có thể sử dụng tiện ích VS Code để làm việc với cổng thông tin Power Apps.
Tiện ích VS Code cho cổng thông tin
Power Platform Tools bổ sung khả năng đặt cấu hình cổng thông tin bằng VS Code và sử dụng ngôn ngữ Liquid tích hợp sẵn IntelliSense cho phép trợ giúp hoàn thành mã, hỗ trợ và gợi ý trong khi tùy chỉnh giao diện cổng thông tin bằng VS Code. Khi sử dụng tiện ích VS Code, bạn cũng có thể đặt cấu hình cổng nhờ tính năng hỗ trợ cổng thông tin cho Microsoft Power Platform CLI.
Điều kiện tiên quyết
Trước khi sử dụng phần mở rộng VS Code cho cổng thông tin Power Apps, bạn phải:
- Tải xuống, cài đặt và đặt cấu hình Visual Studio Code. Thông tin thêm: Tải Visual Studio Code xuống
- Đặt cấu hình môi trường và hệ thống của bạn để hỗ trợ quy trình CI/CD của cổng thông tin Power Apps bằng CLI. Thông tin thêm: Hỗ trợ cổng thông tin cho Microsoft Power Platform CLI [Xem trước]
Cài đặt tiện ích VS Code
Sau khi bạn cài đặt Visual Studio Code, bạn cần cài đặt tiện ích mở rộng cho phần bổ trợ cổng thông tin Power Apps cho VS Code.
Để cài đặt phần mở rộng VS Code:
- Mở Visual Studio Code.
- Chọn [Tiện ích mở rộng] từ ngăn bên trái.
- Chọn từ trên cùng bên phải trên ngăn tiện ích mở rộng.
- Tìm kiếm và chọn Power Platform Tools.
- Chọn Cài đặt.
- Xác minh rằng tiện ích đã được cài đặt thành công từ thông báo trạng thái.
Tải nội dung cổng thông tin xuống
Để xác thực với môi trường Microsoft Dataverse và để tải nội dung cổng thông tin xuống, hãy xem hướng dẫn .
Hỗ trợ đoạn mã
Giờ đây, khi tùy chỉnh nội dung đã tải xuống bằng VS Code, bạn có thể sử dụng IntelliSense cho các thẻ Liquid của cổng thông tin Power Apps.
Biểu tượng tệp
Tiện ích VS Code cho cổng thông tin tự động xác định và hiển thị biểu tượng cho các tệp và thư mục bên trong nội dung cổng thông tin đã tải xuống.
VS Code sử dụng không hiển thị các biểu tượng dành riêng cho cổng thông tin. Để xem các biểu tượng tệp dành riêng cho cổng thông tin của bạn, bạn sẽ phải cập nhật phiên bản VS Code để sử dụng chủ đề biểu tượng tệp dành riêng cho cổng thông tin.
Để bật chủ đề biểu tượng tệp cụ thể cho cổng thông tin:
- Mở Visual Studio Code.
- Chuyển đến phần Tệp > Tùy chọn > Chủ đề biểu tượng tệp
- Chọn chủ đề cho biểu tượng cổng thông tin Power Apps.
Bản xem trước trực tiếp
Phần mở rộng Visual Studio Code cho phép tùy chọn xem trước trực tiếp để xem trang nội dung cổng thông tin bên trong giao diện Visual Studio Code trong trải nghiệm phát triển.
Để xem bản xem trước, hãy chọn
Ngăn xem trước sẽ mở ra ở phía bên phải của trang đang được chỉnh sửa.
Tính năng xem trước yêu cầu các tệp khác cũng được mở trong cùng một phiên VS Code tạo nên đánh dấu HTML để bản xem trước hiển thị. Ví dụ: nếu chỉ mở tệp HTML mà không mở cấu trúc thư mục bằng VS Code, bạn sẽ thấy thông báo sau.
Khi sự cố này xảy ra, hãy mở thư mục bằng Tệp > Mở thư mục và chọn thư mục nội dung cổng thông tin đã tải xuống để mở trước khi bạn thử xem trước lại.
Tự động hoàn thành
Tính năng tự động hoàn thành trong tiện ích VS Code hiển thị ngữ cảnh hiện tại đang được chỉnh sửa và các thành phần tự động hoàn thành có liên quan thông qua IntelliSense.