Hướng dẫn sử dụng VS Code: Các kỹ năng và công cụ cần thiết cho nhà phát triển hiệu quả

Visual Studio Code (VS Code) là một trình soạn thảo mã nguồn miễn phí, mã nguồn mở, đa nền tảng, được rất nhiều nhà phát triển yêu thích. Nó có các chức năng mạnh mẽ, hệ sinh thái mở rộng phong phú và giao diện đơn giản, dễ sử dụng. Bài viết này sẽ tổng hợp các kỹ năng và công cụ hữu ích của VS Code dựa trên các cuộc thảo luận gần đây trên X/Twitter, giúp bạn nâng cao hiệu quả phát triển.

Sức hấp dẫn của VS Code nằm ở đâu?

Từ các cuộc thảo luận trên X/Twitter, chúng ta có thể thấy sự nhiệt tình của các nhà phát triển đối với VS Code. @@freeCodeCamp đã nhiều lần đề cập đến tính phổ biến và miễn phí của VS Code, nhấn mạnh các chức năng phong phú mà nó cung cấp. @@chomado đã chia sẻ trình soạn thảo yêu thích của cô ấy và giới thiệu các chức năng mở rộng cho các kỹ sư front-end.

Tóm lại, những ưu điểm chính của VS Code bao gồm:

• Miễn phí và mã nguồn mở: Bất kỳ ai cũng có thể sử dụng miễn phí và tham gia vào quá trình phát triển cộng đồng.
• Đa nền tảng: Hỗ trợ nhiều hệ điều hành như Windows, macOS, Linux.
• Nhẹ: Khởi động nhanh, chiếm ít tài nguyên.
• Hệ sinh thái mở rộng mạnh mẽ: Bằng cách cài đặt các tiện ích mở rộng, bạn có thể tăng cường chức năng của VS Code để đáp ứng các nhu cầu phát triển khác nhau.
• Công cụ gỡ lỗi tích hợp: Hỗ trợ gỡ lỗi cho nhiều ngôn ngữ lập trình, giúp các nhà phát triển nhanh chóng xác định và giải quyết vấn đề.
• Tích hợp Git: Thuận tiện cho các nhà phát triển thực hiện kiểm soát phiên bản.
• Gợi ý thông minh: Cung cấp các chức năng như tự động hoàn thành mã, kiểm tra cú pháp, giúp cải thiện hiệu quả mã hóa.

Các kỹ năng hữu ích của VS Code: Nâng cao hiệu quả phát triển của bạn

1. Nắm vững các phím tắt: VS Code cung cấp nhiều phím tắt, thành thạo các phím tắt này có thể cải thiện đáng kể hiệu quả phát triển. Dưới đây là một số phím tắt thường dùng:

   • Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): Mở bảng lệnh. Đây là một trong những chức năng cốt lõi của VS Code, bạn có thể thực hiện nhiều thao tác khác nhau thông qua bảng lệnh.
   • Ctrl+P (Windows/Linux) / Cmd+P (macOS): Mở nhanh tệp.
   • Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (macOS): Chuyển nhanh đến ký hiệu (hàm, lớp, v.v.).
   • Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (macOS): Tìm kiếm toàn cục.
   • Ctrl+D (Windows/Linux) / Cmd+D (macOS): Chọn mục phù hợp tiếp theo. Bạn có thể chỉnh sửa đồng thời nhiều văn bản giống nhau.
   • Alt+Shift+Down/Up (Windows/Linux) / Option+Shift+Down/Up (macOS): Sao chép dòng hiện tại xuống dòng tiếp theo/dòng trước.
   • Ctrl+/ (Windows/Linux) / Cmd+/ (macOS): Chú thích/Hủy chú thích dòng hiện tại hoặc khối mã được chọn.
   • Alt+Up/Down (Windows/Linux) / Option+Up/Down (macOS): Di chuyển lên/xuống dòng hiện tại hoặc khối mã được chọn.
   • Ctrl+K Ctrl+S: Mở giao diện cài đặt phím tắt, bạn có thể xem và tùy chỉnh các phím tắt.

