Visual Studio Code Cơ Bản

Mục tiêu chung khi học Visual Studio Code

🎯 Giảm việc mở nhiều công cụ, dịch chuyển liên tục giữa các công cụ trong quá trình làm việc. 🎯 Loại bỏ dần những công cụ làm cho máy tính nhẹ hơn (nếu có máy tính mới, thì cài đặt lại cũng nhanh hơn).

Visual Studio giúp bạn

Không phải thường xuyên mở File Explorer, Finder, Dolphin hay Nautilus
Không cần những công cụ làm việc với file text nữa: Notepad, Notepad++, Submine Text.
Không cần những công cụ chỉnh sửa ảnh cơ bản, mặc định hệ điều hành như Paint, Photos, Preview
Không cần công cụ lập trình đơn lẻ, hoặc trả phí như Source Tree, Git Kraken, Pycharm, ...
Không cần những công cụ đơn lẻ khi chúng được tích hợp vào VS Code như Draw.io, Mermaid.
Không cần chuyển màn hình để mở Terminal (PowerShell, Konsole, GitBash)
Không phụ thuộc vào những bộ phần mềm văn phòng (office suite) cho những tài liệu, bảng tính, bảng trình bày đơn giản

😌 Không tốt hơn có. Less is more. Minimalism.

Giới thiệu về VS Code và VSCodium

Visual Studio Code (Microsoft) là một công cụ lập trình nguồn mở, miễn phí và đa nền tảng được phát triển bởi Microsoft. vscode được thiết kế để hỗ trợ nhiều ngôn ngữ lập trình và cung cấp các tính năng như tự động hoàn thành mã, gợi ý, và kiểm tra lỗi.

VSCodium (Cộng đồng) là một phiên bản mã nguồn mở của vscode, được phát triển bởi cộng đồng. VSCodium loại bỏ các thành phần độc quyền của Visual Studio Code (Microsoft) và cung cấp một phiên bản hoàn toàn mở.

Bạn dùng cái nào cũng được, mình sẽ gọi cả hai với tên chung với tên là vscode.

Để bớt quảng cáo lúc đầu, có một phiên bản gọn hơn, bạn nên dùng VSCodium.
Để học tool theo giáo trình của Microsoft, bạn nên dùng Visual Studio Code (Microsoft).

Không lập trình, vscode giúp bạn tinh giản công việc

Mặc dù vscode được thiết kế cho các lập trình viên, nhưng nó cũng cung cấp nhiều công cụ hữu ích cho người không lập trình. Một số lý do để cài đặt vscode bao gồm:

Hỗ trợ Markdown: Thay vì cần tới các _ Office hay _ Drive cho những bài viết đơn giản, Markdown giúp bạn tạo và chỉnh sửa tài liệu một cách dễ dàng và biến hóa nhanh thành sơ đồ tư duy, các loại sơ đồ, và cả slide trình bày.
Mermaid và Marp: vscode hỗ trợ Mermaid và Marp, giúp bạn tạo sơ đồ và trình bày một cách trực quan.
Git: vscode cung cấp hỗ trợ Git, giúp bạn quản lý và theo dõi các thay đổi trong dự án của mình.

Các thành phần chính trên giao diện của vscode

Khi bạn mở vscode, bạn sẽ thấy giao diện như sau:

Menu: Menu chính của vscode, bao gồm các tùy chọn như File, Edit, View, v.v.
Primary Side Bar: Thanh chính bên trái, hiển thị các dự án và tệp tin của bạn, nếu bạn đang bật Explorer, kết quả tìm kiếm (bật Search), quản lý phiên bản (Source Control), và nhiều thứ nữa tùy bạn cài thêm.
Secondary Side Bar: Thanh bên thứ hai, hiển thị các thông tin chi tiết về tệp tin đang mở nếu bạn chọn Outline.
Search Bar: Thanh tìm kiếm trên cùng, giúp bạn tìm kiếm các tệp tin và mã trong dự án của mình.
Bottom Panel: Panel dưới cùng, hiển thị các thông tin về trạng thái của dự án và các công cụ khác, nơi có Terminal
Editor: Khu vực chính để chỉnh sửa mã và văn bản.
Status Bar: Thanh hoạt động, hiển thị các thông tin về trạng thái của dự án và các công cụ khác, một dòng ở dưới cùng, có cái chuông trong góc phải.

