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

Sublime Text 3 hiện đang là một công cụ (tools) đình đám được các developer ưa dùng. Có thể bạn chưa biết hoặc đã biết, trong bài này mình sẽ hướng đẫn các bạn cài đặt và sử dụng Sublime Text 3.

Trước hết chúng ta cùng điểm qua một số điểm mạnh của Sublime Text 3:

• Chạy quá nhẹ nhàng so với một full IDE mà vẫn thường được dùng trước kia như Eclipse, IntelljIDEA, VS, Dremware … Bây giờ tôi mở cả chục projects, với hàng trăm hàng nghìn files không phải lăn tăn như trước nữa.
• Do đang ở bản Beta, nên nó miễn phí, tuy nhiên bạn cứ yên tâm là chạy rất ổn định, hầu như không thấy bị crashed bao giờ cả và đa nền tảng: Mac OSX, Linux, Windows đều có, nên bạn không cần thiết phải đổi môi trường dev ưa thích của mình
• Các extensions nhiều, phong phú, tiện lợi, cài đặt dễ dàng, và cũng hầu hết miễn phí
• Open file nhanh bằng suggestion theo text mình gõ. Bạn không cần nhớ file nó nằm ở đâu, gõ tên, ST3 sẽ gợi ý file bạn muốn mở.
• Chế độ tìm kiếm, replace, highlight rất dễ sử dụng
• Chế độ Intelligent Suggestion hoạt động smooth, phù hợp nhu cầu sử dụng (tất nhiên không bằng tool chuyên dụng nhưng quá đủ để xài)
• Có nhiều themes cả về text và giao diện tools, tha hồ chọn và tuỳ chỉnh theo cách bạn cho là chuyên nghiệp nhất
• Sử dụng thêm phím Ctrl, bạn có thể edit cùng lúc nhiều chỗ khác nhau.
• Tích hợp sẵn terminal vào nó luôn
• Có nhiều extensions giúp bạn phát triển nhanh các PHP project dựa trên các OpenSource framework như Laravel, CakePHP,…

Bây giờ chúng ta vào vấn đề  nhé.
1. Download Sublime Text 3

Truy cập vào: http://www.sublimetext.com/3 để tải file về cài đặt theo giao diện. Ở đây có các phiên bản dành cho các hệ điều hành khác nhau, bạn tải phiên bản phù hợp với hệ điều hành đang dùng nhé:

Sau khi cài đặt, ta mở úng dụng lên sẽ có giao diện như hình sau:

GIao diện sau khi cài đặt thành công Sublime Text 3

2. Cài đặt Package Control thông qua wbond.net

B1: Nhấn Ctrl + ` Hoặc View/Show Console

B2: Nhập code sau vào:

1

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)

Hoặc các bạn có thể vào đây tham khảo thêm: https://sublime.wbond.net/installation

3. Cài đặt các extensions (gói hỗ trợ coding) trên Sublime Text 3.

B1: Khởi động package control

Nhấn Ctrl + Shift + P > Chọn Package Control: Install Package. Hoặc trên giao diện Sublime Text 3. Trên thanh Menu chọn Preferences => Package Control => Package Control: Install Package.

Màn hình nhập tên gói cần cài đặt để cài

B2: Cài các gói sau:

• Alignment => Căn lề (Ctrl + Alt + A)
• Vn Ime => Gõ tiếng việt trên Sublime Text 3 => Nhấn F2 để gõ.
• TrailingSpaces: Giúp bạn phát hiện bỏ đi những khoảng trắng dư thừa trong quá trình code. Sau khi cài đặt thì bạn có thể nhận thấy rằng các vùng có khoảng trắng dư nó sẽ tự hightlight lên.
• Jquery
• jQuery Snippets
• Nettuts+ Fetch => Hỗ trợ reset file => Ctrl + Alt + P > Fetch > Single File
• Sublime CodeIntel => Nó hỗ trợ cho bạn việc hiển thị các gợi ý ngay khi bạn code, về các functions, biến, object, string. Nó chính là bộ xương sống của tính năng Intelligent Suggesstion.
• Tag => Hỗ trợ tag html
• Google Search
• WordPress
• HTML5
• Sublime Linter: Gói mở rộng này sẽ giúp bạn biết ngay khi bạn gõ, rằng có thể bạn đã làm một điều gì đó sai, ví dụ, mở ngoặc mà quên đóng, quên dấu ; ở cuối dòng lệnh,…Với riêng PHP + CSS + Javascript, bạn nên cài một số thành phần phụ cho SublimeLinter này, nhờ vào Package Control
• SublimeLinter-phplint => Check lỗi php
• SublimeLinter-json
• Xdebug Client: Dễ dàng debug ứng dụng PHP của mình.

4. Một số cấu hình mà mình hay dùng. 

Cấu hình Emmet Sublime Text 3 tự động comment sau thẻ div.

Preferences / Packaget Settings / Setting User => Past code sau vào nhé.

1 2 3 4 5 6 7 8 9 10

{     "preferences": {     },     "syntaxProfiles": {         "html" : {             // auto add the comments             "filters": "html,c"         }     } }

Một số tùy chỉnh khác:
Để sử dụng phần settings này, các bạn vào Menu Sublime Text > Preferences > Settings - User (Mac OS X, tương tự cho Windows hoặc Linux) để chỉnh.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

{ "auto_indent": true, "bold_folder_labels": true, "caret_style": "phase", "detect_indentation": false, "draw_indent_guides": true, "draw_white_space": "selection", "fade_fold_buttons": false, "find_selected_text": true, "fold_buttons": true, "font_size": 15.0, "highlight_line": true, "highlight_modified_tabs": true, "ignored_packages": [ "Vintage", "Sublimerge Pro" ], "line_padding_bottom": 2, "line_padding_top": 2, "rulers": [ 80, 120 ], "tab_size": 4, "theme": "Soda Dark 3.sublime-theme", "todo": { "case_sensitive": true, "patterns": { "CHANGED": "CHANGED[\\s]*?:+(?P\\S.*)$", "FIXME": "FIX ?ME[\\s]*?:+(?P\\S.*)$", "NOTE": "NOTE[\\s]*?:+(?P.*)$", "TODO": "TODO[\\s]*?:+(?P.*)$" } }, "translate_tabs_to_spaces": true, "trim_automatic_white_space": true, "trim_trailing_white_space_on_save": true, "use_tab_stops": true, "word_separators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?", "word_wrap": true }

Chúc các bạn thành công!

Theo hungit.net