Hướng dẫn sư dụng sublime text 2

Hướng dẫn sử dụng Sublime Text 3 ( Phần 1 )

Chào các bạn ,  Mình  là Hợp
Công việc hiện tại của mình là giảng dạy  lập trình web tại Học Viện Công Nghệ VietPro . Do đặc thù công việc giảng dạy có đến 80%-90% học viên  là newbie ở lớp cơ bản  – những người mới bắt đầu tìm hiểu về  lập trình  . Trong những bài học đầu tiên về HTML-CSS mình  thường  sử dụng notepad++ để giới thiệu với mọi người   . Tuy nhiên , mình  quan sát thấy  : sau khi đã  định hình được việc sử dụng các thẻ , thuộc tính của html css  thì các bạn gặp phải  các vướng mắc đó là tốc độ viết mã lệnh rất chậm và không nhớ được tên các thẻ , thuộc tính mà mình cần dùng .
Vậy nên hôm nay mình  quyết định viết ” Chuyên đề  Hướng dẫn lập trình với Sublime Text 3 ”  , hy vọng với Seri chuyên đề này sẽ giúp các bạn viết  website của mình  nhanh hơn , code PRO hơn   .

Trong chuyên đề này mình sẽ hướng dẫn mọi người cách cài đặt  và sử dụng  các plugin thông dụng nhất cả trong thiết kế giao diện với  html – css cũng như lập trình web động với PHP

 I- Giới thiệu 

Sublime Text là một phần mền soạn thảo code đang được rất nhiều lập trình viên sử dụng bởi các tính năng cũng như hiệu năng mà nó mang lại. Không những nó vừa nhẹ, vừa gọn, vừa nhanh mà nó còn hỗ trợ rất nhiều  như plugins, snippets, code auto complete, highlight beautiful, tùy biến giao diện, phím tắt, và rất nhiều thứ khác nữa.

Sublime Text do Jon Skinner tạo ra vào tháng 1 năm 2008, được viết dựa trên ngôn ngữ lập trình Python và C++ . Sublime Text là phần mềm  trả phí, nhưng cho phép dùng thử vô thời hạn .

Sublime Text có một giao diện người dùng trực quan, rất bắt mắt, nhiều chức năng mạnh mẽ và có thể mở rộng thêm thông qua Package Control. Hỗ trợ nhận diện và tô màu từ khoá (syntax highlight) cho hơn 20 ngôn ngữ khác nhau chẳng hạn như HTML, CSS, Javascript, C++, C#, SQL, XML ….

II- Download sublime text 3 

Sublime Text 3 hỗ trợ 3 hệ điều hành gồm Windows , OS  và Linux. Các truy cập vào trang chủ của Sublime Text   . Tiếp theo  các bạn  truy cập download sublime text 3   để chọn phiên bản phù hợp với hệ điều hành của mình rồi download về, mình khuyên các bạn hãy chọn bản portable version , vì bản này  không cần cài đặt nên các bạn chỉ cần tải về và bật lên sử dụng .

1

II  Tổng hợp tính năng và phím tắt thông dụng 

1 Chuyển đổi nhanh giữa các tệp tin

Sublime text hỗ trợ cho chúng ta thao tác chuyển đổi rất nhanh giuẵ các tập tin, bạn chỉ cần bấm Ctrl +P và nhập tên file bạn cần tìm rồi enter thôi.

Sử dụng: Ctrl +P

2 Chuyển nhanh đến hàm trong tệp tin

Giống như trên, để chuyển nhanh đến hàm được định nghĩa trong tệp bạn chỉ cần sử dụng phím tắt Ctrl +R gõ tên hàm mình cần tìm hoặc Ctrl+P rồi gõ @<tên hàm cần tìm>

3 Chuyển nhanh đến dòng số # trong tệp tin

Để chuyển nhanh đến dòng thứ # trong tệp bạn chỉ cần sử dụng phím tắt Ctrl +G gõ vị trí cần đến hoặc Ctrl +P rồi gõ :<vị trí dòng>

4 Đa con trỏ ( Mutil-editor )

