Hướng dẫn setup môi trường làm việc Visual Studio Code (VsCode)

• I. Điều kiện tiên quyết
• II. Đối tượng đọc
• III. Giới thiệu
• IV. Những plugin cần cài đặt
  • 1. Prettier
  • 2. Docker
  • 3. Auto import
  • 4. Git History
  • 5. Git Lens
  • 6. Path Intellisense
  • 7. Intellicode
  • 8. Auto Rename Tag
  • 9. Auto Close Tag
• V Những plugin có thể cài thêm (optional)
  • 1. ES7+ React/Redux/React-Native snippets
  • 2. Vue Language Features (Volar)
  • 3. Markdown Preview Enhanced
  • 4. Tailwind CSS IntelliSense
  • 5. Code Spell Checker
• IV. Kết luận

I. Điều kiện tiên quyết

• Đã cài đặt Vs Code

II. Đối tượng đọc

• Customer success engineer

III. Giới thiệu

Visual Studio Code (viết tắt là VS Code) là một trình biên tập mã nguồn mở và miễn phí được phát triển bởi Microsoft. Được phát hành lần đầu vào năm 2015, VS Code đã nhanh chóng trở thành một trong những trình biên tập mã phổ biến nhất trên thị trường với nhiều tính năng hữu ích như gợi ý mã, kiểm tra cú pháp và tích hợp git. VS Code cũng hỗ trợ nhiều ngôn ngữ lập trình khác nhau, giúp cho các lập trình viên có thể làm việc hiệu quả hơn.

IV. Những plugin cần cài đặt

1. Prettier

• Prettier là một công cụ giúp tự động định dạng mã nguồn cho dễ đọc hơn và giữ cho định dạng thống nhất giữa các thành viên trong nhóm phát triển. Với Prettier, bạn không cần phải quan tâm đến việc định dạng mã nguồn thủ công nữa mà có thể tập trung vào việc viết mã chất lượng hơn.
• Khi sử dụng Prettier bạn có thể dùng config có sẵn được lưu trong source code hoặc tạo bản config mới và lưu vào source code.

1. Vào trang Prettier Playground để tạo tự động config
2. Copy config
3. Vào thư mục gốc của source code taọ file .prettierrc và paste config vừa copy vào

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install esbenp.prettier-vscode
  3. Nhấn Enter

2. Docker

• Docker extension là một plugin trên VsCode cung cấp bởi Microsoft. Extension này cho phép người dùng quản lý containers, images, network và volumes trên Docker một cách dễ dàng.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install ms-azuretools.vscode-docker
  3. Nhấn Enter

3. Auto import

• Auto Import là một plugin của vscode giúp tự động nhập các module cần thiết vào trong file code. Khi sử dụng, plugin sẽ tự động tìm kiếm các module cần import và thêm chúng vào file. Plugin còn hỗ trợ nhiều tính năng như tự động sắp xếp thứ tự import hoặc gợi ý các module phù hợp để nhập vào file.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install steoates.autoimport
  3. Nhấn Enter

4. Git History

• Git History là một extension của VS Code giúp quản lý và xem lịch sử của Git. Nó cho phép người dùng xem toàn bộ lịch sử của repository, theo dõi các thay đổi qua thời gian và tìm kiếm các commit cụ thể. Người dùng có thể xem chi tiết về các commit, nhánh, đồ thị, cây và các thao tác khác trong lịch sử của repository, cũng như các thông tin khác như tác giả, nhật ký hoặc tệp thay đổi.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install donjayamanne.githistory
  3. Nhấn Enter

5. Git Lens

• GitLens là một extension mạnh mẽ và linh hoạt của VS Code cho phép người dùng quản lý hiệu quả lịch sử của Git. Nó hiển thị thông tin cơ bản của Git, Blame dòng code, theo dõi và hiển thị hoạt động của tệp tin và sử dụng các lệnh Git thông qua bảng điều khiển của VS Code. Tất cả các tính năng này đều được cung cấp thông qua giao diện trực quan đồ hoạ, giúp cho việc quản lý lịch sử của Git trên VS Code dễ dàng hơn.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install eamodio.gitlens
  3. Nhấn Enter

6. Path Intellisense

• Path Intellisense là một extension cho Visual Studio Code giúp đơn giản hóa việc nhập đường dẫn tệp tin trong mã nguồn. Với tính năng này, bạn chỉ cần bắt đầu nhập một phần của đường dẫn và extension sẽ tự động đề xuất các tệp tin và thư mục tương ứng. Đây là một extension hữu ích cho bất kỳ lập trình viên nào làm việc với các dự án có nhiều thư mục và tệp tin.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install christian-kohler.path-intellisense
  3. Nhấn Enter

