Sublime Text và Package nên có cho các dev web để trở thành pro

1. Sublime Text là gì?

Sublime text là công cụ editor cho các dev web vô cùng mạnh mẽ, nó có giao diện dễ nhìn và các package hỗ trợ để các bạn code nhanh chống hơn và cũng đỡ nhớ các từ khóa cũng như các mã màu.

Các bạn tải sublime text tại đây nhé!

Tùy vào hệ điều hành máy tính bạn mà chọn cho phù hợp nhe!

2. Package cho Sublime Text

À trước khi cài được gói package bạn phải cài package control của Sublime nha!.

Sau đó tiến hành khởi động lại Sublime Text để áp dụng nhé!

Khi bạn muốn cài đặt package mới thì bạn vào Preferences -> Package Control -> Install Package.

Lưu ý: với mỗi package khi cài xong bạn phải khởi động lại sublime text để áp dụng package đó nhé!

2.1 AutoFileName

Package giúp gợi ý tên các file có trong thư mục, nó cũng khá hữu ích mình không cần phải lục lội trong thư mục có những file gì rồi điền vào, đôi khi bị sai tên file còn không chạy nữa.

2.2 AutoPrefixer

Package này hữu ích cho các bạn front-end, nó giúp các bạn không cần phải nhớ những thứ code khó nhớ để hỗ trợ cho mọi trình duyệt.

2.3 Color HighLighter

Package giúp bạn hiển thị luôn màu sắc của mã màu, sẽ tốt cho các bạn front-end đấy.

2.4 Emmet

Package giúp bạn tạo code html vô cùng chuyên nghiệp, vô cùng ngắn bởi những mã cực kì ngắn. Nó yêu cầu bạn phải tìm hiểu để sử dụng nó.

2.5 Color Picker

Package này giúp bạn chọn màu dễ dàng, rất là tiện lợi. Phím tắt của package là ctrl + shift + c.

2.6. Auto Save

Package cho phép tự động lưu file mà không cần phải ấn save. Nó rất hữu ích cho các bạn front-end nếu như kết hợp thêm package thứ 7 bên dưới. À phím tắt để bật tắt tính năng này sau khi cài là: Ctrl + alt + S.

2.7. Live Reload

Đúng vậy như tên gọi của nó, nó sẽ tự động reload trình duyệt của file đó khi file đó được lưu lại, phải nói là rất tuyệt với nếu chúng ta kết hợp nó với auto save. Lưu ý nếu bạn sử dụng trình duyệt nào thì cũng cần cài extensions cho trình duyệt đó nữa nhé.

2.8 Terminal

Package thật hữu ích khi sử dụng laravel, package giúp mở command line ngay khi ở trong sublime text, phím tắt của nó là: ctrl + shift + t nhé.

2.9 SublimeCodeIntel

Package này giúp các bạn có thể dễ dàng tìm ra các function,class,.. đang sử dụng được viết từ đâu…

2.10 Bracket HighLighter

Package giúp cho các bạn có thể dễ nhìn ra phần mở/ đóng của thẻ nằm ở chỗ nào.

2.11 PHP Getter and Setter

Package cho phép bạn tạo nhanh getter and setter cho php.

3. Cài package nhanh

Mình đã cài các package ở trên, và đã export lưu trên git. Các bạn có thể sử dụng cách này để import các package nhanh gọn và đỡ tốn công sức.

3.1 Import các package

Bước 1: Ấn tổ hợp phím ctrl + shift + p và chọn insall package (nếu đã instal rồi chuyển sang bước 3)

Bước 2: Gõ tìm kiếm Sync Setting và click vào

Bước 3: Ấn tổ hợp phím ctrl + shift + p và chọn Sync Setting: Edit User Setting

Bước 4: Paste đoạn code bên dưới vào (này là id gist – bạn có thể thay đổi thành gist của bạn đã backup bằng cách vào git chọn your gist ở icon user, URL phía sau username là gist id)

{
	"gist_id": "5a634e2a3203fcf7315374e1a0292ace"
}

Bước 5: Ấn tổ hợp phím ctrl + shift + p và chọn Sync Setting: Download đợi quá hình hoàn tất là ok

3.2 export package

Bước 1: Ấn tổ hợp phím ctrl + shift + p và chọn insall package (nếu đã instal rồi chuyển sang bước 3)

Bước 2: Gõ tìm kiếm Sync Setting và click vào

Bước 3: Ấn tổ hợp phím ctrl + shift + p và chọn Sync Setting: Create And Update

Bước 4: Vào link https://github.com/settings/tokens/new nhập tiêu đề, check vào gist và chọn generate token. Lấy token gắn vào bên dưới . Và lấy mã đó gắn vào file tạo ở bước 3 và lưu lại.

{
	"access_token": "",
}

Bước 5: Ấn tổ hợp phím ctrl + shift + p và chọn Sync Setting:Create And Update. Nếu có thông báo hiện ra thì bấm yes nhé!

4. Sử dụng phím tắt

Tab

• Ctrl + P: Mở nhanh một file

• Ctrl + Shift + T: Mở file vừa đóng.
• Alt + number: Đến tab theo số thứ tự.
• Ctrl + W: Đóng tab đang xem / Thoát Sublime Text.

Chỉnh sửa

• Ctrl + F: Tìm kiếm.
• Ctrl + H: Tìm kiếm và thay thế.

• Ctrl + Shift + K: Xóa dòng hiện tại.
• Ctrl + Shift + D: nhân đôi dòng hiện tại.

• Ctrl + Shift + ↑ (↓): Di chuyển dòng/cụm, tự động đưa vào brackets (các dấu đóng mở hàm).

• Ctrl + /: comment.
• Ctrl + Shift + /: comment dạng block.
• Ctrl + R: List các hàm.
• Ctrl + KU: Chuyển thành chữ hoa.
• Ctrl + KL: Chuyển thành chữ thường.
• Ctrl + X: Xóa dòng hiện tại nhưng đồng thời lưu nó vào bộ nhớ đệm.

Điều hướng

• Ctrl + G <số dòng>: Di chuyển tới dòng.
• Ctrl + D: Bôi đen từ hiện tại.
• Ctrl + M: Di chuyển tới dấu đóng ngoặc gần nhất.
• Ctrl + Shift + M: Bôi đen toàn bộ nội dung trong cặp ngoặc.
• Ctrl + Shift + Mũi tên trái: Phím tắt bôi đen đến đầu từ về phía bên trái.
• Ctrl + Shift + Mũi tên phải: Bôi đen đến đầu từ về phía bên phải.
• Ctrl + L: Phím tắt bôi đen dòng hiện tại và chuyển con trỏ tới dòng tiếp theo.

Cài đặt chung

• Ctrl + Shift + P: Mở command line. Trong đó có install / remove package.

• Shift + Alt + (1/2/3/4/5/8/9): Chia thành nhiều màn hình.

• Ctrl + Alt + Left click: Đóng hoặc mở tất cả folder.
• Ctrl + KB: Đóng mở vùng hiển thị danh sách file/folder (bên trái màn hình).
• Shift + F11: Toàn màn hình.

Nguồn: https://topdev.vn/blog/huong-dan-toi-uu-sublime-text-cho-coder/

5. Snippet

Các bạn vào Sublime Text => Preferences => Browse Packages… => chọn thư mục User và paste các file giải nén bên dưới vào thư mục User nhé!

Link download: https://drive.google.com/