2. Sử dụng tốt bảng lệnh: Thông qua Ctrl+Shift+P / Cmd+Shift+P để mở bảng lệnh, bạn có thể thực hiện nhiều thao tác khác nhau, ví dụ:

   • Settings: Mở giao diện cài đặt.

   • Extensions: Install Extension: Cài đặt tiện ích mở rộng.

   • Git: Commit: Gửi thay đổi Git.

   • Format Document: Định dạng tài liệu hiện tại.

   • Go to Symbol in Workspace: Chuyển nhanh đến ký hiệu trong không gian làm việc.3. Tùy chỉnh cài đặt: VS Code cho phép người dùng tùy chỉnh nhiều cài đặt khác nhau, bao gồm chủ đề, phông chữ, cách thụt lề, v.v. Bạn có thể mở giao diện cài đặt thông qua File -> Preferences -> Settings hoặc chỉnh sửa trực tiếp tệp settings.json.

   • Chủ đề: Chọn chủ đề bạn thích có thể cải thiện sự thoải mái khi viết code.

   • Phông chữ: Chọn phông chữ phù hợp có thể cải thiện khả năng đọc code. Nên sử dụng phông chữ monospace, ví dụ: Fira Code, JetBrains Mono, v.v.

   • Cách thụt lề: Đặt cách thụt lề theo quy chuẩn của dự án, có thể sử dụng dấu cách hoặc phím Tab.

   • Tự động lưu: Bật chức năng tự động lưu có thể tránh mất code do quên lưu.

3. Sử dụng Code Snippets (Đoạn mã): Code Snippets có thể giúp bạn nhanh chóng chèn các khối code thường dùng. VS Code tích hợp sẵn một số Code Snippets thường dùng, bạn cũng có thể tùy chỉnh Code Snippets.

   • Mở bảng lệnh, nhập Preferences: Configure User Snippets, chọn ngôn ngữ bạn muốn chỉnh sửa, sau đó bạn có thể chỉnh sửa Code Snippets.
   • Ví dụ: bạn có thể tạo một Code Snippet clog cho JavaScript để nhanh chóng chèn console.log():

   "Print to console": {
       "prefix": "clog",
       "body": [
           "console.log('$1');",
           "$2"
       ],
       "description": "Log output to console"
   }
   

4. Sử dụng chỉnh sửa đa con trỏ: Giữ phím Alt (Windows/Linux) / Option (macOS), sau đó nhấp chuột, bạn có thể tạo con trỏ ở nhiều vị trí và chỉnh sửa nhiều dòng code cùng lúc. Bạn cũng có thể sử dụng Ctrl+D / Cmd+D để chọn mục phù hợp tiếp theo và thực hiện chỉnh sửa đa con trỏ.

5. Chia trình soạn thảo: Bạn có thể chia trình soạn thảo thành nhiều cửa sổ để xem và chỉnh sửa nhiều tệp cùng lúc. Bạn có thể sử dụng lệnh View -> Editor Layout -> Split Editor để chia trình soạn thảo.

6. Phát triển từ xa: VS Code cung cấp tiện ích mở rộng Remote Development, cho phép bạn chỉnh sửa code trên máy chủ từ xa cục bộ. Điều này rất hữu ích cho việc phát triển các ứng dụng phía máy chủ.

7. Sử dụng VS Code trong trình duyệt: Như @@Prathkum đã chỉ ra, bằng cách truy cập vscode.dev, bạn có thể sử dụng VS Code trực tiếp trong trình duyệt một cách nhanh chóng và dễ dàng. Điều này rất hữu ích cho việc chỉnh sửa tạm thời hoặc làm việc trên các thiết bị chưa cài đặt VS Code. Công việc của @@CompuIves đã nâng cao điều này hơn nữa, anh ấy đã thành công trong việc chạy VS Code trực tiếp trong trình duyệt và kết nối với API của CodeSandbox.

Các tiện ích mở rộng VS Code được đề xuất: Xây dựng IDE của riêng bạn

Sức mạnh của VS Code nằm ở hệ sinh thái tiện ích mở rộng phong phú của nó. Dưới đây là một số tiện ích mở rộng thường dùng được đề xuất:

• Prettier: Công cụ định dạng code, có thể tự động định dạng code, giữ cho phong cách code nhất quán.

  ext install esbenp.prettier-vscode
  

