Hướng dẫn css sublime text

Giới thiệu Sublime Text (3)

Sublime Text là một IDE soạn thảo code đã nền tảng, đây là phần mềm dạng shareware (dùng thử miễn phí) cùng với một Python API. Sublime hỗ trợ nhiều ngôn ngữ lập trình và ngôn ngữ đánh dẫu (HTML, XML...), theo đó là rất nhiều tính năng được thêm vào bởi các plugin.

Màn hình soạn thảo code trong Sublime 3

Một số tính năng của Sublime

Sublime Text được giới thiệu từ năm 2008, viết bằng C++ và Python. Phiên bản Sublime Text 2 giới thiệu năm 2013 và phiên bản Sublime Text giới thiệu năm 2017 với các tính năng như:

Dễ dàng điều hướng tới các file, ký hiệu, hay các dòng với tính năng Goto Anything (nhấn Ctrl + P hoặc Cmd + P).

Tính năng Command palette (Ctrl + Shift + P hoặc Cmd + Shift +P), được sử dụng để nhanh chóng truy cập các tính năng từ bàn phím

Hỗ trợ soạn thảo tương tác với nhiều vùng chọn, thiết lập các thuộc tính cho dự án, tùy chọn thiết lập thông qua file cấu hình JSON và cuối cùng Sublime chạy đa nền tảng (macOS, Windows, Linux)

Cài đặt Sublime Text trên Windows, macOS, Ubuntu

Nói chung dù cài đặt trên nền tảng nào bạn đều có thể tải về và cài đặt theo hướng dẫn tại: https://www.sublimetext.com/3, sau khi tải về bạn có thể cài đặt bằng cách chạy file cài đặt và làm theo hướng dẫn của nó.

Ngoài ra bạn có thể cài đặt bằng cách:

Cài đặt Sublime trên macOS

Có thể sử dụng brew để cài đặt:

brew cask install sublime-text

Cài đặt Sublime trên Ubuntu

wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -
sudo apt-get install apt-transport-https
echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list
sudo apt-get update
sudo apt-get install sublime-text

Tải và cài đặt Sublime Text trên Windows bằng WinGet

Trên Windows nếu có sử dụng chương trình quản lý gói WinGet thì có thể tải về vài cài đặt Sublime bằng lệnh

winget install SublimeHQ.SublimeText

Sau khi cài đặt Sublime, bạn có thể mở thư mục chứa code của dự án mã nguồn ra và bắt đầu biên tập code.

Sau đây là một số thiết lập, cài đặt thêm để làm việc với Sublime

Cài đặt Package Control cho Sublime

Package Control là trình quản lý gói cho Sublime, thông qua nó có thể cài đặt thêm vào Sublime nhiều thành phần, để cài đặt hãy mở Command Palettes (Menu Tool) hoặc nhấn phím CTRL + Shift + P hoặc Cmd + Shifp + P (macOS), gõ vào pack và chọn mục Install Package Control

Cài đặt Package Control

Cài đặt các phần mở rộng vào Sublime

Sau khi có Package Control, bạn có thể dùng nó để cài đặt thêm vào Sublime các thành phần mở rộng mong muốn, tùy thuộc vào ngôn ngữ cũng như nhu cầu về các công cụ bạn cần dùng.

Để cài đặt gói mở rộng bạn vào Command Palettes bằng cách gõ CTRL + Shift + P hoặc Cmd + Shifp + P, sau đó chọn mục Package Control: Install Package

Cài đặt Package Control

Sau đó một giao diện đổ xuống, để bạn có thể tìm kiếm và chọn cài đặt các gói mong muốn, như hình là tìm kiếm gói Emmet

Cài đặt Package Control

Sau đây là một số gói mà bạn có thể tham khảo để cài đặt, thông tin về các package có thể tìm đầy đủ tại https://packagecontrol.io/

Alignment https://packagecontrol.io/packages/Alignment

Cho phép căn thẳng đoạn code được lựa chọn. Sử dụng bằng cách chọn code, rồi nhấn Ctrl + Alt + A hoặc trên macOS Cmd + Ctrl + A

Alignment trong Sublime

Trailing​Spaces https://packagecontrol.io/packages/TrailingSpaces

Gói này cho phép bạn quan sát dễ dàng các khoảng trắng và xóa nó. Sau khi cài đặt nó có menu lệnh: Edit > Trailing Space để bạn chọn để highlight các khoảng trắng cuối các dòng, có thể chọn để xóa nó

Sublime​Linter-phplint https://packagecontrol.io/packages/SublimeLinter-phplint

Giúp kiểm tra lỗi cú pháp PHP

Emmet https://packagecontrol.io/packages/Emmet

Hỗ trợ tự động điền nội dung khi gõ, nhấn Tab để hoàn chỉnh. Ví dụ gõ phpi nhấn Tab sẽ hoàn chỉnh kết quả là phpinfo()

Bracket​Highlighter https://packagecontrol.io/packages/BracketHighlighter

Giúp đánh dấu dễ dàng nhận ra các khối lệnh {}, (), [] ...

Ngoài ra các bạn có thể tham khảo các gói

• JSHint gợi ý, kiểm tra cú pháp Javascript
• AutoFileName nhấn Ctrl + Space ở link href để liệt kê và chọn các file
• Materialized CSS Snippets mẫu code CSS Material
• Standard Format định dạng code chuẩn
• CSS Media Query Snippets code mẫu CSS
• Terminal cửa sổ terminal
• Git tích hợp Git
• HTMLAttributes thuộc tính HTML
• jQuery cung cấp các chức năng về gợi ý jQuery
• Sass hỗ trợ viết mã Sass
• HTML-CSS-JS Prettify

Phím tắt 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.