12+ Plugin Sublime Text cần thiết cho Web Developers

2-js-snippets.gif

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. 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.

Các Plugin Sublime Text cần thiết cho Web Developers

1. JavaScript & NodeJS Snippets

  • Các đoạn viết tắt biểu thức JavaScript phổ biến nhanh hơn nhiều. Tại sao viết 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.

2-js-snippets.gif

2. Emmet

3-emmet.gif

  • Giống như các plugin trước đó giúp bạn viết code nhanh hơn. Sự khác biệt ở đây là thay vì expresions JS, Emmet là cho HTML và CSS, cho phép bạn viết thẻ dài, các yếu tố lồng nhau …
  • Emmet có một chút phức tạp, vì vậy nếu muốn có một sự thay thế đơn giản, bạn có thể thử một plugin tương tự gọi là HTML Snippets. Nó có tính năng ít hơn, nhưng là cách dễ dàng hơn để sử dụng, và có tài liệu hướng dẫn sử dụng đơn giản, tuyệt vời.
  • Link hướng dẫn cài đặt và cách sử dụng https://packagecontrol.io/packages/Emmet

3. Advanced New File

  • Gói tuyệt vời này có thể tạo ra các tập tin mới với tốc độ nhanh. Thay vì duyệt qua các thư mục, và sử dụng các menu, bạn chỉ cần mở một dấu nhắc với ctrl + alt + n và viết đường dẫn đến tập tin mới của bạn.
  • Các plugin cũng sẽ bổ sung thêm bất kỳ thư mục không tồn tại từ đường dẫn, và thậm chí còn hỗ trợ tự động hoàn tất các tên thư mục.

5-new-file.gif

4. Git

4-git-.png

  • Một tích hợp Git hoạt động trực tiếp từ bảng lệnh Sublime Text. Phần mềm cung cấp 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 bao giờ rời khỏi Sublime.
  • Link hướng dẫn cài đặt và sử dụng : https://packagecontrol.io/packages/Git

5. GitGutter

  • Tiện ích hữu ích đánh dấu mỗi dòng trong mã nguồn của bạn, cho bạn biết trạng thái Git của nó và cung cấp cho bạn một cái nhìn tổng quan về những thay đổi đã xảy ra.
  • GitGutter có thể được sử dụng để so sánh các tệp của bạn với git HEAD, origin, nhánh mà bạn chọn hoặc thậm chí một số commit.
  • Link hướng dẫn cài đặt và sử dụng https://packagecontrol.io/packages/GitGutter

6. Side Bar Enhancements

  • Trong dự án Sublime Text mà bạn đang làm việc được khái quát trong bảng điều khiển bên trái. Mặc dù nó cung cấp cho bạn một số tùy chọn để làm việc với các tệp của bạn, các hành động mặc định sẵn có khá hạn chế. Plugin này thay đổi bằng cách thêm 20 tùy chọn vào nhấp chuột phải, bao gồm Mở trình duyệt, nhân bản (duplicate) và rất nhiều nội dung hữu ích khác.

7. ColorPicker

  • Bộ chọn màu hữu ích, rất đơn giản và tuyệt vời để nhanh chóng lấy các giá trị hex màu. Plugin này sẽ mở ra trong một cửa sổ riêng biệt và cho phép bạn chọn một màu từ một bảng màu hoặc sử dụng một ống nhỏ để tìm màu sắc từ bất cứ nơi nào trên màn hình của bạn.

8. Placeholders

  • Sublime Text 3 có bộ tạo sẵn Lorem Ipsum mà bạn có thể sử dụng để tạo văn bản giả. Plugin Placeholders mở rộng chức năng đó và cho phép Sublime Text tạo ra một cách nhanh chóng cho hình ảnh*(image), form, list và table của placeholder.
  • Link hướng dẫn sử dụng và cài đặt: https://packagecontrol.io/packages/Placeholders

9. DocBlockr

  • Đây là một phần mở rộng cho những ai muốn thêm comment chi tiết vào các định nghĩa chức năng. DocBlockr cho phép bạn tạo các mô tả cho các chức năng của bạn một cách dễ dàng bao gồm các thông số họ thực hiện, giá trị trả về và các loại biến.
  • Link hướng dẫn sử dụng và cài đặt: https://packagecontrol.io/packages/DocBlockr

10. Color Highlighter

  • Một tính năng mà bạn có thể thấy trong nhiều IDE khác và các trình biên tập văn bản, nhưng lại thiếu trong Sublime, là xem trước màu. Sử dụng Color Highlighter bạn có thể bật nó trong Sublime Text, cho phép bạn xem tất cả các giá trị hex và RGBA được dịch sang màu như thế nào, trực tiếp trong style sheet (css) của bạn

