---------
Phần 12. Viết
mã chuyên nghiệp với code editor
Tới thời điểm này, nếu cứ lọ mọ gõ từng dòng mã HTML hoặc
CSS sẽ thấy rất mất thời gian. Vì vậy, cần phải học cách để viết mã nhanh hơn,
chuyên nghiệp hơn.
Code editor là các phần mềm để viết mã nguồn, đây là các
chương trình gọn nhẹ. Đọc thêm để phân biệt giữa IDE và code editor.
Có rất nhiều code editor, hai cái đang được sử dụng khá phổ biến là Visual Studio Code
(VS code) và Sublime text.
Cũng không nhất thiết phải học hết các thủ thuật ở các clip
bên dưới, cứ xem qua một lượt, thấy cái nào hay thì học, rồi sau đó sẽ hoàn
thiện dần các thủ thuật trong quá trình làm thực tế. Điều quan trọng là
mình biết có cách để làm nhanh hơn, và nếu cần cái nào thì vào lại đây để
tìm hiểu.
Xem các clip sau:
Đây là clip số 1, giới thiệu về Sublime Text.
Đây là clip số 2, tìm kiếm và mở tập tin nhanh.
Đây là clip số 3, sử dụng đa con trỏ.
Đây là clip số 4, cài đặt và sử dụng package control.
Đây là clip số 5, gõ mã twitter bootstrap nhanh.
Đây là clip số 6, cải thiện menu phần sidebar
Đây là clip số 7, gõ mã HTML&CSS nhanh và hiệu quả
Đây là clip số 8, thay đổi màu sắc của mã
Đây là clip số 9, thay đổi theme trong Sublime Text
Đây là clip số 10, tạo tập tin mới một cách tiện lợi
Một số kĩ năng bước đầu nên biết gồm:
- Cài và sử dụng được gói Emmet
- Sử dụng được chức năng “lorem” để tạo văn bản ngẫu nhiên
- Gõ mã nhanh (ví dụ, kiểu như gõ html:5 rồi gõ phím Tab, ul>li*5 rồi gõ phím Tab)
- Sử dụng được đa con trỏ
- Đổi màu sắc của mã, nhìn cho dễ chịu và hợp với bản thân
- Cài đặt và chọn theme theo ý thích
- Cài và sử dụng được gói Emmet
- Sử dụng được chức năng “lorem” để tạo văn bản ngẫu nhiên
- Gõ mã nhanh (ví dụ, kiểu như gõ html:5 rồi gõ phím Tab, ul>li*5 rồi gõ phím Tab)
- Sử dụng được đa con trỏ
- Đổi màu sắc của mã, nhìn cho dễ chịu và hợp với bản thân
- Cài đặt và chọn theme theo ý thích
Xem thêm cách cài đặt và sử dụng VS code của tác giả Toidicodedao:
https://www.youtube.com/watch?v=a4NIBn44FSE
Một số ý ghi lại:
– Nên chọn code editor miễn phí
– Code editor rất gọn nhẹ, khi cần thêm chức năng gì thì cài
thêm các gói hỗ trợ (extention, plugin, package)
– Đọc thêm về các
extentions tại đây: https://code.visualstudio.com/docs/editor/extension-gallery
– Cấu hình môi trường làm việc (tab, font chữ)
– Cách tìm kiếm
các giải pháp khi sử dụng VS code
– Dùng các extensions : Git history, GitLens, Bracket Pair
Colorizer, Bookmarks, Code spell checker, Live server
-----------
Cập nhật [1/9/2020]
-----------