Top 28 Extension Visual Studio Code: Tối Ưu Hóa Hiệu Suất
1/3/2024, 6:31:41 PM
Trọn bộ 28 extension gợi ý code trong visual studio code giúp cải thiện hiệu suất làm việc và tiết kiệm thời gian code đáng kể. Cùng tìm hiểu với Fullbootcamp những extension html visual studio code nổi bật trong giới lập trình website nhé!
Top 28 Extension visual studio code
1. Synthwave ’84 Theme
Tên của extension “Synthwave ’84 Theme” được lấy cảm hứng từ làn sóng văn hoá nghệ thuật trong âm nhạc và nghệ thuật đồ họa của những năm 80, với màu neon đặc trưng mang hơi hướng hoài cổ nhưng cũng không kém phần hiện đại.
Để thêm theme này vào Visual Studio Code, bạn chỉ cần truy cập vào phần tiện ích mở rộng (extensions) của VS Code, tìm kiếm Synthwave '84 và nhấn vào nút Install. Nếu muốn kích hoạt hiệu ứng Glow đặc biệt cho chữ, bạn cần thực hiện thêm hai bước:
- Mở Command Palette bằng cách nhấn Command/Ctrl + Shift + P
- Sau đó nhập Enable Neon Dreams > click vào và khởi động lại VS Code để hoàn tất.
2. One Dark Pro Theme
One Dark Pro Theme là một trong những extension hay cho vscode, được sử dụng phổ biến và rất được yêu thích. Với giao diện tối (dark theme) dễ nhìn, giúp bạn đỡ mỏi mắt khi làm việc trong thời gian dài và cũng rất thân thiện với môi trường làm việc ban đêm. Màu sắc và độ tương phản của theme được thiết kế tinh tế, giúp các đoạn mã dễ đọc và tập trung hơn.
Để cài đặt One Dark Pro Theme trên Visual Studio Code, bạn có thể thực hiện theo các bước sau:
- Mở Visual Studio Code.
- Truy cập vào phần tiện ích mở rộng (Extensions) bằng cách nhấn vào biểu tượng hình hộp vuông ở thanh công cụ bên trái.
- Trong thanh tìm kiếm, nhập One Dark Pro.
- Tìm đến extension One Dark Pro Theme trong kết quả tìm kiếm và nhấn nút Install.
- Sau khi cài đặt xong, bạn có thể kích hoạt theme này bằng cách mở Command Palette (sử dụng phím tắt Ctrl+Shift+P hoặc Cmd+Shift+P trên Mac), nhập Color Theme, chọn One Dark Pro từ danh sách các theme có sẵn.
Việc thay đổi theme sẽ giúp không gian làm việc của bạn trở nên thoải mái và cá nhân hóa hơn.
3. Nord Theme
Nord Theme là một tiện ích mở rộng extension html visual studio code, nổi bật với giao diện màu sắc nhẹ nhàng, dễ chịu, theo phong cách Bắc Âu. Màu sắc chủ đạo của theme là các tông màu xanh lạnh và xám, giúp tạo ra một không gian làm việc thoải mái và ít gây mỏi mắt. Nord Theme thích hợp cho những ai thích một giao diện tinh tế, đơn giản nhưng vẫn rất hiện đại và chuyên nghiệp.
Để cài đặt Nord Theme trên Visual Studio Code, bạn có thể làm theo các bước sau:
- Mở Visual Studio Code.
- Truy cập vào phần tiện ích mở rộng (Extensions) bằng cách nhấn vào biểu tượng hình hộp vuông ở thanh công cụ bên trái.
- Trong thanh tìm kiếm, nhập Nord.
- Tìm đến extension Nord Theme trong kết quả tìm kiếm và nhấn nút Install.
- Sau khi cài đặt, bạn có thể áp dụng theme bằng cách mở Command Palette (sử dụng phím tắt Ctrl+Shift+P hoặc Cmd+Shift+P trên Mac), nhập Color Theme, và chọn Nord từ danh sách các theme.
Sử dụng Nord Theme không chỉ giúp cải thiện trải nghiệm người dùng mà còn giúp tăng khả năng tập trung khi lập trình.
4. vscode-icons Extension
vscode-icons được thiết kế để tăng cường trải nghiệm trực quan của người dùng. Extension này cung cấp một bộ sưu tập các icon đa dạng và hấp dẫn cho các loại tệp và thư mục trong trình biên tập.
Nhờ vào những icon với đa dạng màu sắc này, người dùng có thể dễ dàng nhận biết và phân loại các loại tệp khác nhau, từ đó cải thiện hiệu quả làm việc và quản lý dự án.
5. Prettier
Prettier là một trong extension cho visual studio code được sử dụngrất phổ biến, dùng để định dạng tự động cho mã lập trình. Nó giúp chuẩn hóa và làm đẹp mã nguồn bằng cách áp dụng một bộ quy tắc định dạng nhất quán, giúp code trở nên dễ đọc và dễ bảo trì hơn. Prettier hỗ trợ nhiều ngôn ngữ lập trình và markup, bao gồm JavaScript, TypeScript, CSS, HTML và nhiều ngôn ngữ khác.
Bạn có thể định dạng tệp tin một cách thủ công trong Visual Studio Code như sau:
- Mở Command Palette bằng phím tắt "Ctrl + Shift + P" (hoặc "Command + Shift + P" trên Mac).
- Gõ Format > chọn Format Document từ danh sách xuất hiện.
- Click vào Configure khi được hỏi.
- Chọn Prettier – Code Formatter để áp dụng định dạng cho mã.
Ngoài ra, bạn cũng có thể thiết lập tự động định dạng tệp khi lưu:
- Mở cài đặt của VS Code bằng phím tắt Command/Ctrl +
- Trong thanh tìm kiếm, nhập Editor: Format on Save.
- Đánh dấu chọn vào ô Editor: Format on Save để kích hoạt tính năng này.
Sau đấy bạn có thể sử dụng extension này rồi!
6. Live Server
Live Server cung cấp một máy chủ cục bộ nhanh chóng và dễ dàng để xem trước và kiểm tra trang web của bạn trong thời gian thực. Khi bạn thực hiện thay đổi trong mã của mình, Live Server tự động làm mới trang web mở trong trình duyệt, giúp bạn ngay lập tức nhìn thấy các thay đổi.
Việc thiết lập máy chủ cục bộ Local Server trở nên đơn giản hơn rất nhiều, không cần tốn nhiều công sức và thời gian như các phương pháp truyền thống.
Hiện tại, hầu hết các lập trình viên Front-end đều chọn cài đặt tiện ích này. Đối với những người mới bắt đầu học HTML và CSS, việc cài đặt Live Server là một lựa chọn thông minh để thực hành và xem kết quả công việc một cách nhanh chóng và tiện lợi.
7. Auto rename tag
Auto Rename Tag là extension html visual studio code rất hữu ích, đặc biệt dành cho những người phát triển web. Tiện ích này tự động đổi tên cặp thẻ đóng và mở trong HTML và các ngôn ngữ tương tự như XML.
Khi bạn thay đổi tên một thẻ mở, ví dụ từ thẻ mở sang thẻ đóng tương ứng sẽ được tự động cập nhật.
Điểm nổi bật của Auto Rename Tag:
- Tiết kiệm thời gian: Giảm thiểu thời gian bạn cần để cập nhật thủ công cả thẻ mở và đóng khi chỉnh sửa.
- Tránh lỗi: Giảm nguy cơ gặp lỗi do quên cập nhật một trong hai thẻ.
- Hiệu quả trong Code Editing: Tăng tốc độ và hiệu quả khi biên tập mã, đặc biệt trong quá trình xây dựng và bảo trì cấu trúc HTML/XML.
Đây là vs code extensions không thể thiếu cho bất kỳ ai làm việc với HTML hoặc XML, giúp quá trình phát triển web trở nên linh hoạt và chính xác hơn.
8. CSS peek
CSS Peek cho phép bạn đi đến định nghĩa của các lớp, id và các selector khác trong CSS ngay từ tài liệu HTML. Điều này giúp tăng tốc quá trình phát triển bằng cách cho phép bạn nhanh chóng xem và chỉnh sửa CSS mà không cần rời khỏi tài liệu HTML.
Đây là một công cụ quan trọng cho bất kỳ nhà phát triển front-end nào, giúp tối ưu hóa quy trình làm việc và tăng cường hiệu suất khi làm việc với HTML và CSS.
9. CSS flexbox cheatsheet
CSS Flexbox Cheatsheet là extension visual studio code đặc biệt dành cho những nhà phát triển web muốn nắm vững và sử dụng Flexbox trong CSS một cách hiệu quả. Flexbox là một công cụ mạnh mẽ trong CSS giúp quản lý layout, đặc biệt trong việc sắp xếp các phần tử trên trang web theo cách linh hoạt và đáp ứng.
Để sử dụng CSS Flexbox, bạn chỉ cần thực hiện 1 trong 2 cách sau:
- Cách 1: Mở Command Palette bằng phím tắt "Ctrl + Shift + P" (hoặc "Command + Shift + P" trên Mac) và nhập vào lệnh "Open CSS Flexbox Cheatsheet".
- Cách 2: Hoặc khi đang làm việc với thuộc tính display: flex trong mã, bạn có thể click vào thông báo popup "Open CSS Flexbox Cheatsheet" để nhanh chóng mở bảng gợi ý.
Cả hai phương pháp này đều giúp bạn dễ dàng truy cập và ôn lại kiến thức về Flexbox một cách nhanh chóng và tiện lợi.
10. Polacode
Polacode được thiết kế để tạo ra ảnh chụp nhanh đoạn code nhanh chóng và tiện lợi. Extension này cho phép bạn chụp và chia sẻ đoạn mã lập trình của mình dưới dạng hình ảnh đẹp mắt và chuyên nghiệp, rất hữu ích khi bạn muốn chia sẻ mã nguồn trên các nền tảng mạng xã hội hoặc trong các tài liệu.
> > Xem thêm: Khóa học lập trình web Chất Lượng Chỉ 50K
11. HTML SnippetsSnippets
HTML Snippets là một extension gợi ý code trong visual studio code cực kỳ hữu ích, đặc biệt dành cho những người làm việc với HTML. Extension này cung cấp một bộ sưu tập rộng lớn các mẫu mã (snippets) HTML, giúp người dùng nhanh chóng chèn các đoạn mã HTML phổ biến và cần thiết vào tệp tin của mình. Điều này làm tăng hiệu quả công việc và giảm thời gian cần thiết để viết mã từ đầu.
Ví dụ, khi bạn cần chèn một thẻ liên kết (thẻ anchor) vào tài liệu HTML, bạn chỉ việc gõ chữ "a" trong Visual Studio Code. Sau đó, chọn tùy chọn xuất hiện trong hộp popup. HTML Snippets sẽ tự động chèn đoạn mã vào trình biên tập của bạn một cách nhanh chóng và thuận tiện.
12. HTML CSS Class Completion
HTML CSS Class Completion tự động gợi ý các tên lớp CSS khi bạn đang biên tập tài liệu HTML.
Khi bạn nhập một tên lớp trong thẻ HTML, tiện ích sẽ hiển thị một danh sách các lớp CSS đã định nghĩa trong các tệp CSS của dự án. Điều này giúp giảm thiểu lỗi và tăng tốc độ làm việc khi bạn cần gán lớp cho các thành phần HTML.
13. View in Browser
Extension View in Browser cho phép bạn nhanh chóng xem trước tài liệu HTML trong trình duyệt mà không cần rời khỏi môi trường phát triển của Visual Studio Code hoặc nhấn phím tắt CTRL + F1. Bằng cách này, bạn có thể kiểm tra và xem trang web của mình như thế nào trong môi trường thực tế của một trình duyệt web.
14. Debugger for Chrome
Debugger for Chrome giúp kết nối Visual Studio Code với trình duyệt Google Chrome, cho phép bạn sử dụng trình gỡ lỗi (debug) của Visual Studio Code để xem xét và sửa lỗi mã JavaScript ngay trong trình duyệt. Điều này giúp tối ưu hóa quá trình phát triển và gỡ lỗi ứng dụng web.
15. JSHint
JSHint là một công cụ phân tích mã nguồn tĩnh, giúp phát hiện lỗi và vấn đề tiềm ẩn trong mã JavaScript. Tiện ích này cung cấp phản hồi ngay lập tức về các vấn đề như lỗi cú pháp, sử dụng biến không hợp lý, và các vấn đề về coding style.
16. jQuery Code Snippets
jQuery Code Snippets cung cấp một bộ sưu tập lớn các đoạn mã (snippets) cho jQuery, giúp bạn nhanh chóng chèn các cú pháp jQuery phổ biến vào tài liệu của mình mà không cần phải gõ lại từ đầu.
Đoạn mã của jQuery Code Snippets hiện có khoảng 130 đoạn mã có sẵn.
17. Bower
Bower for Visual Studio Code là một extension html visual studio code hữu ích, hỗ trợ việc quản lý các phụ thuộc (dependencies) trong các dự án web thông qua Bower, một công cụ quản lý gói phổ biến. Extension này giúp tối ưu hóa quy trình làm việc bằng cách cung cấp các tính năng để tìm kiếm, cài đặt, quản lý và cập nhật các thư viện và frameworks từ Bower ngay trong môi trường Visual Studio Code.
Để sử dụng các lệnh Bower trong Visual Studio Code, bạn chỉ cần thực hiện các bước sau:
- Mở Command Palette bằng cách nhấn phím F1.
- Gõ "Bower" vào thanh tìm kiếm.
- Khi danh sách các tùy chọn thả xuống hiện ra, chọn mục "Bower".
- Từ đây, bạn có thể lựa chọn và thực hiện các lệnh Bower mong muốn.
18. Git History
Git History cung cấp cho bạn cái nhìn sâu sắc về lịch sử các commit, các nhánh (branches), và các thay đổi trong dự án của bạn. Nó giúp bạn dễ dàng theo dõi và hiểu rõ các thay đổi đã được thực hiện trong quá trình phát triển.
Để sử dụng các lệnh liên quan đến Git History trong Visual Studio Code, bạn có thể thực hiện như sau:
- Mở Command Palette bằng cách nhấn phím F1.
- Nhập "Git" vào thanh tìm kiếm của Command Palette.
- Chọn "Git" từ danh sách các tùy chọn hiện ra.
- Sau đó, chọn lệnh Git mà bạn muốn sử dụng.
Lưu ý: bạn cần mở tệp tin mà bạn muốn xem lịch sử Git trước khi bạn có thể thực hiện các hành động trên nó.
19. JS-CSS-HTML Formatter
JS-CSS-HTML Formatter cung cấp các công cụ để tự động định dạng và làm đẹp mã nguồn JS, CSS và HTML, giúp mã của bạn trở nên sạch đẹp và dễ đọc hơn.
Trong VS Code đã có chức năng Format, sử dụng phím tắt Shift + Alt + F hoặc chuột phải màn hình code > chọn Format Document. Tuy nhiên extension này vẫn còn hạn chế, tùy theo nhu cầu mà bạn quyết định cài thêm hay không nhé!
20. Darcula Theme
Darcula Theme sử dụng giao diện tối (dark theme) lấy cảm hứng từ màu sắc và phong cách của Darcula, một chủ đề phổ biến trong các môi trường phát triển khác nhau. Theme này được thiết kế để giảm mỏi mắt khi làm việc trong thời gian dài, đặc biệt trong môi trường có ánh sáng yếu, và mang lại trải nghiệm người dùng ấn tượng với màu sắc và độ tương phản dễ nhìn.
21. Open-In-Browser
Plugin Open-In-Browser cung cấp một cách đơn giản để mở tệp HTML hiện tại trong trình duyệt chỉ với một cú nhấp chuột hoặc một phím tắt. Bạn có thể mở được nhiều loại tài liệu như PDF, TXT, XML hay các loại hình ảnh định dạng khác nhau.
22. TODO Highlight
Extension TODO Highlight v2 cho Visual Studio Code là plugin đơn giản nhất trong danh sách của chúng tôi. Nó thực hiện đúng như tên gọi, làm nổi bật các ghi chú TODO, FIXME và các chú thích tùy chỉnh khác trong mã của bạn. Extension này hỗ trợ nhiều chủ đề màu sắc khác nhau để giúp bạn dễ dàng điều hướng qua các chú thích của mình.
23. Color Info
Khi làm việc với CSS, SCSS, LESS và các tệp tin có chứa mã màu, Color Info cung cấp thông tin chi tiết về màu sắc chỉ bằng cách đặt con trỏ chuột lên mã màu đó. Thông tin mã màu với các định dạng khác nhau như HSK, HEX, RGB, CMYK.
24. HTML Boilerplate
HTML Boilerplate là một extension hiệu quả cho Visual Studio Code được ưa chuộng bởi nhiều lập trình viên. Nó cung cấp một mẫu template sẵn sàng cho các tệp HTML.
Để sử dụng, bạn chỉ cần mở một tệp mới, gõ "html" và sau đó nhấn phím Tab. Ngay lập tức, HTML Boilerplate sẽ tự động tạo ra một tệp HTML với cấu trúc cơ bản, bao gồm các thành phần quan trọng như thẻ head, meta, title, body, và các thẻ cơ bản khác cần thiết cho một tệp HTML.
25. SVG Viewer
SVG Viewer là một tiện ích mở rộng (extension) phổ biến trong Visual Studio Code, được sử dụng rộng rãi bởi các lập trình viên trên khắp thế giới. Extension này cung cấp khả năng xem trước các tệp SVG trực tiếp trong Visual Studio Code, giúp lập trình viên dễ dàng xem và kiểm tra các file SVG mà không cần phải sử dụng bất kỳ phần mềm mở file đồ họa khác.
SVG Viewer không chỉ cho phép bạn xem trước các file SVG, mà còn cung cấp các tính năng bổ sung như chức năng chuyển đổi file SVG sang PNG và tạo lược đồ dữ liệu URL, rất hữu ích cho người dùng. Nếu bạn gặp khó khăn trong việc chuyển đổi định dạng ảnh hoặc muốn hiểu rõ hơn về dữ liệu URL, plugin này sẽ là sự lựa chọn tuyệt vời.
26. Icon Fonts
Icon Fonts giúp lập trình viên dễ dàng tích hợp các icon fonts vào các dự án đang phát triển. Hiện tại, Icon Fonts bao gồm khoảng 20 bộ font icon khác nhau, bao gồm những bộ font phổ biến như Font Awesome, Ionicons, Glyphicons và Material Design Icons. Điều này chứng tỏ tính ứng dụng cao của extension đối với các lập trình viên, đặc biệt là những người yêu thích sự sáng tạo và muốn làm cho dự án của mình trở nên nổi bật hơn.
27. Faker
Faker giúp tạo ra dữ liệu giả mạo như tên người, địa chỉ, số điện thoại, và nhiều thông tin khác, mà không cần phải viết thủ công. Điều này rất hữu ích trong các tình huống như kiểm thử, phát triển giao diện người dùng, và khi cần mô phỏng dữ liệu để kiểm tra các chức năng của ứng dụng.
28. Quokka
Quokka cung cấp môi trường chạy mã JavaScript ngay lập tức, cho phép bạn xem kết quả thực thi mã một cách nhanh chóng ngay trong trình biên tập của mình. Điều này giúp bạn kiểm tra và gỡ lỗi mã JavaScript một cách hiệu quả hơn.
Trên đây là những extension hay ho mà fullbootcamp.com muốn giới thiện đến bạn. Hy vọng các extension hay cho visual studio code này sẽ giúp bạn làm việc một cách hiệu quả hơn
Khoá học liên quan
Đăng ký get khoá học Udemy - Unica - Gitiho ngay!
Get khoá học giá rẻ ngay trước khi bị fix.