10 Extensions VS Code người mới học HTML&CSS cần phải biết

Điều chính yếu của việc học lập trình đó chính là kiến thức về các ngôn ngữ, các công nghệ mới có trong mảng lập trình đó.

Tuy nhiên sau những khoảng thời gian tìm hiểu về syntax, những khái niệm lập trình nặng đô, những bài thuật toán "nổ não" thì bạn cũng có thể cho phép bản thân mình giải lao một chút với những thứ nhẹ nhàng hơn nhé!

Điều này không chỉ giúp việc học trở nên dễ thở hơn mà nó còn giúp quá trình chinh phục kiến thức của bạn trở nên thú vị hơn rất nhiều!

Như việc tìm hiểu những extension trong VS Code chẳng hạn. Nó không giúp bạn kiếm tiền ngay, nó cũng không phải thứ quan trọng nhất bạn cần học nhưng nó sẽ giúp bạn làm việc nhanh hơn và có cảm hứng hơn khi code.

Những kiến thức nhẹ nhàng sẽ là nguyên liệu giúp bạn giữ lửa trong việc học lập trình của mình.

Trong bài viết này, Nguyên sẽ giới thiệu cho bạn các extension dành cho người mới học HTML & CSS, giúp bạn có cảm hứng code nhiều hơn và code hiệu quả hơn, năng suất hơn nhé!

Nếu bạn muốn xem định dạng video thì click vào link video dưới đây nhé!

Các Extensions giúp bạn có cảm hứng làm việc hơn

Khi bắt đầu học một thứ mới, giai đoạn đầu tiên là giai đoạn khó khăn nhất. Chính vì thế chúng ta cần một chút cảm hứng để bắt đầu.

Cảm hứng đó có thể đến từ cái bàn học, bàn làm việc của bạn hoặc cũng có thể đến từ chính trình code editor mà bạn sử dụng để học và làm việc hằng ngày.

Hãy tuỳ biến nó theo ý thích của mình nhé!

Nguyên giới thiệu đến bạn một vài theme cho VS Code bạn có thể tham khảo xem có cái nào hay hay, vui vui không nha.

Synthwave ’84 Theme

Đây là một theme không phổ biến lắm! Tuy nhiên đây là theme mà Nguyên yêu thích nhất và sử dụng nó hằng ngày.

Cái tên của nó đã nói lên tất cả, "Synthwave" là một làn sóng văn hoá nghệ thuật trong âm nhạc và các artwork ở những thập niên 80s. Nổi bật là màu sắc neon hoài niệm pha lẫn một chút hiện đại.

Để cài đặt theme này bạn chỉ cần vào extension của VS Code và gõ dòng chữ "Synthwave '84" và nhấn nút Install là xong.

Tuy nhiên để bật hiệu ứng Glow cho chữ bạn cần làm thêm 2 bước nữa:

• Mở Command Palette bằng phím tắt "Command/Ctrl + Shift + P"
• Nhập dòng chữ "Enable Neon Dreams" rồi click vào và restart lại VS Code là xong.

One Dark Pro Theme

Nói đến theme cho VS Code thì chúng ta không thể bỏ qua theme One Dark Pro được rồi. Đây là một theme phổ biến nhất với lượt tải cao hơn cả các theme còn lại.

Nếu bạn là một tín đồ của "Dark Mode" thì không thể bỏ qua theme này.

Nord Theme

Nếu đã chán với "Dark Mode" và muốn tươi sáng hơn một tí mà vẫn giữ độ cool ngầu  thì bạn có thể sử dụng theme "Nord" này nhé!

Không quá "Dark" nhưng rất "Cool".

vscode-icons Extension

Khi đã chọn được theme ưng ý rồi tiếp theo chúng ta sẽ tuỳ chỉnh thêm một chút nữa với vscode-icons Extension nhé!

Extension này sẽ giúp cây thư mục của các bạn bớt đơn điệu hơn bằng icon màu sắc của từng file.

Các file trông sinh động và dễ phân biệt hơn đúng không nào?

Prettier

Các đoạn code gọn gàng, format chuẩn thì nhìn đẹp mắt hơn đúng không nào!

Tin vui là bạn không cần tốn thời gian format từng đoạn code nữa. Extension Prettier sẽ giúp bạn làm việc đó

Extension này sẽ giúp các đoạn code của bạn format chuẩn, dễ dọc và nhất quán hơn.

Bạn có thể format file một cách thủ công bằng cách:

1. Mở Command Palette (Command/Ctrl + Shift + P)

2. Nhập "Format" sau đó click vào "Format Document"

3. Tiếp tục click vào “Configure.”

4. Click vào “Prettier – Code Formatter” để format code

Hoặc bạn cũng có thể cấu hình Format file khi lưu bằng cách:

1. Mở setting của VS Code bằng phím tắt "Command/Ctrl + ,"

2. Nhập vào thanh tìm kiếm “Editor: Format on Save.”

3. Tích vào ô “Editor: Format on Save.”

Vậy là bạn đã sử dụng được extension này rồi!

Các Extension giúp bạn làm việc hiệu quả hơn

Live Server

Một extension giúp bạn có ngay một Local Sever với công sức bỏ ra là chỉ một cái nhấp chuột.

Từ khi có tiện ích này bạn không cần mất công sức và thời gian thiết lập Local Server như các phương thức khác nữa.

Bây giờ, bất kể Front-end Dev nào cũng cài đặt Extension này. Nếu bạn mới học về HTML&CSS thì cài đặt ngay đi nhé!

Auto rename tag

Nếu bạn muốn thay đổi tên của một thẻ, bạn chỉ cẩn thay đổi tên của thẻ đóng hoặc thẻ mở. Tiện ích này sẽ tự động thay đổi tên thẻ còn lại cho bạn.

Nó thật sự tiết kiệm rất là nhiều thời gian code cho bạn đấy!

CSS peek

Ban đang trong file HTML và muốn xem nhanh chóng Class của mình được style như thế nào. Tiện ích này sẽ giúp bạn làm điều đó.

Bạn chỉ cần nhấn giữ Command/Ctrl và click chuột vào Class đó. Mọi thuộc tính sẽ hiển thị ngay trước mắt.

CSS flexbox cheatsheet

Việc quên kiến thức là điều khá bình thường khi bạn mới học về Flexbox. Bạn sẽ nhớ được khi bạn làm nhiều, làm quen tay. Còn khi quên thì cứ thoải mái tra lại tài liệu thôi.

Extension này giúp bạn ôn lại những kiến thức về Flexbox ngay trong VS Code.

Bạn có thể mở Command Palette và nhập lệnh "Open CSS Flexbox Cheatsheet" hoặc giữ thuộc tính display: flex và click vào popup Open CSS Flexbox Cheatsheet là có thể mở cheatsheet ôn lại kiến thức về flexbox rồi.

Polacode

Polacode là một extension giúp bạn chụp lại đoạn code của mình một cách nhanh chóng và tiện lợi.

Bạn nào hay viết blog cần chụp minh hoạ các đoạn code của mình thì đây là một extension hữu ích không nên bỏ qua.

Lời kết

Trên đây là những extension hay ho mà Nguyên muốn giới thiện đến bạn. Hy vọng nó sẽ giúp bạn học tập và làm việc một cách hiệu quả hơn, nhiều cảm hứng hơn nhé!