Trang chủ>CNTT>Lập trình HTML CSS

Visual studio code extension cần thiết nhất cho lập trình viên

27/05/2022 175 lượt xem

Theme Dracula

  • Theme dễ nhìn code buổi tối cũng không mỏi mắt.

Vscode-icons

  • Các icon này sẽ giúp bạn nhìn vào danh sách thư mục và dễ nhận biết đâu là folder, file nào là file gì v…v

Scss-to-css

  • Biên dịch SCSS qua CSS. 2 file này nằm cùng thư mục là được

Fira Code (github.com/tonsky/FiraCode) Font thuận tiện cho việc viết code.

  • Tải bộ font về, install vào máy
  • Cài xong, bạn vào setting đổi font thành FiraCode, sau đó bật fontLigature lên luôn nha. Bật cái này lên sẽ giúp gom nhóm mấy cái như ==, != thành 1 kí tự, giúp não bộ xử lý nhanh hơn, đọc code cũng nhanh hơn luôn.
Cấu hình Font
Cấu hình font

Live Server

  • Giúp khởi chạy local server một cách nhanh chóng với tính năng tự động tải lại trực tiếp cho các trang web tĩnh và động.
  • Ví dụ khi bạn thay đổi một thông tin trên trang HTML thì nó sẽ tự động cập nhật mà không cần chúng ta phải nhấn reload trên trình duyệt.
  • Nó cũng có nhiều lựa chọn cho việc thiết lập sử dụng như là tùy chỉnh số port, thiết lập trình duyệt mặc định, hỗ trợ SVG, https, proxy..

Prettier – Code formatter

  • Giúp bạn định dạng lại code một cách tự động và tạo ra một phong cách code chung cho team lập trình thông qua quy tắc riêng được quy định bởi extension.
  • Nó cũng hỗ trợ cho đa dạng loại ngôn ngữ như là JavaScript, TypeScript, Flow, JSX, JSON, HTML, Vue, Angular…

Auto Rename Tag + Auto Close Tag

  • Khi code HTML/JSX, mỗi khi tạo thêm tag mới, extension sẽ đóng tag để khỏi quên.
  • Khi đổi tên tag, extension này sẽ đổi tên closing tag cho phù hợp luôn.

Beautify

  • Là một tiện ích giúp bạn có thể định dạng lại cách hiển thị code một cách đẹp mắt hơn. Nó hỗ trợ cho các ngôn ngữ phổ biến hiện nay như là Javascript, JSON, CSS, Sass và HTML.

Rainbow Brackets 

  • Là tiện ích mở rộng giúp làm nổi bật những dấu ngoặc tương ứng trong đoạn mã với nhau bằng cách sử dụng màu sắc. Nó giúp bạn có thể dễ dàng phát hiện những dấu ngoặc còn thiếu hay có cái nhìn trực quan khi có quá nhiều ngoặc lồng vào nhau trong đoạn code.
  • This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colors to use.

CSS Peek

  • Tiện ích mở rộng giúp tìm các id hoặc class của các thẻ HTML trong những file CSS mà chứa những class hay thuộc tính đó.
  • Ngoài ra nó cũng cho phép bạn đi đến các file CSS đó ngay lập tức.

npm Intellisense + Path Intellisense

  • Gợi ý tên npm package, tên file trong thư mục khi mình cần import, giúp giảm lỗi khi import

Bộ đôi ESLint + Prettier(Prettier – Code formatter)

  • Như mình đã giới thiệu về Linter, ESLint sẽ giúp bạn code đúng chuẩn, đúng format, tìm những lỗi linh tinh khi code. (Dùng cho code Js)
  • Prettier sẽ hỗ trợ bạn format code, sửa theo đúng chuẩn từ ESLint. Cài 2 thằng này xong, chỉ cần code đại rồi Ctrl S để save 1 phát là code vừa đẹp vừa chuẩn ngay.

GitLens

  • VSCode đã hỗ trợ pull/push từ Git, nhưng GitLens bá đạo hơn nhiều.
  • Nó giúp bạn biết từng dòng code do ai viết, viết vào lúc nào, nằm trong commit nào.
  • Bạn cũng có thể …. ngược về quá khứ để xem file đã thay đổi như thế nào, rất tiện

TODO Highlight

  • Giúp bạn làm nổi bật các comment quan trọng trong code để những người lập trình sau hay chính bản thân chúng ta có thể nắm được những điều cần lưu ý hay những việc cần phải làm trước khi sử dụng và lập trình code.
  • Ngoài ra nó còn có một số theme được thiết kế đẹp mắt, hỗ trợ trên nhiều ngôn ngữ như javascript, html, css, php…

Code Spell Checker

  • Spelling checker for source code
  • kiểm tra chính tả khi gõ tiếng anh trong VS Code

Bookmark

  • Giúp bạn “bookmark” lại những dòng code hay đụng tới, cần đọc nhiều, sửa nhiều. Không còn phải search code mỗi lần cần tìm nữa.

Faker

  • Extension dành cho Visual Studio Code Faker giúp coder dễ dàng điền các placeholder data. Chỉ sau vài thao tác đơn giản, mọi người có thể tạo random tên, ảnh, số điện thoại,…
  • Thậm chí, bạn còn có thể tạo văn bản “Lorem Ipsum” thần thánh – một tính năng luôn được các coder quan tâm để đẩy nhanh tốc độ, nâng cao hiệu quả công việc một cách triệt để.

CẤU HÌNH ĐỒNG BỘ(SETTING SYNC) TRÊN VISUAL CODE CHẠY TRÊN MÁY KHÁC

  • Sau khi cài đặt các extension chúng ta sẽ đồng bộ lên tài khoản Git hoặc Microsoft để trên VS Code của các máy khác chỉ cần đăng nhập đồng bộ là các cấu hình và extension này sẽ có trê máy đó, k cần phải cài lại