Đây là tính năng độc đáo của Sublime text, nó hỗ trợ chúng ta nhiều con trỏ chỉnh sửa cùng 1 lúc.

  • ctrl + D: Chọn cụm từ khác giống cụm đang chọn
  • ctrl + click: click vùng nào thì vùng đó sẽ tạo ra con trỏ mới
  • ctrl + shift + falt + enter: Tìm trong tệp và chọn tất cả các cụm giống cụm đang chọn.

5 Snippets

Đây cũng là tính năng thú vị trên Sublime Text 3, cái này nó giống như gõ tắt nhưng nâng cao hơn ví dụ mình muốn gõ một div html sử dụngbootstrap thay vì mình gõ <div class="col-sm-col-12">...</div> thì mình chỉ cần gõ .bs3-sm-col-12 (phải cài đặt package Bootstrap) và bấmTab 1 cái nó sẽ ra <div class="col-sm-col-12">...</div> ngay. Bạn có thể tự tạo Snippets riêng của mình hoặc tải về trên Package.

Sublime Text hỗ trợ chúng ta lưu lại 1 đoạn code nào đó và xuất nó ra nhanh bằng từ khóa mà chúng ta định nghĩa. Ví dụ: trong Javascript các bạn phải thường viết câu lệnh : return false; để stop xử lý hoặc console.log(); để test kiểm tra giá trị…thì trong quá trình làm việc, test lỗi các bạn sẽ viết đi viết lại rất mất thời gian.

Chỉ cần gõ: rf rồi bấm Tab là sẽ ra ngay return false; hoặc csl rồi bấm Tab là sẽ ra console.log(); cho các bạn

Để thực hiện, các bạn vào menu Tool > New Snippet. Các bạn sẽ thấy 1 đoạn mẫu như thế này:

<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!– Optional: Set a tabTrigger to define how to trigger the snippet –>
<!– <tabTrigger>hello</tabTrigger> –>
<!– Optional: Set a scope to limit where the snippet will trigger –>
<!– <scope>source.python</scope> –>
</snippet>

Chúng ta sẽ làm ví dụ cho câu lệnh return false; nhé. Các bạn sửa lại như thế này:

<snippet>
<content><![CDATA[
$1
return false;
]]></content>
<tabTrigger>rf</tabTrigger>
<scope>text.html</scope>
</snippet>

Nội dung chúng ta sẽ sửa hoặc thêm mới sẽ nằm trong cặp thẻ <content></content> . Trong đây $1 là thể hiện sau khi các bạn bấm Tab thì con trỏ chuột sẽ nằm ngay vị trí đó , bên dưới là câu lệnh mà các bạn cần, ở đây là return false;
Câu này: <tabTrigger>rf</tabTrigger> là khai báo từ khóa viết tắt của chúng ta, ở đây là gõ rf
Câu này: <scope>text.html</scope> là khai báo kiểu loại file sẽ được áp dụng vào, ví dụ: html,php,css…
Các bạn lưu lại, mặc định đường dẫn lưu file sẽ là:

C:\Users\Nhat Nam\AppData\Roaming\Sublime Text 3\Packages\User

Với quy tắc tên file phải là: ten-gi-do.sublime-snippet. Lưu lại và các bạn có thể test để kiểm tra

6 Projects

Projects là một trong các tính năng không thể thiếu trong công việc của mình khi làm việc với Sublime Text. Projects sẽ tạo cột cây các thư mục bạn đang làm việc vào cột bên, gíup bạn các thao tác thêm/sửa/xóa/chuyển đổi một các nhanh chóng.

Khi sử dụng Projects, bạn sẽ không cần phải vào trong Nautilus/Windows Explorer hay Finder để có thể quản lý Projects. Chỉ đơn giản, chọn thư mục đó và vứt vào Sublime Text.

 

7 Packages/Plugins

Package Control

Package Control là phần không thể thiếu cho Sublime Text. Có Package Control bạn mới có thể cài đặt các Plugins mà mình sắp liệt kê bên dưới.

Đầu tiên bạn truy cập vào trang web này để cài đặt nhé hoặc xem hướng dẫn dưới đây:

Trên bàn phím bạn bấm ctrl + ` (Phím này kế phím số 1, dấu ~), sau đó sao chép đoạn code bạn thấy trong trang web trên dán vào ô command rồi enter.

Sau đó, bạn chỉ cần khởi động lại Sublime Text, rồi vào Command Palette như mình hướng dẫn trên, gõ Install Package rồi click vào, tìmPackage mình cần và Enter thôi.

8 Xóa nhanh dòng trong Sublime Text

Để xóa nhanh 1 dòng trong Sublime Text, các bạn dùng phím tắt: Ctrl + Shift + K

Mình thì hay dùng: Ctrl + X cho nhanh. Thật ra đây là Cut nội dung vào clipboard nhưng do nó có 2 phím nên bấm cho nhanh hơn

9 Chọn nhanh nội dung trong thẻ

Ví dụ các bạn lười quét chuột để chọn hết nội dung trong cặp thẻ <div> như hình:
select-all-sublime-text
Thì chỉ cần để con trỏ chuột bên trong và bấm Ctrl + Shift + A là sẽ chọn hết bên trong cho các bạn

10 Chuyển nhanh dòng – nhiều dòng lên xuống

Ví dụ các bạn có 3 dòng <li> như sau:

<ul>
<li>Anh yeu em</li>
<li>Va rat nho em</li>
<li>Nhieu lam</li>
</ul>

Các bạn muốn chuyển dòng <li>Nhieu lam</li> lên giữa, thì chỉ cẩn để con trỏ chuột ngay dòng <li>Nhieu lam</li> và bấm phím tắt: Ctrl + Shift + Phím lên. Các bạn cũng có thể áp dụng cho nhiều dòng di chuyển cùng lúc như vậy

11 Chọn nhanh các phần giống nhau

Các bạn xem hình sau:

chon-nhanh-sublime-text

Ở đây nếu các bạn muốn sửa nội dung trong phần class của các class giống nhau, thì dùng chuột quét chọn dòng class đầu tiên, sau đó bấm Ctrl + D là nó sẽ chọn class giống y như vậy tiếp theo, bấm Ctrl + D cho đến khi nào muốn ngưng . Để sửa cùng lúc thì các bạn bấm phím mũi tên qua lại để sửa

Hoặc có 1 cách khác nữa là các bạn bấm giữ phím Ctrl và click chuột hoặc quét chuột vào nhiều chổ mà các bạn cần, quá tuyệt so với các trình editor khác

Và thêm 1 cách nữa là các bạn quét chọn toàn bộ các phần trên hình, sau đó bấm Ctrl + Shift + L là nó sẽ chọn hết các dòng với con trỏ chuột ở cuối các dòng hoặc đầu các dòng, rất thuận tiện cho việc sửa nhiều thành phần cùng lúc.

Cách mình mới update nữa là: nếu bạn dùng MAC , thì click 2 cái vào chữ, bấm Command + Control + G , sẽ chọn đc hết các chữ giống trong toàn bộ file, ở Window thì là Alt + F3

12 Nhân nhanh phần tử

Ví dụ các bạn có dòng:

<li>Anh yeu em</li>

Và muốn nhân nó lên nhanh mà không cần copy hoặc pass, các bạn để con trỏ chuột ngay dòng đó, bấm Ctrl + Shift + D nó sẽ nhân ra y như vậy cho các bạn

13 Comment nhanh cho dòng – nhóm dòng

Các bạn quét chọn dòng hoặc nhóm dòng cần Comment, bấm:

  • Ctrl + /  để comment cho 1 dòng
  • Ctrl + Shift + / để comment cho nhiều dòng

 

…còn tiếp

Hướng dẫn sử dụng Sublime Text 3 ( Phần 1 )
5 (100%) 7 votes
Hai thẻ thay đổi nội dung bên dưới.
Chia sẻ kiến thức, kinh nghiệm liên quan đến lập trình và thiết kế website là niềm vui của mình. Nếu có câu hỏi hay thắc mắc làm thế nào để làm website bán hàng, giới thiệu công ty thì liên hệ mình nhé. SĐT 01632 434 165, Mình sẽ hỗ trợ hết sức có thể. Thân Ái và Quyết Thắng

Ý kiến của bạn

Fanpage Facebook
Danh mục
Lưu trữ
Bài giảng mới

Call Now