11. Language Packs

  • Sublime Text có tích hợp cho hơn 50 ngôn ngữ nhưng có một số framework hoặc các ngôn ngữ web dev thích hợp chưa được hỗ trợ. Nhờ vào tính chất plugin của trình biên tập, cộng đồng có thể tạo và sử dungk các gói cho bất kỳ ngôn ngữ lập trình nào. Chẳng hạn như:

kết luận

Như vậy mình đã giới thiệu qua về một số plugins Sublime Text và hướng dẫn cài đặt plugin đến các bạn. Với nhiều ưu điểm trong việc hỗ trợ các lập trình viên, ở bài sau mình sẽ tiếp tục giới thiệu về các plugins mà mình sử dụng. Các bạn cũng có thể chia sẻ thêm về plugin mà các bạn sử dụng qua phần bình luận nhé, rất mong được nhiều đóng góp của các bạn

Hướng dẫn cài đặt và sử dụng Sublime Text 3 cơ bản

Sublime Text 3 là một text editor khá mới, tuy miễn phí mà mạnh mẽ, hỗ trợ rất nhiều tính năng thú vị. Các điểm mạnh của Sublime Text có thể kể đến như:

  • Miễn phí (thực ra là bản unregistered, thỉnh thoảng hiện sẽ ra pop-up thông báo bạn đang dùng thử và nhắc bạn mua bản chính thức nhưng bạn có thể bỏ qua và tiếp tục sử dụng)
  • Nhẹ, khởi động nhanh, tốn ít tài nguyên
  • Nhiều tính năng hữu ích như chỉnh sửa tại nhiều vị trí một lúc, soạn thảo toàn màn hình, soạn thảo với layout nhiều cột…
  • Hỗ trợ nhiều plugin mạnh mẽ bởi cộng đồng developer đông đảo
  • Giao diện đơn giản, tinh tế, có sẵn và hỗ trợ cài đặt nhiều theme

Bài viết này sẽ hướng dẫn bạn cài đặt và tùy chỉnh Sublime Text 3 trên Ubuntu 12.04, cùng với đó cũng giới thiệu một số thủ thuật giúp sử dụng Sublime Text 3 với hiệu suất cao nhất.

1. Cài đặt

1.1 Cài đặt Sublime Text 3

Quá trình cài đặt Sublime Text 3 trên Ubuntu 12.04 khá đơn giản, đầu tiên bạn truy cập vào địa chỉ http://www.sublimetext.com/3 và tải về file cài đặt (.deb) phù hợp với phiên bản hệ điều hành của mình (Ubuntu 32bit hoặc Ubuntu 64bit). Sau đó bạn click đúp vào file .deb vừa tải về để mở với Ubuntu Software Center, click Install để cài đặt. Sau khi quá trình cài đặt hoàn thành, Sublime Text 3 đã sẵn sàng cho bạn sử dụng.

Bạn cũng có thể cài đặt Sublime Text 3 thông qua chế độ dòng lệnh bằng cách mở Terminal và chạy lần lượt 3 lệnh sau:

sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer

1.2 Cài đặt Package Control

