6 tiện ích mở rộng CSS tuyệt vời cho VS Code
Một trong những phần ấn tượng nhất của Visual Studio Code là khả năng tùy biến, đặc biệt là thông qua các phần mở rộng. Với rất nhiều nhà phát triển tạo ra các tiện ích mở rộng, chức năng thực sự là vô tận ! Dưới đây là một số tiện ích mở rộng tốt nhất trong VS Code để viết CSS.
Hãy xem Tìm hiểu Visual Studio Code để tìm hiểu mọi thứ bạn cần biết về trình soạn thảo hấp dẫn nhất trong Phát triển web!
Hỗ trợ HTML CSS
Hỗ trợ HTML CSS (và phần mở rộng tiếp theo được liệt kê) cung cấp intellisense trong các file HTML của bạn dựa trên CSS có trong dự án của bạn hoặc được tham chiếu từ xa. Đây là danh sách đầy đủ các tính năng.
Hoàn thành thuộc tính lớp
Hoàn thành thuộc tính id
Hỗ trợ hoàn thành mã hóa Zen cho các thuộc tính lớp và id
Quét folder không gian làm việc cho các file css và scss
Hỗ trợ các file css từ xa
Một điều thực sự nổi bật về cái này là bạn cũng có thể chỉ định các file CSS từ xa vào bộ nhớ cache . Bạn có thể làm điều này bằng cách thêm cài đặt sau. Ví dụ này tham chiếu đến file CSS Bootstrap 4.
"css.remoteStyleSheets": [ "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" ] Intellisense cho tên lớp CSS
Intellisense cho Tên lớp CSS cung cấp chức năng tương tự như phần mở rộng ở trên. Cái này cũng sẽ tự động kéo các lớp từ CSS được tham chiếu trong các file HTML của bạn. Định nghĩa lớp này cũng sẽ có sẵn thông qua intellisense khi sử dụng Emmet !
Tại bất kỳ thời điểm nào, bạn có thể kích hoạt bộ nhớ cache lại các lớp từ file CSS của bạn bằng cách mở Bảng lệnh.
Trình sửa lỗi tự động
Việc phải thêm tiền tố các thuộc tính CSS nhất định đảm bảo hỗ trợ trình duyệt có thể là một điều cực kỳ phức tạp. Nếu không phải do các quy trình công việc đã được cấu hình với Create React App, Angular CLI, v.v. Tôi sẽ hoàn toàn quên thêm các tiền tố của nhà cung cấp.
Autoprefixer sẽ tự động thêm tiền tố của nhà cung cấp đảm bảo ứng dụng của bạn trông đẹp nhất có thể trong các trình duyệt khác nhau. Nó đơn giản đến điên rồ. Mở Command Palette và gọi “Autoprefixer CSS”.
CSS Peek
Nếu bạn giống tôi, tôi ghét phải chuyển sang file .css của bạn để kiểm tra các thuộc tính được đính kèm với một lớp hoặc id. Với CSS Peek , bạn có thể xem hình ảnh di chuột của CSS từ trong file HTML của bạn .
Tiện ích mở rộng này cũng biến tên và id lớp thành một liên kết siêu đưa bạn trực tiếp đến định nghĩa lớp hoặc id đó trong CSS của bạn!
Prettier - Code Formatter
Không bao giờ phải lo lắng về việc định dạng lại. Cài đặt Prettier một lần và nó sẽ lo phần còn lại!
Prettier - Code Formatter cực kỳ phổ biến để tự động định dạng JavaScript của bạn, nhưng bạn có biết nó cũng tự động định dạng CSS không? Vâng, nó có, và nó thật tuyệt vời!
Đây là trước đây (với định dạng khủng khiếp).
… Và sau đó ( với định dạng ĐẸP )!
Bạn có thể cài đặt tính năng này để chạy khi lưu tự động hoặc thủ công nếu bạn chọn.
Bootstrap 4, Font awesome 4, Font Awesome 5 Đoạn trích miễn phí & Pro
Chắc chắn, không phải mọi dự án đều sử dụng Bootstrap hoặc Font Awesome, nhưng có rất nhiều dự án sử dụng. Đó là lý do tại sao tôi thấy rằng nó đáng để chia sẻ tiện ích mở rộng này cung cấp intellisense cho Bootstrap 4, Font Awesome 4 và Font Awesome 5.
Có rất nhiều lớp trong Bootstrap nên không thể nhớ hết được. Tương tự khi làm việc với Font Awesome. Tôi phải tra cứu cú pháp mỗi khi tôi muốn thêm một biểu tượng, nhưng không phải nữa!
Để kích hoạt các đoạn mã cho Bootstrap, hãy sử dụng “B4”.
và “FA5” cho Font Awesome 5.
Tóm tắt
Đây là một số tiện ích mở rộng CSS tốt nhất cho Visual Studio Code. Nếu bạn nghĩ rằng ta đã bỏ lỡ bất cứ điều gì, hãy comment bên dưới và chia sẻ những yêu thích của bạn!
Các tin liên quan
Màu mã hex CSS với giá trị alpha2020-09-09
Thay đổi con trỏ chuột trong CSS bằng thuộc tính con trỏ
2020-09-08
image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