Menu View, nơi liệt kê, và cho phép bật tắt ẩn hiện những gì bạn nhìn thấy trên giao diện của vscode.

📝 Khi dạo, bạn xem thấy, thuộc tên và chọn thử để bật, tắt một lần. Dạo tới đâu, ghi chú tới đó. Again, phải ghi chú trong lúc dạo. Bạn ghi, không phải AI ghi.

🕹️ Khi quen, bạn tự thử thách mình tìm và bật tắt thứ đó. Lúc này dùng cái note ghi chú của bạn. Chon ngẫu nhiên (random) một thứ nào đó, tìm nó. Chơi trò này 15 phút thui!

⚡️ Khi làm chủ, bạn thuộc phím tắt. Rồi, bổ sung thêm phím tắt vào note của bạn.

Thứ tự đễ bạn dạo đây:

View > Apperance (tất cả trong Apperance trước)
View > Explore, Search, Source Control, Run, Extensions
View > Editor Layout (tất cả các thứ trong đây)
View > Open View ... (và gõ chọn)
View > Word Wrap
View > trừ Command Pallet ra, các thứ còn lại.

Và nhớ là cái Command Pallet, trên giao diện nó nằm trong View. Về sau, bạn toàn dùng phím tắt Ctrl + Shift + P để bật nó. Đây cũng là phím tắt quan trọng nhất trong vscode.

Nhiệm vụ 2️⃣: Workspace

Hãy hỏi ✨AI câu sau, theo mẫu, và làm theo cách AI trả lời. ChatGPT cho câu trả lời ưng ý nhất.

✨ Tôi đang học vscode, hãy giải thích, cho ví dụ và đề ra bài tập thực hành cho việc: làm chủ workspace với nhiều folder ở các vị trí khác nhau, không lồng nhau.

Bạn còn nhớ folder 📁 ~/Workspaces trong đã tạo lúc Chuẩn Bị Máy Tính không, đây là lúc dùng nó.

Bạn đã hiểu, thử làm lần cuối:

Đưa/Lắp/Gắn/Mount/Map/Add thêm folder📁 Downloads vào workspace và lưu workspace này lại.
Tạo một workspace mới, lưu lại.
Mở New Windows trong vscode; trong cửa sổ mới, mở workspace từ file đã save. 💡 Bạn thấy rằng, bạn có thể mở 2 cửa sổ vscode, mỗi cửa sổ lại mở ra những folder liên quan cho một nhiệm vụ. Bạn có thấy mình ngon hơn chưa hỡi người đa năng

Nhiệm vụ 3️⃣: Terminal trong vscode

🥱 Lại terminal nữa hả? Sự thật là từ bước này trở đi, terminal của bạn sẽ ngày càng đơn giản hơn; không phải phức tạp hơn.

Hãy hỏi ✨AI câu sau, theo mẫu, và làm theo cách AI trả lời. ChatGPT cho câu trả lời ưng ý nhất.

✨ Tôi đang học vscode, hãy chỉ tôi bật tắt cửa sổ terminal, phím tắt để bật lại ô terminal cũ, hoặc mở thêm một ô terminal mới.

Sau đó hỏi

✨ Thao tác spilt, unsplit, join terminal là gì, làm sao để thực hiện?

Thế là ổn. Để có một terminal gọn gàng và bảo vệ mắt hơn, bạn hãy hỏi ✨AI câu sau, theo mẫu, và làm theo cách AI trả lời.

✨ Hướng dẫn tôi, ngắn gọn, cách cài đặt Oh My Posh.

Rồi, xong nhiệm vụ, bạn đã có thể dùng terminal trong VS Code luôn. Qua nhiệm vụ khác nha, đừng sa đà vào trang trí terminal. Để sau.

Nhiệm vụ 4️⃣: Auto Save

File
  L Auto Save

Vậy là bạn đã có thể dùng vscode thay cho notepad++.

Để tạo file mới, hãy học thuộc phím tắt trong