Package Control là một plugin hữu ích của Sublime Text cho phép bạn cài đặt và quản lý các package như các bộ gõ, theme…. Cách đơn giản nhất để cài đặt Package Control là thông qua giao diện dòng lệnh của Sublime Text. Bạn vào View > Show Console hoặc ấn tổ hợp phím Ctrl + `, sau đó copy paste đoạn code sau vào giao diện dòng lệnh và ấn Enter để tiến hành cài đặt.

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

sublime1.png

Đoạn code trên có thể thay đổi tùy theo phiên bản nên để chắc chắn bạn hãy truy cập vào https://sublime.wbond.net/installation#st3 để lấy đoạn code mới nhất.

1.3 Cài đặt bộ gõ tiếng Việt và tiếng Nhật

Mặc định Sublime Text không hỗ trợ soạn thảo bằng bất kì ngôn ngữ nào khác tiếng Anh, vì thế để có thể soạn thảo được bằng tiếng Việt hay tiếng Nhật bạn phải cài các package tương ứng.

1.3.1 Cài đặt bộ gõ tiếng Việt

Để gõ được tiếng Việt bạn phải cài đặt package Vn Ime. Bạn vào Preferences > Package Control > Install Package, gõ vào Vn Ime để tìm kiếm, sau đó ấn Enter là quá trình cài đặt sẽ được tiến hành. Sau khi cài đặt bạn ấn F2 để bật/tắt chế độ gõ tiếng Việt, ở dưới thanh status sẽ thông báo VN IME: ON hoặc VN IME: OFF để bạn tiện theo dõi.

sublime2.png

1.3.2 Cài đặt bộ gõ tiếng Nhật

Quá trình cài đặt bộ gõ tiếng Nhật hơi phức tạp hơn một chút. Đầu tiên bạn cần phải cài đặt mozc và emacs-mozc bằng chế dộ dòng lệnh của Linux:

sudo apt-get install ibus-mozc emacs-mozc

Quay trở lại Sublime Text, bạn vào Preferences > Package Control > Add Repository, nhập vào địa chỉ https://github.com/yasuyuky/SublimeMozcInput để thêm repository tương ứng. Tiếp đó bạn tìm và cài đặt package SublimeMozcInput tương tự như khi cài đặt Vn Ime. Để bật/tắt chế độ gõ tiếng Nhật bạn ấn tổ hợp phím Ctrl + \, nếu bạn có thể gõ được tiếng Nhật thì quá trình cài đặt đã hoàn tất.

sublime3.png

2. Tính năng và thủ thuật

Sublime hỗ trợ rất nhiều tính năng hữu ích và thú vị, phần tiếp theo của bài viết này sẽ giới thiệu với bạn một số ví dụ điển hình nhất.

Command Palette Ctrl + Shift + P

Command Palette cho phép bạn nhanh chóng truy cập các tùy chỉnh của Sublime Text, gọi các lệnh của Package Control, thay đổi syntax của code… chỉ bằng cách thao tác trên bàn phím. Ví dụ bạn có thể cài package mới thông qua Command Palette bằng cách ấn Ctrl + Shift + P rồi gõ vào install package.

sublime4.png

Goto Anything Ctrl + P

Là một tính năng vô cùng hữu ích, với Goto Anything bạn có thể mở nhanh chóng một file, chuyển đến một dòng hay một method trong file đó. Bạn ấn Ctrl + P và sau đó

  • Gõ một phần của tên file để tìm kiếm và mở file đó
  • Gõ @ và tên method để chuyển đến method đó
  • Gõ : và số dòng để chuyển đến dòng tương ứng
  • Gõ # để tìm kiếm một từ trong file

Các shortcut trên có thể kết hợp với nhau, chẳng hạn để chuyển đến dòng số 10 của file user.rb bạn có thể ấn Ctrl + P rồi gõ vào user:10.

Multiple Selections Ctrl + Click Ctrl + D

Sublime Text cho phép bạn lựa chọn và sửa nhiều đoạn code cùng một lúc bằng cách giữ Ctrl và click chuột trái vào nhiều vị trí, khi đó con trỏ sẽ xuất hiện ở nhiều nơi khác nhau, điều này rất hữu ích khi bạn muốn thay đổi tên biến, tên method xuất hiện nhiều lần trong một file. Ngoài ra khi bạn bôi đen một đoạn text, ấn Ctrl + D sẽ giúp bạn bôi đen những vị trí tiếp theo mà đoạn text đó xuất hiện.

Distraction Free Mode Shift + F11

Nhằm giúp bạn tập trung và tối ưu hóa việc code, Sublime Text cung cấp cho bạn chế độ soạn thảo toàn màn hình. Ấn Shift + F11 và khi này tất cả những gì bạn nhìn thấy chỉ còn là những dòng code, bạn không còn cần phải quan tâm đến menu bar, side bar, status bar hay kể cả launcher dock của Ubuntu.

Split Editing

Bạn có thể tận dụng thế mạnh của chiếc màn hình widescreen của mình bằng cách soạn thảo với hai cửa sổ song song. Để làm điều này bạn vào View > Layout > Columns:2 hoặc dùng shortcut Shift + Alt + 2. Bạn cũng có thể soạn thảo với hai cửa sổ đặt trên dưới bằng cách ấn Shift + Alt + 8. Để quay lại chế độ một cửa sổ bình thường bạn chỉ cần ấn Shift + Alt + 1.

sublime5.png

Các hotkey hữu ích khác

  • Ctrl+ K + B: ẩn/hiện side bar
  • Ctrl + /: comment
  • Ctrl + Shift + /: comment dạng block
  • Ctrl + K + U: chuyển text sang dạng uppercase
  • Ctrl + K + L: chuyển text sang dạng lowercase
  • Ctrl + L: select 1 dòng
  • Ctrl + Shift + K: xóa 1 dòng
  • Ctrl + ]: indent
  • Ctrl + [: bỏ indent
  • Ctrl + Shift + D: nhân đôi dòng
  • Ctrl + J: nối dòng với dòng tiếp theo
  • Ctrl + Shift + [: đóng 1 đoạn code
  • Ctrl + Shift + ]: mở 1 đoạn code
  • Ctrl + F: tìm kiếm
  • Ctrl + H: tìm kiếm và thay thế
  • Ctrl + Shift + N: mở cửa sổ mới
  • Ctrl + N: mở tab mới
  • Alt + <number>: chuyển tab (ví dụ Alt + 3)

Các Phím tắt cho Sublime Text (Windows)

Phím tắt chỉnh sửa trên Sublime Text 3

  • Ctrl + X: Cắt dòng.
  • Ctrl + Shift + Enter: Thêm dòng phía trên con trỏ.
  • Ctrl + Enter: Thêm dòng phía dưới con trỏ.
  • Ctrl + Shift + ↑: Đưa dòng hiện tại lên trên 1 dòng.
  • Ctrl + Shift + ↓: Đưa dòng hiện tại xuống dưới 1 dòng.
  • Ctrl + L: Bôi đen cả dòng và đưa con trỏ xuống dòng tiếp theo.
  • Ctrl + D: Bôi đen từ đang được trỏ.
  • Ctrl + M: Đưa trỏ đến dấu đóng ngoặc gần nhất (ví dụ trong câu lệnh if-else).
  • Ctrl + Shift + M: Bôi đen toàn bộ nội dung trong cặp dấu ngoặc.
  • Ctrl + K: Xóa hết đến cuối dòng bắt đầu từ vị trí con trỏ.
  • Ctrl + K + Backspace: Xóa hết đến đầu dòng bắt đầu từ vị trí con trỏ.
  • Ctrl + ]: Tab dòng hiện tại vào trong 1 tab.
  • Ctrl+ [: Lùi dòng hiện tại ra ngoài 1 tab.
  • Ctrl + Shift + D: Nhân đôi dòng hiện tại hoặc khối lệnh được bôi đen.
  • Ctrl + J: Nối dòng phía dưới xuống cuối dòng hiện tại của con trỏ.
  • Ctrl + /: Comment 1 dòng lệnh kiểu //.
  • Ctrl + Shift + /: Comment 1 khối dòng lệnh kiểu /**/.
  • Ctrl + Y: Lấy lại những thao tác vừa bị Undo.
  • Ctrl + Shift + V: Dán và đưa con trỏ xuống cuối dòng.
  • Ctrl + Space: Bật gợi ý.
  • Ctrl + U: Undo lặp lại những thao tác trước đó.
  • Ctrl + K,U: Chuyển chữ ở con trỏ/bôi đen thành chữ hoa.
  • Ctrl + K,L: Chuyển chữ ở con trỏ/bôi đen thành chữ thường.
  • Shift+Ctrl+K: Xóa dòng.
  • Ctrl+Backspace: Xóa ký tự đằng trước.
  • Ctrl+Del: Xóa ký tự đằng sau.
  • Alt+Ctrl+Down: Thêm dòng dưới con trỏ.
  • Ctrl+K, Ctrl+D: Bỏ qua lựa chọn.
  • Shift+L: Chia vùng chọn thành các dòng.
  • Alt+F3: Thêm con trỏ ở tất cả các vị trí có 1 từ.
  • Alt+Ctrl+UP :Thêm dòng mới ở trên vị trí con trỏ.

Phím tắt điều hướng

  • Ctrl + P: Mở nhanh file bằng cách gõ tên.
  • Ctrl + R: Đi đến vị trí ký tự được gõ.
  • Ctrl + ;: Đi đến vị trí ký tự được gõ ở trong file hiện tại.
  • Ctrl + G: Đi đến số dòng được gõ.

Phím tắt hệ thống chung

  • Ctrl + Shift + P: Mở command line.
  • Ctrl + K/B: Đóng mở hiển thị danh sách file (ở bên trái màn hình).
  • Ctrl + Shift + Alt + P: Hiện phạm vi trong thanh trạng thái.
  • Alt + Shift + 2: Mở thêm 1 view (Chia đôi màn hình hiện tại).
  • Alt + Shift + 1: Trở về 1 view như mặc định.
  • Alt + Shift + 5: Chia thành 4 màn hình view.
  • Ctrl + 2: Nhảy đến màn hình số 2.
  • Ctrl + Shift + 2: Chuyển file hiện tại đến màn hình số 2.

Đánh dấu và thu gọn code

  • Ctrl+K, Ctrl+G: Xóa nhãn.
  • Ctrl+K,X: Di chuyển vị trí nhãn.
  • Ctrl+K, A: Chọn nhãn.
  • Ctrl+K+[SPACE] : Đặt nhãn.
  • Ctrl+K,J : Mở tất cả.
  • Shift+Ctrl+]: Mở code.
  • Shift+Ctrl+[: Đóng code.

Như vậy bài viết này đã giới thiệu bạn tới Sublime Text 3 và giúp bạn sử dụng nó một cách hiệu quả trong công việc. Hi vọng bạn thấy nó có ích và một ngày nào đó bạn có thể chuyển sang dùng Sublime Text thay cho những IDE, editor quen thuộc như Eclipse, NetBeans, Emacs hay Vi.