7. Intellicode

• Intellicode là một extension mã nguồn mỡ cho Visual Studio Code được cung cấp bởi Microsoft sử dụng machine learning để tăng cường khả năng phát triển mã nguồn và hỗ trợ đề xuất mã, tìm kiếm và nhận dạng ngôn ngữ lập trình giúp lập trình viên nhanh chóng và hiệu quả hơn trong công việc của mình.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install VisualStudioExptTeam.vscodeintellicode
  3. Nhấn Enter

8. Auto Rename Tag

• Auto Rename Tag là một extension cho Visual Studio Code giúp tự động đổi tên thẻ HTML trong cả file khi bạn đổi tên một thẻ nào đó, giúp tiết kiệm thời gian và tránh lỗi sai sót không đáng có.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install formulahendry.auto-rename-tag
  3. Nhấn Enter

9. Auto Close Tag

• Auto Close Tag là một extension cho Visual Studio Code giúp tự động đóng thẻ HTML khi bạn gõ dòng mở thẻ, giúp tiết kiệm thời gian và giảm thiểu lỗi sai sót trong quá trình viết code.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install formulahendry.auto-close-tag
  3. Nhấn Enter

V Những plugin có thể cài thêm (optional)

Dưới đây là những extension có thể cài đặt thêm trong quá trình làm những dựa án đặc thù như ReactJS, Renact Native, VueJS,...

1. ES7+ React/Redux/React-Native snippets

• ES7+ React/Redux/React-Native snippets là một extension cho trình soạn thảo mã nguồn, giúp tăng tốc quá trình phát triển ứng dụng sử dụng công nghệ React, Redux và React-Native. Nó cung cấp cho các nhà phát triển các đoạn mã sẵn (snippet) có để sử dụng và giảm thiểu thời gian phát triển. Việc sử dụng extension này cần thiết để giảm thiểu thời gian lập trình và cải thiện hiệu suất phát triển ứng dụng.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install dsznajder.es7-react-js-snippets
  3. Nhấn Enter

2. Vue Language Features (Volar)

• Extension Vue Language Features (Volar) cung cấp cho các nhà phát triển những tính năng hỗ trợ ngôn ngữ Vue để tăng tốc quá trình lập trình. Volar cung cấp các tính năng như: phát hiện lỗi nhanh, cung cấp gợi ý mã, và theo dõi đường dẫn component được sử dụng. Extension này cần thiết để làm tăng các tính năng hữu ích cho lập trình viên, giảm thiểu thời gian lập trình và tăng hiệu quả sản xuất.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install Vue.volar
  3. Nhấn Enter

3. Markdown Preview Enhanced

• Markdown Preview Enhanced là một extension cho VS Code cho phép người dùng xem trước và hiển thị tài liệu Markdown dưới dạng HTML hoặc PDF với nhiều tính năng tiện ích như hỗ trợ định dạng Markdown mở rộng, tạo bảng biểu, đồ thị và sơ đồ, kiểm tra chính tả và đo độ dài của tài liệu. Extension này mang lại cho người dùng sự tiện lợi và dễ dàng trong việc tạo các tài liệu Markdown đẹp mắt và tương tác trong VS Code.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install shd101wyy.markdown-preview-enhanced
  3. Nhấn Enter

4. Tailwind CSS IntelliSense

• Tailwind CSS IntelliSense là một công cụ hỗ trợ cho những người lập trình sử dụng framework Tailwind CSS. Nó giúp đoán và gợi ý lớp CSS khi người lập trình nhập code, giúp viết code nhanh hơn và dễ dàng hơn. Nó giống như một trợ lý có ích, biết chính xác những lớp bạn cần, và nhắc bạn về chúng khi bạn làm việc.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install bradlc.vscode-tailwindcss
  3. Nhấn Enter

5. Code Spell Checker

• Đây là một extension giúp cho lập trình viên có thể kiểm tra chính tả trong code. Nó cũng giúp tìm những lỗi chính tả, tên biến, hàm không đúng chính tả.

• Cách cài đặt:

  1. Mở VsCode
  2. Nhấn tổ hợp phím Ctrl + P và dán đoạn mã này vào ext install streetsidesoftware.code-spell-checker
  3. Nhấn Enter

IV. Kết luận

• Trên đây là những extension hữu ích trong việc lập trình, giúp cho công việc thêm dễ dàng và thuận tiện hơn.
• Nếu có gì thắc mắc vui lòng điền vào form phía dưới.