-------
Phần 38. LiveReload
từ Sublime Text 3 lên Chrome
Để tiện cho việc xem kết quả khi lập trình, sau đây sẽ thực
hiện cấu hình Sublime Text 3 và Chrome để “Tự động cập nhật kết quả từ Sublime
Text 3 lên trình duyệt Chrome”.
Tham khảo thêm ở đây:
Theo đó, sẽ thực hiện các bước sau:
(1) Mở Sublime Text 3, vào menu Preferences\Package Control,
chạy lệnh Package Control: Add Repository, cuối cửa sổ của Sublime Text xuất
hiện ô nhập liệu, nhập vào đường dẫn sau: https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json
(2) Vào lại mục Package Control, chạy lệnh Package Control:
Install Package, nhập vào gói LiveReload.
(3) Vào lại mục Package Control, chạy lệnh Package Control: Enable
Package, nhập vào gói LiveReload.
(4) Vào lại Preferences\Package
Settings\LiveReload\Settings-Default, xóa hết nội dung đang có, thay bằng đoạn
mã sau, lưu lại và đóng cửa sổ này:
{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}
(5) Cài đặt Auto-save cho Sublime Text 3: vào lại mục
Package Control, chạy lệnh Package Control: Install Package, nhập vào gói auto-save.
Gói Auto-save sẽ giúp Sublime Text tự động lưu dữ liệu ngay sau khi mã nguồn bị
thay đổi. Nhấn tổ hợp phím "ctrl+alt+s" để bật và tắt chức năng này.
(6) Vào lại Preferences\Package Settings\Auto-save\Key
Bindings – User, thêm đoạn mã sau:
[
{"keys":["ctrl+alt+s"],
"command": "auto_save"}
]
(7) Kiểm tra xem chức năng auto-save của Sublime Text 3 đã
hoạt động chưa, bằng cách bấm tổ hợp 3 phím “ctrl+alt+s” vài lần, quan sát
thanh trạng thái phía dưới của Sublime Text 3, sẽ thấy thông báo AutoSave
Turned On hoặc Turned Off. Nếu Turned On là được.
(8) Vào đây https://chrome.google.com/webstore/category/extensions
để cài đặt extension LiveReload cho Chrome.
(9) Vào menu của Chrome, chọn More tools, chọn Extensions, tìm tới mục LiveReload, đánh dấu chọn vào mục Allow access to file URLs.
(10) Nhớ bấm vào biểu tượng plugin LiveReload, ở góc trên,
bên phải của Chrome để Enable LiveReload.
(11) Vậy là đã hoàn
thành việc cấu hình. Thử lập trình trên Sublime Text 3 và xem kết quả xuất hiện
ngay lập tức trên Chrome.
Tuy nhiên, việc để chế độ lưu tự động (Autosave) có một hạn
chế là nó hay làm tắt phần gợi ý khi viết mã (Autocomplete). Vì vậy, nên tắt
chế độ Autosave đi (bấm Ctrl+Alt+S). Sau khi viết mã xong, muốn xem kết quả trên
trình duyệt, chỉ cần bấm Ctrl+S (lưu lại mã nguồn) là được.
-----------
Cập nhật 13/10/2016
-----------