Những Plugin sublime text cần thiết cho web Developers

Những Plugin sublime text cần thiết cho web Developers

• Sublime text là một trong những trình biên tập code có sẵn phổ biến nhất hiện nay . Nó được yêu mến bởi nhiều lập trình viên do tốc độ, đơn giản, và môi trường phong phú Plugin.
• Để giúp các bạn nhận được nhiều nhất trợ giúp của Sublime, tôi quyết định làm một danh sách các plugins mà tôi sử dụng và yêu thích. Nếu tôi chưa bao gồm những plugin yêu thích của bạn, hãy chia sẻ với tôi trong phần bình luận 
• Những tính năng trong bài viết này sẽ giúp cho những web developer thao tác nhanh chóng hơn.

Package Control

• Sublime Text là một IDE nhẹ và nhiều tính năng hay. Bạn có thể thêm những tính năng mới thông qua việc cài đặt Plugin hay Package. Những plugin được thêm vào sẽ mở rộng thêm tính năng cho Sublime Text.
• Nếu các bạn chưa cài đặt package control, thì trước tiên chúng ta cần cài đặt package control
• Đây là một plugin quản lý của sublime giúp chúng ta dễ dàng quản lý các package (sửa, xóa,…)
• Hướng dẫn cài đặt package control và sử dụng :
  • Bạn ấn tổ hợp phím Ctrl+`  hoặc vào menu chọn View > Show Console để mở chế độ command, rồi thực hiện như sau :
  • Truy cập vào https://packagecontrol.io/installation và tùy theo phiên bản Sublime text bạn đang dùng mà copy đoạn mã cho phù hợp

   

  • Sau khi copy xong bạn quay lại sublime text và paste đoạn copy vào phần command vửa mở ra và ấn enter
  • Khởi động lại sublime text

JavaScript & NodeJS Snippets

• Plugin JavaScript & NodeJS Snippets giúp cho bạn có thể gõ tắt các lệnh javascript, nodejs phổ biến nhanh hơn nhiều. ví dụ thay vì gõ document.querySelector(‘selector’); khi bạn có thể chỉ cần gõ qs, nhấn tab, và để cho Sublime làm phần còn lại.
• Xem thêm hướng dẫn cài đặt và lệnh gõ tại đây
  

  Plugin JavaScript & NodeJS Snippets giúp cho bạn có thể gõ tắt các lệnh javascript, nodejs nhanh hơn.

 

Emmet

• Giúp cho việc code nhanh hơn. Emmet là cho HTML và CSS hoàn thành code nhanh chóng chỉ với cụm từ gợi ý
• Tuy nhiên việc sử dụng Emmet có đôi chút phức tạp vì bạn phải nhớ các câu lệnh có sẵn, nhưng khi đã làm quen rồi thì Emmet thực sự là một công cụ tuyệt vời. Các bạn có thể xem các lệnh gõ tắt ở đây.
• Link hướng dẫn cài đặt và cách sử dụng https://packagecontrol.io/packages/Emmet

 

AutoPrefixer

• Plugin Autoprefixer rất cần thiết cho các bạn làm front-end cho việc hoàn thành nhanh code css phù hợp cho mọi trình duyệt.
• Xem thêm tại đây

 

Bracket HighLighter

• Plugin Bracket HighLighter giúp cho các bạn có thể dễ nhìn ra phần mở/ đóng của các thẻ nằm ở chỗ nào.
• Package đánh dấu khớp với nhiều loại dấu ngoặc như: [], (), {}, “”, ”, <tag> </ tag> và thậm chí cả dấu ngoặc tùy chỉnh.
• Xem thêm tại đây

 

Color HighLighter

• Package này giúp bạn code css một cách trực quan hơn bằng việc hiển thị luôn màu sắc của mã màu mà bạn đang dùng trong code.
• Xem thêm tại đây

 

Color Picker

• Package này giúp cho chúng ta có thể lựa chọn mã màu trên bảng màu không cần dùng đến photoshop hoặc các công cụ chỉnh sửa ảnh.
• Để mở sử dụng, chúng ta nhấn tổ hợp Ctrl +shift +C (package này được dùng kết hợp với package color heighlighter ở trên thì sẽ hỗ trợ tuyệt vời nhất trong css).
• Xem thêm tại đây

 

HTML-CSS-JS Prettify.

• Không phải coder nào cũng gtox đúng cấu trúc để trình bày codce một cách đẹp mắt nhất vì đôi khi những việc như thế rất mất thời gian. Tuy nhiên nếu như không định dạng đúng chuẩn thì việc đọc và chỉnh sửa cosde cũng vô cùng là khó khăn.
• Pakage HTML-CSS-JS Prettify giúp chúng ta fomat lại theo đúng chuẩn. Nhưng điểm bât lợi của Plugin này chỉ hỗ trợ các code đơn giản và thuần 1 ngôn ngữ là HTML, CSS, Javascript và JSON, muốn fomat lại code cho đúng chuẩn bạn chỉ cần gõ tổ hợp phím Ctrl + shift+ h.
• Xem thêm tại đây.

 

Trimmer

• Đôi khi bạn có thể enter nhiều lần sinh ra các dòng trắng, download các file từ trên server có rất nhiều khoảng xuống dòng hay gõ space nhiều nhần tạo ra nhiều khoảng cách nhưng để lại sửa lại nó thì rất mất thời gian và công sức.
• Plugin Trimmer có tác dụng:
  • Xóa bỏ khoảng trắng ở cuối dòng code.
  • Xóa bỏ khoảng trắng ở đầu dòng code.
  • Xóa bỏ khoảng trắng ở cả đầu và cuối dòng code.
  • Xóa bỏ các dòng trống không có nội dung.
  • Xóa bỏ những khoảng trắng tạo ra do nhấn space nhiều lần thành 1 khoảng trắng (dấu cách).
  • ..

 

DocBlockr

• Package này giúp cho bạn tạo ra các comment đúng chuẩn bạn để khi bạn hoặc người dùng khác xem lại vẫn hiển nội dung code đó của bạn dùng để làm gì.
• Xem thêm tại đây.

 

CodeIntel

• Plugin CodeIntel giúp bạn tìm kiếm nhanh các function, class,.. liên quan đến tài liệu bạn đang viết hoặc thông qua việc nhảy đến vị trí của các nội dung đó.
• CodeIntel có tác dụng:
  • Chuyển đến vị trí các file, hàm (function), lớp (class),… liên quan.
  • Gợi ý các nội dung liên quan (function, class,..) để giúp bạn hoàn thiện code nhanh, chính xác mà không phải nhớ quá chi tiết đến từng ký tự.
  • Có chức năng hiển ra box thông tin mô tả và trạng thái và chức năng làm việc của hàm.
• Xem thêm tại đây.

 

AutoFileName

• Plugin AutoFileName này sẽ hiển thị ra tất cả các file có trong thư mục theo đúng cấu trúc đường để các bạn có thể nhúng đường dẫn của file đơn giản và chính xác hơn.
• Vị trí lấy gốc là vị trí hiện tại của bạn đang chỉnh sửa.
• Xem thêm tại đây.

 

Advanced New File

• Package Advanced New File giúp tạo ra các tập tin mới nhanh chóng thông qua tổ hợp phím Ctrl + alt+ n sau đó viết đường dẫn đến tập tin mới của bạn.
• Advanced New File cũng hỗ trợ bổ sung thêm bất kỳ thư mục trên đường dẫn nếu như không tồn tại (chưa được tạo).
• Xem thêm tại đây : https://packagecontrol.io/packages/AdvancedNewFile

 

SidebarEnhancements

Package SidebarEnhancements hỗ trợ việc quản lý file trong sublimetext mộ cách đầy đủ hơn như open in browser,……

Xem thêm tại đây: https://packagecontrol.io/packages/BracketHighlighter

 

Git

• Package Git  hỗ trợ lệnh Git trực tiếp từ bảng lệnh Sublime Text. Plugin Git hỗ trợ truy cập nhanh đến các lệnh Git, giúp bạn thêm tập tin, commit, hoặc mở Git log, mà không cần phải rời khỏi Sublime.
• Xem thêm tại : https://packagecontrol.io/packages/Git

 

Alignment

• Plugin Alignment giúp bạn canh hàng tạo đẹp mắt khi khai báo nhiều biến. Hoạt động trên nhiều ngôn ngữ như JS, CSS, PHP,….
• Cấu hình tự động hoàn thiện code như sau
  • Windows: Preferences > Package Settings > Alignment > Settings – User
  • Linux: Preferences > Package Settings > Alignment > Settings – User
  • Mac OS X: Sublime Text 2 > Preferences > Package Settings > Alignment > Settings – User
  • Khi có 1 trang trắng hiển thị ra thì chèn đoạn code sau vào trang và lưu lại: Đoạn code hỗ trợ căn hàng tự động cho các dấu “=” và “:” nếu bạn muốn ứng dụng nhiều hơn thì chỉ việc bổ sung thêm ký tự là được

{
    // The mid-line characters to align in a multi-line selection, changing
    // this to an empty array will disable mid-line alignment
    "alignment_chars": [
        "=", ":"
    ]
}

• Xem thêm tại đây: https://packagecontrol.io/packages/Alignment và https://www.granneman.com/webdev/editors/sublime-text/packages/how-to-install-and-use-sublime-alignment

 

Updating…..