Sublime Text WordPress Extensions

Thủ thuật WordPress
1

Hôm nay mình xin giới thiệu tới các bạn những extensions hỗ trợ code WordPress trên Sublime Text. Phù hợp với những bạn mới bắt đầu tìm hiểu code vẫn chưa nhớ rõ hết các thành phần của Wordpress.

1. WordPress

Plugin này sẽ tự động tạo các dòng code theo chuẩn cho bạn một cách nhanh chóng, giúp tiết kiệm thời gian tối đa cho việc tra cứu codex.

Hỗ trợ cho Sublime Text 2 và 3

2. WordPress Developer Resources

Nếu bạn thường xuyên phải vào developer.wordpress.org để tìm và tham khảo code thì đây là cách nhanh chóng cho công việc của bạn. Một Sublime Plugin để tìm kiếm trên WordPress (developer.wordpress.org) hoặc WordPress Codex trực tiếp từ code trông Sublime. Dưới đây là cách nó hoạt động –

Nhấn chuột hoặc (CTRL SHIFT P):

  • Chọn WP Dev Resources (right click) or WordPress Developer Resources , và chọn Search Selection sẽ tự động ở trình duyệt và tìm cho bạn.
  • Search From Input .
  • Function Reference .
  • Search Selection (Codex).

Hỗ trợ cho Sublime Text 2 và 3

3. WPSeek. com Word Press Developer Assistant

Tự động sinh cho bạn code các function trong WP với các param để bạn tùy chỉnh.

Hỗ trợ cho Sublime Text 2 và 3

4. WordPressDev

Tự động chuyển đổi chế độ debug trong file config của WP, các bạn có thể thiết lập phím tắt cho trong phần setting.

Hỗ trợ cho Sublime Text 2 và 3

5. PhpTidy

Hỗ trợ cho Sublime Text 2.

6. Search Word Press Codex

Hỗ trợ cho Sublime Text 2.

7. Search Word Press Codex or Query Posts

Hỗ trợ cho Sublime Text 3.

8. Word Press Completions

Hỗ trợ cho Sublime Text 2 và 3.

9. Word Press Generate Salts

Hỗ trợ cho Sublime Text 3.

10. Word Press Readme to Markdown

Hỗ trợ cho Sublime Text 2 và 3.

11. WordPress Customizer

  1. WP Customize Add Pannel
  2. WP Customize Add Section
  3. WP Customize Add Setting
  4. WP Customize Add Control Basic
  5. WP Customize Add Control Image
  6. WP Customize Add Control Upload
  7. WP Customize Add Control Color
  8. WP Customize postMessage JS Basic
  9. WP Customize Register Function

Hỗ trợ cho Sublime Text 2 và 3.

12. CMB snippets

Hỗ trợ cho việc tạo những Custom Meta Boxes một cách nhanh chóng.

Hỗ trợ cho Sublime Text 2 và 3.

13. Genesis

Hỗ trợ cho Genesis theme framework trong việc code theme WP.

  1. add-body-class.sublime-snippet
  2. add-viewport-meta.sublime-snippet
  3. child-theme-setup.sublime-snippet
  4. custom-footer.sublime-snippet
  5. custom-post-content.sublime-snippet
  6. genesis-custom-loop.sublime-snippet

Hỗ trợ cho Sublime Text 2 và 3.

14. Sublpress

Hỗ trợ cho Sublime Text 2.

15. Sublime Text plugin: git

Hỗ trợ cho Sublime Text 2 và 3.

16. DocBlockr

Trợ giúp bạn trọng việc viết các comment trong khi code.

  1. Dockblock completion for single and multiple line
  2. Function documentation with long variables names and parameters
  3. Variable documentation
  4. Comment extension
  5. Comment decoration
  6. Reparsing a DocBlock
  7. Reformatting paragraphs
  8. Adding Extra tags

Hỗ trợ cho Sublime Text 2 và 3.

17. WordPress New Project Config

Hỗ trợ tạo một project WP nhanh tróng.

  1. Fetch and Install the latest WordPress build
  2. Remove readme.html and license.txt
  3. Fetch your favorite starter theme and rename it with your project name
  4. Remove twentyten, twentyeleven and twentytwelve themes
  5. Fetch a list of plugins you want on every projects
  6. Remove Hello Dolly plugin
  7. Fetch H5BP server-configs .htaccess
  8. Prompt you for a table prefix
  9. Configure wp-config.php and change update salt strings
  10. Create a wp-config-local.php file for local database parameters
  11. Exclude wp-config-local.php in .gitignore and Sublime ftp config file
  12. Create a Sublime text 2 project config file (projectName.sublime-project)
  13. Create a database with your project name
  14. Open your newly created WordPress website in your favorite browser
  15. Create a Sublime text 2 sFTP config file sftp-config.json in each folder.

