Chào bạn, gần đây mình mới chuyển sang code bằng Visual Studio Code sau khoảng thời gian gắn bó với Sublime Text 3 khá lâu.

Mình biết khi các bạn mới chuyển sang dùng Visual Studio Code chắc chắn sẽ cảm thấy lạ và gặp phải một số vấn đề không mong muốn.

Vì vậy hôm nay mình mới viết bài này để giúp anh em làm quen nhanh với Visual Studio Code. Mặc dù có thể chưa hiểu ngay nhưng trước mắt là cứ setup lại được môi trường làm việc, phông chữ, biểu tượng cool ngầu các kiểu cái đã. Rồi sau muốn tìm hiểu gì thì tìm hiểu.

Visual Studio Code nổi trội hơn hẳn các code editor khác

Mình đã nhận ra được sự mạnh mẽ ấy sau khi mình sử dụng nó, đại loạt nó có một số điểm mạnh sau:

  1. Tốc độ rất nhanh và nhẹ.
  2. Tìm kiếm tệp tin siêu nhanh, gần như là tức thì.
  3. Có đầy đủ các tính năng như một số code editor khác.
  4. Có nhiều chủ đề đẹp và hỗ trợ tuỳ biến.
  5. Nhiều tiện ích mở rộng kinh khủng.

Các bạn đọc 5 mục trên là đủ hiểu rồi nhé. Giờ thì vào việc thôi.

Cài chủ đề, biểu tượng và phông chữ

Chủ đề

Mình đang sử dụng chủ đề tên là Noctis. Cụ thể là phiên bản Noctis Obscuro nhé.

Thiết lập Visual Studio Code và Extensions dành cho dân Front End - Ảnh 1

Chủ đề này độ tương phản cực kì tốt, nhìn rất sướng.

Biểu tượng

Biểu tượng mặt định của Visual Studio Code xấu mù nên mình đã cài một bộ biểu tưởng khác tên là Material Icon Theme

Thiết lập Visual Studio Code và Extensions dành cho dân Front End - Ảnh 2

Phông chữ

Mình sử dụng https://github.com/tonsky/FiraCode thay cho phông chữ mặc định

Thiết lập Visual Studio Code và Extensions dành cho dân Front End - Ảnh 3

Đặc biệt nó còn hỗ trợ chữ nối - đang là trend bây giờ.

Vì nó không hỗ trợ tiếng việc nên mình sẽ cài thêm một phông chữ nữa làm feedback đó là phông Roboto Mono.

Extensions

Auto Rename Tag

Thiết lập Visual Studio Code và Extensions dành cho dân Front End - Ảnh 4

Autoprefixer

Thiết lập Visual Studio Code và Extensions dành cho dân Front End - Ảnh 5

Better Align

Thiết lập Visual Studio Code và Extensions dành cho dân Front End - Ảnh 6

Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Giúp bạn xây dựng trang web với Bootstrap nhanh hơn.

Bracket Pair Colorizer 2

Thiết lập Visual Studio Code và Extensions dành cho dân Front End - Ảnh 7

Tiện ích này giúp đánh dấu các ngoặc nhọn và ngoặc vuông để giúp bạn dễ nhận biết code hơn

Code Spell Checker

Tiện ích này giúp chắn chỉnh lại cách viết tiếng Anh cho bạn. Nếu bạn viết một từ tiếng Anh nào đó sai chính tả hoặc không có nghĩa nó sẽ báo liền.

Color Highlight

Tiện ích này sẽ hiển thị một ô vuông màu bên cạnh CSS của bạn để bạn dễ nhận biết màu hơn. Không phải check lại màu mất thời gian nữa.

indent-rainbow

Tiện ích này sẽ bôi những màu khác nhau tại những chỗ mà bạn thụt đầu dòng giúp bạn dễ nhận biết code hơn.

Indenticator

Tiện ích này sẽ làm nổi bật những chỗ bị thụt vào bằng các dấu chấm.

IntelliSense for CSS class names in HTML

Tiện ích này sẽ gợi ý cho bạn tên class, id cho html dựa trên sự xuất hiện của chúng trong dự án của bạn.

JavaScript (ES6) code snippets

Tiện ích này chứa sẵn các cú pháp của JavaScript giúp bạn viết JavaScript nhanh chóng.

Live Server

Tiện ích deploy code của chúng ta lên local một cách nhanh chóng và thời gian thực.

Markdown All in One

Tiện ích này giúp nhắc cú pháp Markdown và biên dịch Markdown sang HTML thời gian thực cho chúng ta xem luôn.

Path Autocomplete

Tiện ích này giúp tự động gợi ý và show ra các file có trong thư mục mà chúng ta định chèn.

Prettier - Code formatter

Tiện ích mở rộng này giúp làm đẹp các file code như HTML, CSS, JS…

TODO Highlight

Với tiện ích mở rộng này chúng ta có thể làm nổi bật một chú thích gì đó bắt đầu bằng TODO, FIXME để sử dụng.

Visual Studio IntelliCode

Tiện ích mở rộng này do Microsoft sản xuất sử dụng công nghệ AI để giúp chúng ta đẹp tên hàm, tên method khoa học hơn.

Một số thiết lập cơ bản

Thiết lập Visual Studio Code và Extensions dành cho dân Front End - Ảnh 8

Tổng kết

Từng đấy Extensions trên kia chắc cũng kha khá rồi ấy nhỉ. Đủ để dùng rồi, tuỳ mỗi bạn mà lựa chọn cài hết hoặc một trong số chúng.

Chúc thành công và hẹn gặp lại.

Từ khóa: Front End , Extensions , Visual Studio Code

Bình luận