Visual Studio Code là một trình soạn thảo mã hiện đại và mạnh mẽ, được nhiều lập trình viên tin dùng. Nó không chỉ tương thích với mọi hệ điều hành PC hiện nay, mà còn nổi tiếng với khả năng mở rộng linh hoạt nhờ vào hệ thống extension của mình. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng VSCode để lập trình web dễ dàng hơn.
Tổng quan
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, mình sẽ hướng dẫn cài đặt và sử dụng các extension để hỗ trợ lập trình web tốt hơn trên VSCode. Bên cạnh đó, mình cũng sẽ chia sẻ một số cách để gõ code nhanh và gọn gàng hơn. Mục tiêu của chúng ta là:
- Hỗ trợ HTML, CSS, JavaScript: Sử dụng code snippet và IntelliSense để viết code nhanh hơn.
- Live Server: Biến máy tính thành một web server nhanh chóng. Xem kết quả trang web ngay trong trình duyệt hoặc từ các thiết bị khác trong mạng LAN.
- Emmet: Viết code HTML nhanh hơn bằng các cú pháp viết tắt.
Trước khi bắt đầu, bạn cần cài đặt Visual Studio Code trên máy tính. Nếu chưa cài đặt, bạn có thể tìm hiểu cách cài đặt VSCode tại đây.
Visual Studio Code đã hỗ trợ sẵn cho HTML, CSS và JavaScript
Một trong những điểm hấp dẫn của VSCode đối với các lập trình viên web chính là việc hỗ trợ các ngôn ngữ HTML, CSS và JavaScript mặc định mà không cần cài thêm gì. Các tính năng cơ bản bao gồm:
- Workspace: Nơi chứa các project với các thiết lập tương ứng. Bạn có thể tạo các workspace phù hợp với project và ngôn ngữ đang sử dụng.
- Syntax Highlighting: Làm nổi bật cú pháp, giúp bạn dễ dàng phân biệt các thành phần trong mã code.
- Language Intellisense: Gợi ý các từ khóa phù hợp khi bạn gõ code, giúp bạn viết code nhanh hơn.
- Code Formatting: Tự động định dạng code để code của bạn gọn, đẹp và chuẩn hơn.
- Emmet: Cung cấp các cú pháp viết tắt để viết code HTML nhanh hơn.
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 thêm một số quy ước trong xây dựng project.
Phím tắt format code trong VSCode
Thông tin về Workspace và cách tạo Workspace trong VSCode có thể tìm thấy ở đây. Bạn có thể mở Workspace bằng cách chuột phải vào thư mục chứa project và chọn "Open with Code".
Visual Studio Code cung cấp hướng dẫn cụ thể về cấu hình JavaScript trên trang chủ của nó. Bạn có thể tìm hiểu thêm tại đây. Nếu bạn muốn sử dụng JavaScript một cách hiệu quả, hãy xem danh sách các extension hỗ trợ ở đây.
Đừng mở file HTML, hãy làm quen với Workspace
Phần này quan trọng, bạn không nên bỏ qua. Đối với Visual Studio Code, Workspace là nơi chứa các project với các thiết lập tương ứng. Khi lập trình web bằng VSCode, bạn có thể mở file HTML và chỉnh sửa. 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 server ảo để kiểm tra web như trong bài viết sau. Chi tiết về cách tạo Workspace có thể tìm thấy ở đây. Đơn giản chỉ cần nhớ:
Hãy mở folder chứa code bằng VSCode.
Click chuột phải và chọn Open with Code
CSS IntelliSense - Gợi ý code cho CSS
Mặc dù Visual Studio Code đã hỗ trợ nhiều tính năng hữu ích cho việc lập trình web, nhưng nó không hỗ trợ tính năng gợi ý code cho CSS. Điều này làm cho việc làm việc với CSS không tiện lợi. Một file CSS thường chứa rất nhiều class và id, và không ai có thể nhớ hết tên của chúng. Đặc biệt là khi làm việc với CSS Framework lớn như Bootstrap, bạn sẽ phải nhớ hàng tá class mà không có tính năng gợi ý code.
Để giải quyết vấn đề này, bạn có thể sử dụng tiện ích "IntelliSense for CSS class names in HTML". Tiện ích này cung cấp tính năng gợi ý các class name của CSS cho các thuộc tính và thẻ HTML. Nó sẽ đọc các file CSS từ workspace hoặc từ các phần CSS online trên mạng dựa vào phần tử link bạn định nghĩa trong file *.html.
Các tính năng của extension này bao gồm:
- Hỗ trợ tự động hoàn thành code CSS class (cả trong HTML và từ file *.css trong workspace).
- Hỗ trợ cả external CSS được liên kết bằng thuộc tính link trong HTML header.
- Hỗ trợ cú pháp Emmet.
- Hỗ trợ TypeScript React, JavaScript và JavaScript React.
- Hỗ trợ CSS, SASS, SCSS.
- Tính năng cache và re-cache thủ công các class CSS.
Bạn có thể tìm hiểu thêm thông tin và cài đặt extension tại đây.
Live Server - Test 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ừ các thiết bị khác trong mạng LAN. Điểm đặc biệt của ứng dụng này là trang web trên trình duyệt sẽ tự động tải lại khi bạn lưu file *.html.
Một số điều cần biết khi sử dụng Live Server:
- Mở Live Server: Chuột phải vào file HTML và chọn "Open with Live Server".
- Tắt Live Server: Chuột phải vào file HTML và chọn "Stop Live Server".
- Có nhiều cách để tắt và mở Live Server tùy thuộc vào trường hợp và thói quen sử dụng. Tham khảo thêm tại đây.
- Mặc định, Live Server sẽ mở trang web trên trình duyệt mặc định của bạn.
- Để mở trang web trên trình duyệt khác hoặc chế độ ẩn danh, bạn có thể cài đặt theo các bước sau:
- Nhấn
Ctrl+Shift+Pvà nhập "User Setting", chọn "Preferences: Open User Settings". - Chọn "User" > "Extensions" > "Live Server Config" > "Custom Browser".
- Chọn trình duyệt phù hợp.
- Nhấn
- Live Server hoạt động dựa trên Workspace của bạn. Vì vậy, hãy mở Workspace trong VSCode để Live Server hoạt động.
- Live Server cũng hoạt động với PHP, Node.js và ASP.NET, nhưng bạn cần cài đặt thêm extension trên trình duyệt.
Để biết thêm thông tin và cài đặt Live Server, bạn có thể tìm hiểu tại đây. Vì bài viết này có giới hạn về thời lượng, mình sẽ chia sẻ hướng dẫn chi tiết về cách sử dụng Live Server trong một dịp khác.
EMMET.IO - Cú pháp Emmet giúp code HTML siêu nhanh
Emmet (trước đây là Zen Coding) là một plugin cho các trình soạn thảo mã như Sublime Text, Atom, Bracket,... Tuy nhiên, đối với Visual Studio Code, nó được tích hợp sẵn. Emmet là một tập hợp các quy tắc viết tắt giúp việc viết code HTML/CSS trở nên nhanh chóng hơn. Thay vì phải gõ từng thẻ mở và đóng, bạn chỉ cần gõ vài cú pháp viết tắt.
Đối với những bạn mới làm quen với lập trình web, hãy nắm vững và sử dụng thành thạo các phần tử web như Dưới đây là một số cú pháp Emmet cơ bản: Trên đây chỉ là một phần rất nhỏ của các cú pháp Emmet. Những gì Emmet có thể làm còn tuyệt vời hơn. Trong bài viết này, mình chỉ giới thiệu sơ qua. Nếu bạn muốn tìm hiểu thêm về cú pháp Emmet, hãy truy cập trang chủ của nó hoặc tham gia khóa học miễn phí về Emmet trên Udemy. công nghệ lập trình web đã phát triển rất nhanh. Vậy nên chỉ với HTML, CSS và JavaScript là chưa đủ. Một số công nghệ như ReactJS, AngularJS, Electron, Blazor,... được tạo ra để giúp phát triển web nhanh chóng hoặc tạo ra các ứng dụng đa nền tảng một cách dễ dàng. Các website/ứng dụng cơ bản sẽ chạy trên một trình duyệt (Chrome, Firefox hoặc Webview của hệ điều hành). Bạn có thể tải thêm một số extension phù hợp với công nghệ bạn đang làm việc để tối ưu hóa trải nghiệm lập trình trên VSCode. Dưới đây là một số extension hữu ích cho lập trình web chuyên nghiệp: Như vậy, chúng ta đã tìm hiểu cách thiết lập Visual Studio Code để hỗ trợ lập trình web một cách dễ dàng. Nếu bạn có bất kỳ câu hỏi hoặc ý kiến nào về bài viết này, hãy để lại bình luận phía dưới. Đừng quên xem thêm các bài viết khác trên trang web của chúng tôi để nắm bắt thêm nhiều thông tin hữu ích. Xem thêm: Tổng hợp những plugin không thể thiếu cho VSCode, , , , ,... trước khi bắt đầu sử dụng Emmet. Cú pháp Emmet cung cấp nhiều lợi ích, nhưng cũng có thể gây nhầm lẫn cho người mới bắt đầu.
html:5.div, img, ul, li,...div.class1.class2#id.div*3.div.class1.class2#id*3.Các extension khác hỗ trợ lập trình web chuyên nghiệp hơn
Tổng kết
