Hướng dẫn vscode css class intellisense - vscode lớp css intellisense
Chào các bạn,
Sau 1 thời gian dài chuyển sang sử dụng VSCode - 1 trong những editor được ưa chuộn nhất bởi các developers hiện nay, chắc mình không cần PR gì thêm cho nó ha . Mình đã sử dụng và tổng hợp được 1 số tips, extensions cần thiết và hữu ích. Chúng hỗ trợ đắc lực cho công việc lập trình của các bạn, năng suất hơn, code nhanh hơn, hào hứng hơn và như kiểu bạn có 1 túi đồ nghề vắt bên hông vậy.VSCode - 1 trong những editor được ưa chuộn nhất bởi các developers hiện nay, chắc mình không cần PR gì thêm cho nó ha Item 1
Item 2
Item 3
Item 4
Item 5
Thì khi sử dụng EMMET, ta chỉ cần nhập dòng lệnh sau trong code và gõ “Tab” là sẽ tự động chuyển đổi sang HTML đầy đủ như trên. khi sử dụng EMMET, ta chỉ cần nhập dòng lệnh sau trong code và gõ “Tab” là sẽ tự động chuyển đổi sang HTML đầy đủ như trên.
#page>div.logo+ul#navigation>li*5>a{Item $}
Hãy sử dụng EMMET ngay, mình cá là các bạn sẽ thấy mình coding like a pro 😎và thú vị hơn nhiều đấy.EMMET cheat-sheet: //docs.emmet.io/cheat-sheet/
EMMET cheat-sheet: //docs.emmet.io/cheat-sheet/
Live server [ VSCode Extension]
Tự động mở 1 server local với tính năng live reload các thay đổi ngay lập tức. Bật live server bằng cách click button "Go Live" :
Trình duyệt sẽ tự động open 1 tab của trình duyệt và truy cập đến server local đó. Các file CSS nhúng vào HTML sẽ được scan các class name.
**Ví dụ: **
Multiple Cursors
Multiple cursors là tính năng cho phép 1 lúc bạn có thể edit nhiều chỗ với nhiều con trỏ khác nhau. Nó thực sự hữu ích lúc bạn đổi tên 1 loạt các elements, hoặc edit nhiều vị trí với cùng 1 nội dung.
Cách 1: Tự động thêm con trỏ tiếp theo với nội dung đang được bôi đen. Bôi đen phần trùng lặp và tổ hợp phím Cmd + D [ window: Ctrl + D]. Tự động thêm con trỏ tiếp theo với nội dung đang được bôi đen. Bôi đen phần trùng lặp và tổ hợp phím Cmd + D [ window: Ctrl + D].
Bạn có thể sử dụng tính năng này bằng cách chuột phải vào tab bạn muốn di chuyển sang cửa sổ mới.
và chọn* split up,down,left,right.*
Và Toogle Sidebar Focus là tính năng ẩn khá thú vị mà mình được biết. Bằng tổ hợp phím CMD [ window: CTRL ] + số thứ tự của Group [ xem hình bên dưới để rõ hơn] :
Ở cửa sổ góc trái bạn có thể thấy Group 1, Group 2, Group 3 tương ứng với các cửa sổ đang mở:
Ví dụ : Con trỏ chuột đang focus ở Group 1, chuyển sang Group 2 files bằng tổ hợp phím CMD + 2. Con trỏ chuột đang focus ở Group 1, chuyển sang Group 2 files bằng tổ hợp phím CMD + 2.
IV. Extensions, tips khác
Cực kì hữu ích cho frontend development .
open in browser [ VSCode Extension]
Tích hợp option mở nhanh một file .html bằng trình duyệt ở menu chuột phải.
AutoPrefixer [ VSCode Extension]
Tự động thêm prefix css
Cách dùng: Nhấn F1 -> chạy lệnh "Autoprefixer CSS" Nhấn F1 -> chạy lệnh "Autoprefixer CSS"
Trên đây là những extensions, tips mình đang sử dụng để tối ưu hoá process làm việc của mình. Nếu các bạn có những extensions hay tips nào khác hữu ích thì comment bên dưới nhé.
Hi vọng những thủ thật này sẽ giúp ích cho các bạn.
Chúc các bạn 1 ngày làm việc năng suất và hiệu quả nhé. 💪🏻
*Nguồn tham khảo : *
//marketplace.visualstudio.com
//medium.freecodecamp.org/here-are-some-super-secret-vs-code-hacks-to-boost-your-productivity-20d30197ac76
//vscodecandothat.com/
//blog.thebaodev.me/code-nhanh-va-hieu-qua-hon-voi-vscode-tips-tricks