File
  L New File ...

Nhiệm vụ 5️⃣: Extension trong vscode

Extension (tiện ích mở rộng) là những công cụ phần mềm bổ sung được cài vào VSCode để thêm tính năng hoặc cải thiện trải nghiệm, được quản lý trực tiếp bởi vscode. Chúng hoạt động giống như plugin trong trình duyệt hay ứng dụng khác: bản thân VSCode chỉ có các tính năng cơ bản, extension sẽ mở rộng sức mạnh của nó.

Tùy theo phiên bản bạn đang dùng (VS Code hay VSCodium) mà một số các extension được cài sẵn, bạn không cần cài thêm.

✨ Tôi đang học vscode, làm cách nào kiểm tra những extension đã cài đặt rồi?

Trong lúc tìm cài đặt extension, mình phân làm hai loại: extension đơn (công cụ) và extenstion pack (gói). Dễ hiểu, với extension pack, nó không trực tiếp cung cấp tính năng mà cung cấp việc cài đặt một loại các extension đơn đã được tập hợp sẵn. Các lập trình viên, người dùng thường tự tạo ra các pack này để giảm số lần tìm kiếm, cài đặt. Bạn cũng có thể tạo ra một pack cho riêng mình.

Tham khảo, nhưng cũng không cần làm ngay, những extension mà mình sưu tập và khuyên dùng tại trang này Những Vscode Extenstion Khuyên Dùng

Hãy hỏi AI câu sau, và để dành.

✨ Tôi đang dùng vscode, làm sao để xuất ra và nhập vào những extension tôi đã dùng từng máy tính này sang máy tính khác

Rồi, bạn hãy thử so sánh 2 thư mục với extension moshfeu.compare-folders Compare Folders Vscodium, VSCode |

Xong rồi, dần dần khám phá các extension khác. Hãy nhớ, gần như mọi công việc đều có thể đã có một extension trong vscode hỗ trợ. Luôn thử 3 phút tìm ra chúng.

Nhiệm vụ 5️⃣: Làm quen Git trong vscode

Git ư, bạn có thể dùng command line hết mà. Tuy nhiên, đã khổ rồi thì giờ sướng lại ngay đây.

Đầu tiên, trong VS code, có mục Source Control (trên menu View, và thanh bên trái) với biểu tượng 'cây phân nhánh'. Đây là giao diện để thực hành Git.

Hãy ngắm nhìn nó một chút.

Tiêu đề là gì? SOURCE CONTROL
Có những gì trong mục chính cấp thứ nhất? CHANGES, REPOSITORIES ... thấy chưa?
Trong CHANGES có Changes, vân vân.

Khám phá dần các nút có các biểu tượng trên dòng CHANGES, chú ý biểu tượng cây 3 nhánh tên Git Graph. À, bạn phải cài 2 extention là Git Graph và Git Blame Status (có liệt kê trong Những Vscode Extension Khuyên Dùng)

Ở nhiệm vụ này, chủ yếu là bạn ngắm nhìn, và tìm hiểu những gì bạn thấy, từng cái một.

Hãy hỏi AI, câu này và tìm hiểu

✨ Tôi đang học sử dụng Git Graph extension (mhutchie.git-graph) trong vscode, chỉ dẫn và giải thích cho tôi cách thực hiện Repository Settings như General, User Details, Remote Configurations

Cạnh bánh răng đó, bạn có thấy một cái kính lúp, một biểu tượng terminal không?

Kính lúp dùng để tìm kiếm trong cửa sổ git bạn đang thấy
Còn biểu tượng terminal giúp bạn mở terminal ngay tại repo bạn đang xem. Bấm đi.

Cuối cùng, hãy mở một file trong một repository và dạo lên xuống một vài dòng (dùng phím mũi tên trên bàn phím), tới dòng nào đó, dừng lại, nhìn xuống thanh status bar bên dưới của vscode, bạn có thấy thông tin người đã viết dòng đó? và thời gian họ đã công bố lên repo chung.

Xong rồi, quay lại với lịch trình bạn đang đi nha: Git Cơ Bản 👉 Nhiệm vụ 6️⃣ Sử dụng Git trong vscode