Visual Studio Code - trợ thủ đắc lực cho các lập trình viên , là một trình soạn thảo mã nguồn mạnh mẽ và hiện đại. Không chỉ tương thích với mọi hệ điều hành hiện nay, VSCode còn nổi tiếng với khả năng mở rộng linh hoạt thông qua hệ thống extension của mình. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách thiết lập VSCode để lập trình web hiệu quả nhất.
Tổng quan
Thực tế, Visual Studio Code đã hỗ trợ sẵn một số tính năng cho HTML, CSS và JavaScript. Tuy nhiên, trong bài viết này, chúng ta sẽ tìm hiểu cách cài đặt và sử dụng các extension để tăng cường khả năng lập trình web trên VSCode. Đồng thời, mình cũng sẽ chia sẻ một số cách để tăng tốc việc gõ code. Mục tiêu mà chúng ta hướng đến bao gồm:
- Hỗ trợ HTML, CSS, JavaScript: Code snippet, IntelliSense
- Live Server: Biến máy tính thành web server để xem kết quả trang web nhanh chóng trên trình duyệt hoặc các thiết bị trong mạng LAN.
- Emmet: Viết code HTML nhanh chóng và dễ dàng mà không cần quan tâm đến việc đóng mở thẻ, tạo nhiều thẻ một lúc, v.v...
Trước khi bắt đầu, hãy cài đặt Visual Studio Code editor. Bạn có thể tìm hiểu thêm về cách cài đặt VSCode tại đây.
Visual Studio Code đã hỗ trợ sẵn HTML, CSS và JavaScript
Một trong những tính năng hấp dẫn của VSCode đối với các lập trình viên web là việc hỗ trợ các ngôn ngữ HTML, CSS và JavaScript mặc định mà không cần cài đặt thêm bất kỳ thứ gì. Các tính năng cơ bản bao gồm:
- Workspace: Một không gian làm việc linh hoạt cho phép bạn tùy chỉnh các thiết lập đặc biệt cho dự án và ngôn ngữ đang sử dụng. Nó đơn giản chỉ là một thư mục chứa mã nguồn và tài nguyên cho dự án.
- Syntax Highlighting: Làm nổi bật các từ khóa trong mã nguồn để dễ phân biệt các thành phần.
- Language Intellisense: VSCode gợi ý các từ khóa phù hợp khi bạn gõ code, giúp việc viết code nhanh và dễ dàng hơn.
- Code Formatting: Giúp định dạng mã nguồn gọn gàng hơn và tuân thủ chuẩn quy định. Tính năng này hỗ trợ hầu hết các ngôn ngữ hiện nay.
- Emmet: Cung cấp cú pháp viết tắt để viết code HTML nhanh chóng.
Mặc dù Visual Studio Code đã hỗ trợ sẵn cho HTML, CSS và JavaScript, nhưng chúng ta vẫn có thể tối ưu cách làm việc bằng cách sử dụng các extension và nắm bắt thêm một số quy ước trong xây dựng dự án.
Để biết thêm chi tiết về Workspace và cách tạo workspace trong VSCode, bạn có thể tham khảo tại đây. Đối với JavaScript, bạn có thể tìm hiểu cấu hình cụ thể trên trang chủ của VSCode. Nếu bạn muốn khai thác tối đa tiềm năng của JavaScript, có thể xem thêm các extension liên quan trên trang chủ của VSCode.
Đừng mở file HTML, hãy làm quen với Workspace
Phần này rất quan trọng, vì vậy đừng bỏ qua nó. Đối với Visual Studio Code, workspace chính là nơi chứa các dự án với các thiết lập tương ứng. Khi lập trình web bằng VSCode, bạn vẫn có thể mở file HTML và chỉnh sửa như bình thường. Tuy nhiên, bạn sẽ không thể sử dụng các tính năng như gợi ý file, CSS, JavaScript, cũng như tạo máy chủ web ảo để kiểm tra trang web như được giới thiệu trong bài viết này. Vì vậy, hãy nhớ một điều đơn giản: mở thư mục chứa mã nguồn bằng VSCode.
CSS IntelliSense - Gợi ý mã CSS
Mặc dù Visual Studio Code đã hỗ trợ một loạt tính năng hữu ích cho lập trình web, nhưng CSS lại không được hỗ trợ tính năng gợi ý code. Điều này khiến việc làm việc với CSS không được tiện lợi. Với một file CSS thông thường, có rất nhiều class và id. Có thể bạn sẽ không nhớ tất cả các tên class và id trong file đó. Đặc biệt là khi làm việc với các bộ Framework CSS như Bootstrap, việc không có gợi ý code sẽ khiến bạn phải nhớ tên class rất lâu.
Để giải quyết vấn đề này, có một tiện ích hữu ích mang tên "IntelliSense for CSS class names in HTML". Tiện ích này cho phép gợi ý các tên class của CSS cho các thuộc tính, thẻ HTML. Nó sẽ đọc các file CSS từ workspace hoặc các phần CSS online từ mạng dựa vào phần tử link bạn đã định nghĩa trong file HTML. Thông tin và cài đặt extension tại đây.
Live Server - Kiểm tra trang web nhanh chóng
Live Server là một tiện ích giúp biến máy tính của bạn thành một máy chủ web đơn giản. Bạn có thể xem kết quả hoặc kiểm tra trang web của mình ngay trên trình duyệt hoặc từ một thiết bị khác trong cùng mạng LAN. Đặc biệt, trang web trên trình duyệt sẽ tự động tải lại khi bạn lưu file HTML. Chi tiết và cài đặt Live Server tại đây.
Emmet - Viết code HTML nhanh chóng
Emmet là một công cụ giúp viết code HTML và CSS nhanh chóng và dễ dàng hơn. Thay vì phải gõ từng thẻ HTML và các thuộc tính tương ứng, bạn chỉ cần sử dụng cú pháp viết tắt và nhấn Tab để VSCode tự động sinh code HTML tương ứng. Chi tiết và cài đặt Emmet tại đây.
Các extension khác hỗ trợ lập trình web chuyên nghiệp
Với sự phát triển của công nghệ lập trình web , chỉ với HTML, CSS và JavaScript đã không còn đủ. Có nhiều công nghệ khác như ReactJS, AngularJS, Electron, Blazor, v.v... giúp gia tăng hiệu suất phát triển web hoặc tạo ra các ứng dụng class='hover-show-link replace-link-5' ứng dụng span class='hover-show-content'> đa nền tảng một cách dễ dàng. Để tận dụng tối đa tiềm năng của các công nghệ này, bạn có thể cài đặt các extension tương ứng trên VSCode.
Trên đây là một số extension cần thiết để lập trình web trên Visual Studio Code. Tổng hợp danh sách các extension không thể thiếu khác bạn có thể tìm thấy tại đây.
Như vậy, chúng ta đã thiết lập thành công Visual Studio Code để hỗ trợ lập trình web. Nếu bạn có bất kỳ thắc mắc hoặc góp ý nào về bài viết, hãy để lại bình luận phía dưới. Chúng ta sẽ tiếp tục trao đổi và cùng nhau hoàn thiện kỹ năng lập trình web.
Xem thêm:
- Tổng hợp những Plugins không thể thiếu cho Visual Studio Code