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ộ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: //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 - //download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add - sudo apt-get install apt-transport-https echo "deb //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 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
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
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 //packagecontrol.io/
Alignment //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
TrailingSpaces //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ó
SublimeLinter-phplint //packagecontrol.io/packages/SublimeLinter-phplint
Giúp kiểm tra lỗi cú pháp PHP
Emmet //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[]
Ở bài viết trước mình đã giới thiệu và chia sẽ kinh nghiệm sử dụng Sublime text 3. Nói đến sublime text 3 thì chắc các bạn đều đã biết. Tuy nhiên, làm thế nào để cải thiện hiệu suất làm việc của bạn? Ở bài viết này mình xin giới thiệu tới các bạn một plugin cực hay hỗ trợ nhiều code editor phổ biến giúp việc viết code được nhanh hơn, hiệu quả hơn đó chính là Emmet.
Để sử dụng được Emmet trên Sublime Text 3 thì chúng ta phải cài đặt thông qua Package Control. Hướng dẫn cài đặt các bạn có thể xem tại đây nhé. Nếu 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à cài đặt plugin này cho Sublime Text. Ngoài ra, bạn có thể 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é.
Viết code HTML nhanh hơn với Emmet
1. Tạo file HTML trong vòng 1 nốt nhạc
Với Emmet, bạn có thể 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 tiêu chuẩn với một vài tag cơ bản.
Dưới đây là Emmet syntax áp dụng khởi tạo cho các phiên bản HTML khác nhau
2. Dễ dàng thêm Class, ID, Text, Attributes
Nếu bạn đã làm quen với CSS thì việc sử dụng Emmet rất đơn giản, bởi vì cú pháp của Emmet rất giống CSS trong việc mô tả các thành phần.
Ví dụ, thay vì viết
4 ta chỉ cần viết
5.
Tương tự, chúng ta có thể thêm đồng thời class và ID nếu viết
6 thay vì phải viết đầy đủ
7
Đối với nội dung và thuộc tính [attributes] cho các thành phần HTML, bạn sử dụng dấu ngoặc nhọn {} và dấu ngoặc vuông [] tương ứng. Ví dụ, viết
8 và ấn Tab sẽ hiển thị
9, hay viết
-
/.item1 >
/.item2 >
/.item3 >
0 sẽ cho ra kết quả
-
/.item1 >
/.item2 >
/.item3 >
1
3. Lồng ghép các thẻ HTML
Đây là tính năng tuyệt vời mà chúng ta hay sử dụng. Emmet cho phép dùng các toán tử
-
/.item1 >
/.item2 >
/.item3 >
2,
-
/.item1 >
/.item2 >
/.item3 >
3,
-
/.item1 >
/.item2 >
/.item3 >
4 để bạn kết hợp tạo ra nhiều dòng code khi chỉ cần gõ 1 dòng đơn giản. Cụ thể:
-
/.item1 >
/.item2 >
/.item3 >
.
-
/.item1 >
/.item2 >
/.item3 >
-
/.item1 >
/.item2 >
/.item3 >
4. Nhóm các Tags
Bạn có thể nhóm các đoạn mã lại với nhau sử dụng dấu ngoặc đơn []. Ví dụ khi gõ,
-
/.item1 >
/.item2 >
/.item3 >
8 ta sẽ được:
5. Tự động thêm Tags con
Khi khai báo tag cùng class, bạn viết
-
/.item1 >
/.item2 >
/.item3 >
9, Emmet sẽ tạo ra
height: 15%; margin: 10em; padding-right: 5em;
0. Nếu bạn quên không viết
height: 15%; margin: 10em; padding-right: 5em;
1 mà chỉ viết mỗi
height: 15%; margin: 10em; padding-right: 5em;
2, 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 thành những gì bạn quên. Ví dụ, khi khai báo
height: 15%; margin: 10em; padding-right: 5em;
2 trong thẻ
height: 15%; margin: 10em; padding-right: 5em;
4 thì Emmet sẽ cho ra kết quả
height: 15%; margin: 10em; padding-right: 5em;
5 chứ không phải là
height: 15%; margin: 10em; padding-right: 5em;
0 như ở trên. Đây chính 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ợ
- height: 15%; margin: 10em; padding-right: 5em; 7 cho height: 15%; margin: 10em; padding-right: 5em; 8 và height: 15%; margin: 10em; padding-right: 5em; 9;
- @font-face { font-family:; src:url[]; } 0 cho @font-face { font-family:; src:url[]; } 1, @font-face { font-family:; src:url[]; } 2, @font-face { font-family:; src:url[]; } 3 và @font-face { font-family:; src:url[]; } 4;
- @font-face { font-family:; src:url[]; } 5 cho @font-face { font-family:; src:url[]; } 0;
- @font-face { font-family:; src:url[]; } 7 cho @font-face { font-family:; src:url[]; } 8 và @font-face { font-family:; src:url[]; } 9.
5. Thêm nhiều tag giống nhau
Bạn có thể xác định số lần một phần tử được đưa ra bằng cách sử dụng toán tử
@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; }
0. Ví dụ,
@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; }
1 ta sẽ được:
6. Đánh số tự động
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
@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; }
2và tên đối tượng và Emmet sẽ tự động đánh số tăng dần tương ứng với từng tên được tạo ra. Ví dụ, nếu viết
@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; }
3 ta sẽ được:
-
/.item1 >
/.item2 >
/.item3 >
Viết CSS nhanh hơn với Emmet
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 vài ví dụ điển hình mà hay dùng nhất.
Viết tắt giá trị
Giả sử bạn muốn xác định thuộc tính có chiều rộng là 2
@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; }
4, hãy viết
@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; }
5 Emmet sẽ tạo ra
@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; }
6
Nếu muốn sử dụng đơn vị
@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; }
7 hay
@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; }
8 thì sao? Dưới đây là bảng một số đơn vị và cách viết tắt
- @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; } 9 tương ứng với @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; } 8 - 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;
1 tương ứng với @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; } 7 - 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;
3 tương ứng với 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;
4
Ví dụ,
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;
5 ta sẽ được:
height: 15%; margin: 10em; padding-right: 5em;
Toán tử mở rộng
Giả sử khi viết
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;
6 ta sẽ được
@font-face { font-family:; src:url[]; } Tuy nhiên, nếu ta sử dụng toán tử mở rộng
-
/.item1 >
/.item2 >
/.item3 >
3 thì sao? Hãy thử
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;
8, 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 phải không nào. Một vài thuộc tính khác như
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;
9,
-webkit-transition: prop time; -o-transition: prop time; transition: prop time;
0,
-webkit-transition: prop time; -o-transition: prop time; transition: prop time;
1,
-webkit-transition: prop time; -o-transition: prop time; transition: prop time;
2,
-webkit-transition: prop time; -o-transition: prop time; transition: prop time;
3,
-webkit-transition: prop time; -o-transition: prop time; transition: prop time;
4 ta cũng có thể áp dụng tương tự.
Ví dụ,
-webkit-transition: prop time; -o-transition: prop time; transition: prop time;
5, 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à dùng phím Tab để di chuyển thay đổi các giá trị cho từng thuộc tính.
Gợi ý tự động
CSS Module của Emmet sẽ tự động tìm kiếm khi bạn vừa nhập 1 từ 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õ
-webkit-transition: prop time; -o-transition: prop time; transition: prop time;
6,
-webkit-transition: prop time; -o-transition: prop time; transition: prop time;
7,
-webkit-transition: prop time; -o-transition: prop time; transition: prop time;
8 hay
-webkit-transition: prop time; -o-transition: prop time; transition: prop time;
9 Emmet đều sinh ra code giống nhau.
Thêm các tiền tố
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. Do đó, với một vài thuộc tính ta phải sử dụng tiền tố ứng với trình duyệt để giao diện website có thể hiển thị giống hệt nhau trên tất cả các trình duyệt. 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 thành việc này. Ví dụ, bạn gõ
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];
0 và nhấn Tab ta sẽ thu được.
-webkit-transition: prop time; -o-transition: prop time; transition: prop time;
Gradients
Khi nói tới 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ụ
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];
1 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];
Một vài tính năng khác
Tạo Lorem Ipsum
Trước đây, để tạo ra các đoạn text “Lorem ipsum” mình thường vào các website để copy, nhưng từ khi 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
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];
2 hay
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];
3.
Thậm chí, có thể tạo 10 đoạn text đó thật dễ dàng với
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];
4, hay bạn có thể giới hạn số lượng từ hiển thị như sau:
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];
5
Lorem ipsum dolor sit amet. Officia optio dolor sed sit. Nihil, eum, nisi. Optio, numquam!
Tùy chỉnh Emmet theo ý bạn
Emmet cung cấp một loạt các tùy chỉnh để bạn có thể trải nghiệm plugin này theo cách riêng của mình thông qua các file sau:
- Thêm mới hoặc thay đổi snippet có sẵn trong file
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];
6 - Thay đổi hành vi các bộ lọc [filters], hay các hành động [actions] của Emmet thông qua file
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];
7 - Xác định cách tạo ra HTML hoặc XML, xem trong file
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];
8
Lời kết
Emmet là một plugin tuyệt vời giành cho code editor, giúp chúng ta viết code nhanh hơn, tiết kiệm thời gian, tăng hiệu suất làm việc tối đa. Hi vọng bài viết ngắn này sẽ giúp các bạn nắm bắt được một vài những tính năng thường dùng nhất với Emmet. Emmet còn rất nhiều những tính năng tuyệt vời đang chờ bạn khám phá, hãy đọc documentation hay xem cheat sheet để hiểu thêm nhé. Chúc các bạn thành công!