• ESLint: Công cụ kiểm tra code JavaScript, có thể kiểm tra lỗi và các vấn đề tiềm ẩn trong code.

  ext install dbaeumer.vscode-eslint
  ```*   **EditorConfig for VS Code:** Công cụ để duy trì tính nhất quán về kiểu code giữa các trình soạn thảo khác nhau.
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: Khởi động nhanh một server cục bộ, thuận tiện cho việc gỡ lỗi code frontend. @@ThreatSynop đã đề cập đến một lỗ hổng bảo mật của Live Server, nhắc nhở các nhà phát triển nên chú ý đến tính bảo mật khi sử dụng tiện ích mở rộng này.

  ext install ritwickdey.LiveServer
  

• Code Runner: Hỗ trợ chạy nhiều ngôn ngữ lập trình, thuận tiện cho việc kiểm tra nhanh các đoạn code. Tương tự, @@ThreatSynop cũng chỉ ra một lỗ hổng bảo mật của Code Runner.

  ext install formulahendry.code-runner
  

• GitLens: Tiện ích mở rộng tăng cường chức năng Git, có thể xem lịch sử commit code, thông tin tác giả, v.v.

  ext install eamodio.gitlens
  

• Bracket Pair Colorizer: Tô màu cho các cặp ngoặc, thuận tiện cho việc xem cấu trúc code.

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (Được cung cấp bởi Microsoft) Hỗ trợ hoàn thành code bằng AI, có thể cung cấp các gợi ý code thông minh hơn dựa trên ngữ cảnh.

  ext install visualstudioexptteam.vscodeintellicode
  

• VS Code Copilot: (Được cung cấp bởi GitHub, trả phí) Trợ lý code AI, có thể tạo các đoạn code, hàm, thậm chí toàn bộ file dựa trên code của bạn. @@aadhilkh đã đề cập đến hiệu quả chi phí cao khi sử dụng VS Code Copilot.

• Markdown Preview Enhanced: Plugin xem trước Markdown tốt hơn. @@ThreatSynop cũng chỉ ra rằng plugin này có vấn đề về bảo mật, cần lưu ý.

  ext install shd101wyy.markdown-preview-enhanced
  

• Remote Development 扩展包: Bao gồm các tiện ích mở rộng như SSH, Containers, WSL, v.v., thuận tiện cho việc phát triển từ xa.

Về tích hợp LLM và VS Code

Trên X/Twitter cũng xuất hiện một số cuộc thảo luận về tích hợp LLM và VS Code. @@akshay_pachaar đã chia sẻ phương pháp huấn luyện LLM trong VS Code. @@MacopeninSUTABA đã đề cập đến việc tích hợp AI coding agent "Claude Code" của Anthropic với VS Code. Tất cả những điều này báo hiệu rằng AI sẽ đóng một vai trò ngày càng quan trọng trong quá trình phát triển trong tương lai.

Lời khuyên về an ninh

Như @@ThreatSynop đã đề cập, một số tiện ích mở rộng VS Code có lỗ hổng bảo mật, có thể dẫn đến đánh cắp file và thực thi code từ xa. Vì vậy, khi sử dụng tiện ích mở rộng, hãy chú ý những điểm sau:

• Chọn các tiện ích mở rộng chính thức hoặc có uy tín.
• Cập nhật tiện ích mở rộng thường xuyên.
• Đọc kỹ các giải thích về quyền của tiện ích mở rộng.
• Cài đặt các công cụ kiểm tra code, chẳng hạn như ESLint, có thể giúp bạn phát hiện các vấn đề tiềm ẩn trong code.
• Theo dõi các thông báo bảo mật của VS Code và tiện ích mở rộng, sửa chữa các lỗ hổng kịp thời.## Tóm tắt

VS Code là một trình soạn thảo code mạnh mẽ, sở hữu nhiều kỹ năng hữu ích và hệ sinh thái mở rộng phong phú, có thể giúp các nhà phát triển nâng cao hiệu quả phát triển. Bằng cách nắm vững các phím tắt, tùy chỉnh cài đặt, sử dụng code snippet, cài đặt các extension phù hợp, bạn có thể biến VS Code thành IDE độc quyền của mình. Đồng thời, cũng cần chú ý đến các vấn đề bảo mật, chọn các extension chính thức hoặc có uy tín và cập nhật extension thường xuyên. Hy vọng bài viết này hữu ích cho bạn!