Sublime Teхt là một trong những trình ѕoạn thảo phổ biến nhất hiện naу. So ᴠới Atom haу VSCode, Sublime chiếm ưu thế hơn hẳn nhờ tốc độ nhanh, giao diện đơn giản, ᴠà có đầу đủ các tính năng mạnh mẽ.
Để khai thác hết khả năng của Sublime, ATP Web sẽ Gợi ý code trong Sublime Text cần thiết cho bạn.
Để dùng được Emmet trên Sublime Text 3 thì chúng ta phải thiết lập thông qua Package Control. Chỉ dẫn cài đặt các bạn sẽ xem tại đây nhé.
Nếu như bạn nào chưa biết thì mình hướng dẫn ở đây luôn:
- Mở Sublime Text lên, gõ Ctrl + Shift + P, gõ Install Package, gõ tiếp Emmet và thiết lập plugin này cho Sublime Text.
Ngoài ra, bạn sẽ download Emmet rồi cài đặt bằng tay cho IDE tương ứng.
Bây giờ chúng ta sẽ sử dụng Emmet để code nhanh nhé.
Với Emmet, bạn sẽ tạo ngay trang HTML trong vòng 1 nốt nhạc. Chỉ cần gõ “!” hoặc html5 rồi nhấn Tab là bạn có ngay một trang HTML5 chuẩn mực với một vài tag căn bản.
Dưới đây là Emmet syntax áp dụng hình thành cho các phiên bản HTML không giống nhau
- html:5 hoặc ! với HTML5 doctype
- html:xt dành cho XHTML
- html:4s dành cho HTML4 strict doctype
Nếu bạn đã làm quen với CSS thì việc vận dụng Emmet rất dễ dàng, bởi vì cú pháp của Emmet rất giống CSS trong việc miêu tả các thành phần.
Ví dụ, thay vì viết ta chỉ cần viết p.hcode.
Tương tự, chúng ta có khả năng thêm cùng lúc đó class u
Đây chính là tính năng tuyệt vời mà chúng ta hay vận dụng. Emmet cho phép dùng các toán tử >,+,^ để bạn kết hợp làm ra nhiều dòng code khi chỉ cần gõ 1 dòng đơn giản.
Cụ thể:
- > cho phép lồng ghép hai tags với nhau, theo một cách khác.
- + cho phép đặt các thẻ ngang cấp với nhau
- ^ cho phép đưa tag lên cấp cao hơn trong cấu trúc cây HTML.
Bạn có thể nhóm các đoạn mã lại với nhau dùng dấu ngoặc đơn []. VD khi gõ, [.hcode>h1]+[.hung>h2] ta sẽ được:
Khi khai báo tag cùng class, bạn viết div.item, Emmet sẽ làm ra
Nếu như bạn quên không viết div mà chỉ viết mỗi .item, Emmet vẫn sinh ra code giống trên.
Đó là tính năng rất thông minh của Emmet – tự động kiểm tra tag cha để mỗi khi bạn viết tắt Emmet sẽ tự động hoàn thiện những gì bạn quên. VD, khi khai báo .item trong thẻ thì Emmet sẽ cho ra kết quả chứ chẳng phải là như ở trên. Đây là cách viết tắt giúp chúng ta code nhanh hơn.
Danh sách tên tag con mà Emmet hỗ trợ
- li cho ul và ol;
- tr cho table, tbody,thead và tfoot;
- td cho tr;
- option cho select và optgroup.
Bạn sẽ nắm rõ ràng số lần một phần tử được đưa rõ ra bằng cách dùng toán tử *. VD, ul>li*4 ta sẽ được
Tạo nhiều tag với cùng tên class được đánh số tự động như thế nào? Bạn chỉ cần thêm $ và tên đối tượng mục tiêu và Emmet sẽ tự động đánh số tăng dần tương ứng với từng tên được tạo ra.
VD, nếu như viết ul>li.item$*3 ta sẽ được:
Tương tự với HTML, Emmet hỗ trợ viết tắt với CSS giúp chúng ta code nhanh hơn, dưới đây là một số ví dụ Điển hình mà hay dùng nhất.
Giả sử bạn mong muốn xác định tính chất có chiều rộng là 200px, hãy viết w200 Emmet sẽ làm ra width: 200px;
Nếu như mong muốn sử dụng đơn vị em hay % thì sao? sau đây là bảng một vài cơ quan và cách viết tắt
- p tương ứng với %
- e tương ứng với em
- x tương ứng với ex
VD, h15p+m10e+pr5e ta sẽ được:
- height: 15%;
- margin: 10em;
- padding-right: 5em;
Giả sử khi viết @f ta có thể được
@font-face { font-family:; src:url[]; }Tuy nhiên, nếu ta sử dụng toán tử mở rộng + thì sao? Hãy thử @f+, kết quả sẽ được:
@font-face { font-family: 'FontName'; src: url['FileName.eot']; src: url['FileName.eot?#iefix'] format['embedded-opentype'], url['FileName.woff'] format['woff'], url['FileName.ttf'] format['truetype'], url['FileName.svg#FontName'] format['svg']; font-style: normal; font-weight: normal; }Rất tuyệt đúng không nào. một vài tính chất khác như background-image, border-radius,font, @font-face, text-outline, text-shadow ta cũng có thể ứng dụng tương tự.
ví dụ, b++f++bdrs++to++ts+, nhấn Tab ta sẽ được:
background: #fff url[] 0 0 no-repeat; font: 1em Arial,sans-serif; border-right: 1px solid #000; text-outline: 0 0 #000; text-shadow: 0 0 0 #000;Và vận dụng phím Tab để di chuyển chuyển đổi các giá trị cho từng thuộc tính.
CSS Module của Emmet sẽ tự động tìm kiếm khi bạn vừa nhập 1 từ được viết tắt và gợi ý cách viết tắt gần nhất. nếu không tự động, hãy gõ phím Ctrl + Space. ví dụ, khi bạn gõ ovh, ov-h, ov hay oh Emmet đều sinh ra code giống nhau.
CSS3 ra đời với rất nhiều tính năng tuyệt vời, nhưng không phải trình duyệt nào cũng hỗ trợ như nhau. vì lẽ đó, với một vài thuộc tính ta phải vận dụng tiền tố ứng với trình duyệt để giao diện Website có khả năng hiển thị giống hệt nhau trên tất cả các trình duyệt web. Và nếu thêm từng prefix thì thật mất thời gian, Emmet sẽ giúp ta tự động hoàn thiện Điều này.
VD, bạn gõ trs và nhấn Tab ta sẽ thu được.
-webkit-transition: prop time; -o-transition: prop time; transition: prop time; GradientsKhi kể đến tính năng mới trong CSS3, ta không thể bỏ qua Gradients. Và thay vì phải viết dài cả dòng, ta chỉ cần một đoạn viết tắt, ví dụ lg[left, #fff 50%, #000] sẽ cho ra kết quả:
background-image: -webkit-linear-gradient[left, #fff 50%, #000]; background-image: -o-linear-gradient[left, #fff 50%, #000]; background-image: linear-gradient[to right, #fff 50%, #000];Trước đây, để làm ra các đoạn text “Lorem ipsum” mình thường vào các Website để copy, nhưng từ khi sử dụng Emmet, công việc đó trở nên dễ dàng và có thể làm ngay tại Sublime Text [hay bất kỳ code editor nào được Emmet hỗ trợ] với cú pháp viết tắt lorem hay lipsum.
Thậm chí, có thể tạo 10 đoạn text đó thật đơn giản với lorem*10, hay bạn sẽ giới hạn số lượng từ hiển thị như sau: p*3>lorem5.
Lorem ipsum dolor sit amet. Officia optio dolor sed sit. Nihil, eum, nisi. Optio, numquam!Emmet mang lại một loạt các tùy chỉnh để bạn sẽ thực nghiệm plugin này theo cách riêng của mình thông qua các tệp sau:
- Thêm mới hoặc chuyển đổi snippet đã có sẵn trong tệp [snippets.json] chuyển đổi hành vi các bộ lọc [filters], hay các hành động [actions] của Emmet thông qua file [preferences.json]
- nắm rõ ràng cách để tạo ra HTML hoặc XML, xem trong file [syntaxProfiles.json]
[Nguồn: Tổng hợp]
Qua bài viết trên của ATP Trang Website đã cung cấp đến các bạn đọc một số thông tin về Gợi Ý Code Trong Sublime Text Cần Thiết. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.
Sublime Text 3 là một trong những trình soạn thảo phổ biến nhất hiện nay. So với Atom hay VSCode, Sublime chiếm ưu thế hơn hẳn nhờ tốc độ nhanh, giao diện đơn giản, và có đầy đủ các tính năng mạnh mẽ. Để khai thác hết khả năng của Sublime, bạn nên lưu ý một số thủ thuật "nhỏ mà có võ" dưới đây.
Nhắn nhủ: Package Control là kho plugin dành riêng Sublime, bạn rất nên sử dụng để quản lý các phần mở rộng dễ dàng hơn. Để cài đặt Package Control, bạn có thể làm theo hướng dẫn này.
Tận dụng phím tắt
Dùng phím tắt để thực hiện tác vụ luôn nhanh hơn dùng chuột hay menu. Bạn không nhất thiết phải học thuộc lòng mọi phím tắt này, mà chỉ cần nhớ là chúng có tồn tại để dễ bề "lục lọi" khi cần.
| Chung | | | ---------------------------- | --------------------------------------------------------------- | | Ctrl+Shift+P | Mở Command Prompt | | Ctrl+K, Ctrl+B | Ẩn/hiện side bar | | Chỉnh sửa | | | Ctrl+Shift+↑ | Dịch chuyển dòng/vùng chọn lên 1 dòng | | Ctrl+Shift+↓ | Dịch chuyển dòng/vùng chọn xuống 1 dòng | | Ctrl+L | Chọn dòng hiện tại, tiếp tục nhấn Ctrl+L để chọn dòng tiếp theo | | Ctrl+D | Chọn một từ, tiếp tục nhấn Ctrl+D để chọn những từ giống vậy | | Ctrl+Shift+D | Nhân đôi dòng hiện tại | | Ctrl+M | Đi tới dấu đóng ngoặc gần nhất - Lặp lại để đi tới dấu mở ngoặc | | Ctrl+Shift+M | Chọn toàn bộ nội dung trong dấu ngoặc | | Ctrl+Shift+K | Xóa toàn bộ dòng | | Ctrl+] | Lùi 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+/ | Comment/Un-comment dòng/vùng chọn hiện tại | | Điều hướng/di chuyển | | | Ctrl+P | Mở nhanh file bằng tên | | Ctrl+R | Đi đến kí tự cần tìm | | Ctrl+; | Đi đến từ trong file hiện tại | | Ctrl+G | Đi đến dòng trong file hiện tại | | Tìm kiếm và thay thế | | | Ctrl+F | Tìm | | Ctrl+H | Thay thế | | Ctrl+Shift+F | Tìm trong các file đang mở | | Tabs | | | Ctrl+Shift+T | Mở tab đã đóng gần nhất | | Ctrl+Tab | Di chuyển qua lại giữa các tab | | Ctrl+W | Đóng tab hiện tại | | Alt+[NUM] | Đi tới tab thứ [NUM] | | Chia màn hình | | | Alt+Shift+NUM | Chia màn hình thành [NUM] cột | | Alt+Shift+5 | Chia màn hình thành grid gồm 4 groups | | Alt+Shift+8 | Chia màn hình thành 2 hàng | | Ctrl+[NUM] | Đi tới group thứ [NUM] | | Ctrl+[NUM] | Chuyển file tới group thứ [NUM] | | Bookmarks | | | Ctrl+F2 | Bookmarks/Bỏ bookmarks | | F2 | Đi tới bookmarks tiếp theo | | Shift+F2 | Đi tới bookmarks trước | | Ctrl+Shift+F2 | Xóa tất cả bookmarks | | Thao tác với văn bản | | | Ctrl+K, Ctrl+U | Chuyển vùng chọn sang chữ in hoa | | Ctrl+K, Ctrl+L | Chuyển vùng chọn sang chữ thường |
Tô màu mã nguồn với các gói mở rộng ngôn ngữ
Sau khi cài đặt, Sublime hỗ trợ đến hơn 50 ngôn ngữ lập trình. Tuy nhiên, nếu làm việc với Angular, Vue, React hay những framework/ngôn ngữ mới, bạn cần phải cài đặt thêm các phần mở rộng để Sublime có thể hiểu và tô màu mã nguồn. Tùy nhu cầu cụ thể mà bạn có thể tìm thấy plugin tương ứng trên Package Control. Ehkoo liệt kê dưới đây những plugin thông dụng nhất.
Ngôn ngữ
Thư viện
- AngularJS
- Vue Syntax Highlight
- EmberScript
Emmet
Với lập trình viên front-end, Emmet là plugin không thể thiếu rồi. Emmet cho phép bạn viết HTML "nhanh như chảo chớp" bằng cách dùng biểu thức mô tả HTML, sau đó Emmer sẽ mở rộng biểu thức này. Chẳng hạn, khi bạn viết #content>p.text*5>lorem, Emmet sẽ "úm ba la" thành:
Không chỉ hỗ trợ làm việc với HTML, Emmet cũng biểu thức HTML bên trong JSX. Để tìm hiểu thêm về cách viết biểu thức, bạn có thể tham khảo ở đây.
Các gói snippets hữu ích
JavaScript & NodeJS Snippets, như tên gọi, bao gồm các snippets dành riêng cho JavaScript, giúp bạn gõ một đoạn mã thông dụng nhanh hơn. Ví dụ, thay vì gõ document.querySelector['selector'];, bạn chỉ cần gõ qs, nhấn Tab, và Sublime sẽ làm phần việc còn lại giúp bạn. Hoặc gi như ví dụ dưới đây.
Nếu thấy Emmet hơi phức tạp, bạn có thể sử dụng một plugin khác tương tự là HTML Snippets. Plugin này có ít tính năng hơn, nhưng dễ sử dụng hơn.
Bên cạnh đó, cũng đừng quên những gói snippets khi làm việc với các thư viện/framework, chẳng hạn như ReactJS Snippets, AngularJS Snippets, VueJS Snippets...
Với CSS, bạn chỉ cần cài CSS Snippets là có hỗ trợ CSS, LESS, SASS và Stylus.
Định dạng mã nguồn
Canh hàng với Alignment
Alignment giúp bạn canh hàng khi khai báo nhiều biến. Không chỉ hoạt động trên JS, Alignment còn hỗ trợ PHP. Để tùy chỉnh plugin này, bạn có thể xem hướng dẫn.
Loại bỏ khoảng trắng dư thừa bằng Trimmer
Trimmer giúp bạn loại bỏ những khoảng trắng thừa một cách nhanh chóng. Bên cạnh đó plugin này còn có tính năng Replace Smart Characters, giúp thay thế những ký tự đặc biệt như « thành