Hỗ trợ cho Sublime Text 2.

18. Sublime Text 2 WordPress Debugging Snippets

Hỗ trợ cho Sublime Text 2.

19. WordPress Snippets

  1. wp_create_plugin
  2. wp_add_menu_page
  3. wp_add_submenu_page
  4. wp_add_menu_with_submenu
  5. wp_add_meta_box

Hỗ trợ cho Sublime Text 3.

20. WordPress Snippets

  1. wp-attachments.sublime-snippet
  2. wp-the_loop.sublime-snippet
  3. wp-the_excerpt.sublime-snippet
  4. wp-the_content.sublime-snippet
  5. wp-the_category.sublime-snippet
  6. wp-query_posts.sublime-snippet
  7. wp-list_authors.sublime-snippet
  8. wp-has_nav_menu.sublime-snippet
  9. wp-get_the_category.sublime-snippet

Hỗ trợ cho Sublime Text 2.

21. WordPress Code Snippets for Sublime Text

Hỗ trợ cho Sublime Text 3.

22. WP Localize

Hỗ trợ WordPress i18n translation.

  • __()
  • _e()
  • esc_html__()
  • esc_html_e()
  • esc_attr__()
  • esc_attr_e()

Không hỗ trợ:

  • _n() Plurals
  • _x() Context

Tổng kết:

  • Bạn có thể chọn cho mình một vài plugin để sử dụng trong số những plugin trên đây là dư sức code WordPress ngon lành rồi .
2
  • 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 Installation - Package Control 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.

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 Emmet - Packages - Package Control

Sử dụng Emmet trong sublimetext hỗ trợ code nhanh chóng

Sử dụng Emmet trong sublimetext hỗ trợ code nhanh chóng

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

Autoprefixer hỗ trợ gợi ý code cho mọi trình duyệt

Autoprefixer hỗ trợ gợi ý code cho mọi trình duyệt

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> và thậm chí cả dấu ngoặc tùy chỉnh.
  • Xem thêm tại đây

Bracket Highlighter tìm chỗ kết thúc của thẻ hoặc dấu đóng tương ứng
Bracket Highlighter tìm chỗ kết thúc của thẻ hoặc dấu đóng tương ứng769×270 36.5 KB

Bracket Highlighter tìm chỗ kết thúc của thẻ hoặc dấu đóng tương ứng

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

ColorHighlighter hiển thị màu sắc qua mã màu trong code

ColorHighlighter hiển thị màu sắc qua mã màu trong code khi trỏ chuột vào

ColorHighlighter hiển thị màu sắc qua mã màu trong code khi trỏ chuột vào

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

Color Picker hỗ trợ chọn màu trên bảng màu

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.

Pakage HTML-CSS-JS Prettify giúp chúng ta fomat lại theo đúng chuẩn

Pakage HTML-CSS-JS Prettify giúp chúng ta fomat lại theo đúng chuẩn

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).
    • …

Plugin Trimmer hỗ trợ xóa các khoảng trắng không cần thiết

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.

DocBlockr hỗ trợ tạo ra comment đúng chuẩn

DocBlockr hỗ trợ tạo ra comment đúng chuẩn

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.

Plugin CodeIntel giúp bạn tìm kiếm nhanh các function, class,.. liên quan

Plugin CodeIntel giúp bạn tìm kiếm nhanh các function, class,… liên quan.

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.

Plugin AutoFileName hỗ trợ lấy đường dẫn file chính xác

Plugin AutoFileName hỗ trợ lấy đường dẫn file chính xác

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 : AdvancedNewFile - Packages - Package Control

Package Advanced New File giúp tạo ra các tập tin mới nhanh chóng

Package Advanced New File giúp tạo ra các tập tin mới nhanh chóng

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: BracketHighlighter - Packages - Package Control

Package SidebarEnhancements hỗ trợ việc quản lý file
Package SidebarEnhancements hỗ trợ việc quản lý file425×720 14.1 KB

Package SidebarEnhancements hỗ trợ việc quản lý file

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 : Git - Packages - Package Control

Package Git hỗ trợ lệnh Git trực tiếp từ bảng lệnh Sublime Text.
Package Git hỗ trợ lệnh Git trực tiếp từ bảng lệnh Sublime Text.785×370 3.5 KB

Package Git hỗ trợ lệnh Git trực tiếp từ bảng lệnh Sublime Text.

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

1

2

3

4

5

6

7 {

// The mid-line characters to align in a multi-line selection, changing

// this to an empty array will disable mid-line alignment

"alignment_chars": [

"=", ":"

]

}

Plugin Alignment giúp bạn canh hàng tạo đẹp mắt khi khai báo nhiều biến

Plugin Alignment giúp bạn canh hàng tạo đẹp mắt khi khai báo nhiều biến