Css tùy chỉnh so với khung
|
Visual Studio code là trình chỉnh sửa mã hiện đại và vô cùng mạnh mẽ, được rất nhiều lập trình viên tin dùng. Ngoài khả năng tương thích với mọi hệ điều hành PC hiện tại. VSCode còn nổi tiếng với khả năng mở rộng cực kỳ linh hoạt nhờ vào hệ thống mở rộng của mình. Trong bài viết này, Hiếu Đá sẽ hướng dẫn thiết lập VSCode để thiết lập web thuận tiện nhất Show
Tổng sốThực ra, Visual Studio Code đã hỗ trợ sẵn một số tính năng đối với HTML, CSS và Javascript. Nhưng trong bài viết này, mình sẽ hướng dẫn cài đặt và sử dụng các tiện ích mở rộng để hỗ trợ lập trình web tốt hơn trên VSCode. Bên cạnh đó, mình cũng sẽ hướng dẫn thêm một số cách hack speed để gõ mã nhanh và gọn gàng hơn. Các mục tiêu hướng đến sẽ là
Yêu cầu cài đặt. Trước khi bắt đầu hướng dẫn, bạn cần cài đặt trình chỉnh sửa Visual Studio Code sẵn có. Xem bài viết hướng dẫn cài đặt VSCode tại đây
MỤC LỤC Visual Studio Code đã hỗ trợ sẵn cho HTML, CSS và JavaScriptMột trong những tính năng của VSCode hấp dẫn các Nhà phát triển web đó là hỗ trợ các ngôn ngữ HTML, CSS và JS mặc định mà không cần phải cài đặt thêm bất cứ thứ gì. Các tính năng cơ bản có thể nói như là. Workspace, Xyntax Highlighting, Language Intellisense, Code Formatting, Emmet,…
Mặc dù Visual Studio Code đã hỗ trợ sẵn cho bộ ba ngôn ngữ trùm trong trình duyệt web. Thế nhưng chúng ta có thể tối ưu hóa cách làm việc bằng cách sử dụng thêm một số tiện ích mở rộng và nắm thêm một số quy ước trong dự án xây dựng Thông tin về Workspace và cách tạo không gian làm việc trong VSCode. Mình hoặc mở không gian làm việc bằng cách chuột phải vào thư mục chứa dự án, sau đó nhấn chọn Mở bằng mã Hướng dẫn cấu hình cụ thể cho JavaScript trên trang chủ của VSCode. JavaScript trong Mã Visual Studio Cho thanh niên nào muốn dùng thử JavaScript. Tiện ích mở rộng JavaScript trong Visual Studio Code Don't open HTML file, please quen với WorkspacePhần quan trọng này, anh em đừng bỏ qua. Đối với Visual Studio Code, workspare 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, anh em vẫn có thể mở tệp HTML và chỉnh sửa. Nhưng sẽ không thể sử dụng các tính năng như gợi ý tệp, css, js; . Chi tiết anh có thể đọc ở bài viết sau. . Còn lại các menu đơn giản cần nhớ
CSS IntelliSense – Mã gợi ý cho CSSCó thể nói, những tính năng sẵn có của Visual Studio Code đã hỗ trợ gần như tận răng cho anh em lập trình web. Thế nhưng CSS lại không hỗ trợ mã gợi ý tính năng. Làm như vậy, khi làm việc với CSS thì không được lợi cho lắm. Một tệp CSS thường có rất nhiều lớp/id. Không ai có thể nhớ hết tên lớp/id trong đó được. Nhất là khi ta làm việc với bộ CSS Framework lớn như Bootstrap thì thôi nhé, không có gợi ý code thì ngồi nhớ lớp đến sang năm luôn đi ạ! Tiện ích “IntelliSense cho tên lớp CSS trong HTML”Tiện ích này cung cấp tính năng gợi ý tên lớp của CSS cho các thuộc tính, thẻ HTML. Tiện ích này sẽ đọc các tệp CSS từ không gian làm việc (cục bộ) hoặc các phần CSS trực tuyến trên mạng dựa trên phần liên kết điện tử bạn định nghĩa trong tệp *. html Các tính năng của tiện ích mở rộng
Live Server – Test trang web nhanh-gọn-lẹMáy chủ trực tiếp là một tiện ích hữu í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 cùng kết nối chung mạng LAN, ví dụ như điện thoại thông minh. Đ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 xuống khi bạn lưu tệp *. html Một số điều cần biết khi sử dụng Live Server
Toàn bộ thông tin và cài đặt Live Server
Do thời lượng bài viết có hạn nên Hiếu Đá chỉ giới thiệu sơ qua tiện ích này. Mình sẽ viết riêng một bài đầy đủ hướng dẫn sử dụng Live Server vào các dịp khác EMMET. IO – Cú pháp Emmet giúp code HTML siêu nhanhEmmet (trước đây là Zen Coding) là một plugin cho các code editor như Sublime Text, Atom, Bracket,… Còn đối với Visual Studio Code, nó được tích hợp sẵn! Emmet là các quy tắc viết tắt giúp việc viết code HTML/CSS trở nên nhanh gọn hơn. Thay vì phải gõ từng Đối chiếu với những người bạn mới làm quen với trình duyệt web. Các bạn nên giữ chặt và sử dụng thành thạo các phần tử web (document, head, body, div, span, a,…) rồi hãy tham khảo cách sử dụng Emmet. Cú pháp Emmet mang lại nhiều lợi ích nhưng cũng dễ gây lú cho người mới làm quen A số cú pháp Emmet cơ bảnQuy tắc chung khi sử dụng Emmet đó là. bạn chỉ cần nhập một đoạn emmet, sau đó nhấn Tab, trình soạn thảo sẽ tự động sinh mã HTML tương ứng. Bạn cũng đừng lo lắng về công việc mà không nhớ cách viết tắt. Visual Studio will gợi ý các cú pháp emmet cho bạn. Điều bạn cần chỉ là sử dụng lâu ngày rồi quen tay thôi. Cú pháp chung để sử dụng Emmet. Emmet_Code + Tab
Trên đây chỉ là một phần rất nhỏ của các pháp emmet. Những điều nó làm được còn hay ho hơn nữa. Trong phạm vi bài viết này mình chỉ giới thiệu đến đây. Nếu bạn thấy hứng thú với cú pháp emmet thì hãy nghiên cứu ở trang chủ Emmet hoặc Key học Emmet miễn phí trên Udemy Các tiện ích mở rộng khác hỗ trợ thiết lập web chuyên nghiệp hơnCông nghệ lập trình web hiện nay đã phát triển rất nhiều. Làm vậy, chỉ với HTML, CSS, Javascript là chưa đủ. Một số công nghệ như ReactJS, AngularJS, Electron, Blazor, v. v… được tạo ra để thúc đẩy nhanh giai đoạn phát triển web hoặc tạo ra các ứng dụng đa nền tảng một cách dễ dàng. Những trang web/ứng dụng được tạo ra về cơ bản sẽ chạy trên trình duyệt (Chrome, Firefox hoặc Webview của hệ thống điều hành). Các bạn có thể tải thêm một số tiện ích mở rộng tương ứng với công nghệ đang hoạt động để hỗ trợ VSCode tốt nhất
Tổng kếtNhư vậy là chúng ta đã thiết lập thành công Visual Studio Code để hỗ trợ thiết lập web. Bạn có thắc mắc hay góp ý gì về bài viết không? |
