• 4807 fans
  • 1036 reader
  • 122 followers
Hướng dẫn dùng Sublime text 2
  • Tutorial Details
  • Độ khó: Trung Bình
  • Thời gian: 16 phút
  • File size: 56 Mb

Sublime text 2 là một editor khá mới, và nó vẫn còn trong giai đoạn thử nghiệm. Tuy nhiên, nó đã cung cấp một hiệu suất làm việc với các tính năng rất tuyệt vời, làm mình phải chuyển từ Dreamweaver sang dùng nó.

Sublime text 2 bản thân nó đã hổ trợ rất nhiều thứ cho các nhà phát triển web, và ngoài ra nó còn có một hệ thống thư viện Plugins rất phong phú và đa dạng. Trong bài hôm này, mình sẽ giới thiệu với các bạn về cách sử dụng cơ bản và chuyên sâu về sublime text 2.

Cách sử dụng

Thời lượng: 16 phút
Screen size: HD 720p
Download: MediaFire
File Size: 56 Mb

Plugin cần thiết

Đây là danh sách các plug-in cần phải có khi sử dụng Sublime text 2, nó sẽ giúp cho các bạn đỡ tốn 1 khối thời gian đấy. Cách sử dụng thì mình đã hướng dẫn trong video phía trên. Ngoài ra thì còn rất nhiều phugin khác, các bạn có thể xem thêm tại đây: http://wbond.net/sublime_packages/community

  • Sublime Prefixr (Ctrl+Alt+X)
  • Sublime Alignment (Ctrl+Alt+A)
  • Jquery
  • Jquery snippets
  • Nettuts Fetch
  • Sublime CodeIntel
  • Tag
  • Prefixr
  • Google search
  • WordPress
  • HTML5
  • Indent Guides

Lưu ý: Các plugin không nên dùng: Color HighlighterLive CSS. Hai plug-in này gây ra lỗi cho bản sublime text 2 trên nền windows, khi cái đặt các bạn nên lưu ý.
Ngoài ra, khi cài các plugin các bạn nên xem nó hổ trợ phiên bản dành cho hệ điều hành nào nhé.

——————————-UPDATE—————————

Các plug-in nào mới mình sẽ update tính năng & cách sử dụng ở đây.

Trailling Space: Giúp bạn phát hiện bỏ đi những khoảng trắng dư thừa trong quá trình code. Sau khi cài đặt thì bạn có thể nhận thấy rằng các vùng có khoảng trắng dư nó sẽ tự hightlight lên.

Ngoài ra, bạn cũng có thể tạo thêm phím tắt để khi bấm vào phím tắt, nó sẽ xóa tất cả các khoảng trắng dư thừa. Sau đây là cách thực hiện:
1/ Bạn vào menu Preference > Key Bindings – User
2/ Khi nó mở ra một tab mới, trong tab mới sẽ chỉ có dấu [ ] (ngoặc vuông). Các bạn vào giữa dấu [ ] ngoặc vuông và dán đoạn code dưới đây vào:

{ "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" }

Sau đó, bạn khởi động lại ST2 và nếu cần xóa các khoảng trắng dư thừa thì cứ dùng phím tắt ctrl+shift+t

Võ Minh Mẫn Website facebook twitter user_email

Nghề chính là chém gió, quăng bom và ném lựu đạn. Nghề phụ là cắt cỏ, chém chuối, cưa cây......

  • comando

    cho hỏi. nếu muốn test 1 project thì vào đâu. hơi gà, hehe

  • http://www.facebook.com/anh.vu.35 Anh Vu

    Cho hỏi muốn tạo template html mẫu hoặc reset css mẫu vào trong đó phải làm sao? Mình phải gõ đi gõ lại mấy cái đó phiền phức quá. Mong các bạn giúp đỡ

  • Lê Đại

    Anh cho em hỏi là làm sao mà khi anh gõ div + TAB thì có cả comment gắn kèm vậy anh. Và còn có cả tự động chèn id, class vào nữa
    Em xin cảm ơn

    • Sn0w

      bạn vào menu preferences => browser package => kiếm thư mục html5 =>Elements, các tag đều được định nghĩa trong này, bạn có thể tùy chỉnh template của các tag theo ý thích ^^!

      • Lê Đại

        cảm ơn bạn ,mình làm được rồi

  • nguyễn

    Windows – also available as a portable version minh down bản này về, và add plugin của nó vào sao k có phần đó hả bạn. (máy ở nhà)

    Còn ở cty thì mình add plugin Html 5 vào mà khi gõ xong tab nó k xổ ra hả bạn. Mình gõ theo ví dụ như thế này: nav>ul>li*5>a[href="#"] k xổ ra như 1 video có bạn hướng dẫn làm SASS. Mình mới nhập môn với html và css. Mong bạn chỉ giúp. Thanks Bạn

    • http://www.facebook.com/Sand1202 Nguyễn Quốc Hoàng

      cái đó là plugin Emmet bạn à, ngoài chức năng trên thì Emmet còn thay được cả Lorem và prefixer nữa

  • Hồng Tạ

    Cái phút thứ 10:45 gọi là code snippets :D , good tutorial :)

  • name

    Plugin 8 và 1 đều là prefixr là sao nhỉ

  • tranuybao023

    sao mình làm hok ra cái Sublime Alignment và cái Sublime Prefixr mình cài đầy đủ lun đó

  • Trí Huỳnh

    Góp ý bổ sung thêm plugin DocBlock (khá hữu ích) :D
    https://github.com/spadgos/sublime-jsdocs

  • Sn0w

    đã tìm ra cách đánh div và nhấn tab thì nó ra cả id và class, bạn Mẫn có thể share thư mục Elements của plugin HTM5 được không

  • nông dân

    sao e chỉ tìm dc 2 plus đầu thui nhỉ các plus sau thì gõ vào thì ko ra có ai trả lời cho e ko ah? em đang cần lắm

  • Thắng

    Sao mình xài Sublime Prefixr (Ctrl+Alt+X)
    mà nó không hiển thị ra
    border-radius:
    Còn lại thì hiển thị được hết. AE nào gặp lỗi này hướng dẫn giúp

  • Thang

    Sao mình install cái này Sublime Prefixr (Ctrl+Alt+X)
    không có vậy nhỉ. có cài được cũng không xài được là sao ta.

  • bjhfdkbgkreg

    làm sao để tích hợp codeigniter Framework vào sublimeText2 vậy bạn

  • Azuo

    Bài viết rất hay, mình đang dùng phpDesigner. Nhưng thấy cái này hay và đỡ tốn thời gian hơn nhiều.

    Thanks bạn.

  • ô đi chê bê

    cho hỏi IDE này có hỗ trợ cho joomla không

  • Minh

    Hi bác,
    Thằng Sublime Text này nó có thể cho mình chạy một web trên localhost được không Bác Mẫn ^^ vd hiện tại mình đang làm web thì trong web có một số Servlet bắt buộc phải chạy server thì nó mới OK. vậy mình làm điều này như thế nào vậy Bác ^^

  • Thanh4890

    Cảm ơn anh Mẫn, phần hướng dẫn rất dễ hiểu!

    P/S: Các bạn có thể cài thêm plugin AdvancedNewFile để tạo file rất nhanh bằng phím tắt Ctrl + Alt + N, sau đó gõ tên file, ko cần dùng chuột nên cũng tăng tốc độ làm việc lên 1 chút :D

    • Thanh4890

      Các bạn nên cài thêm cả Plugin QuickFileMove, hỗ trợ rename và move file rất nhanh bằng phím tắt Ctrl + Shift + R, cũng ko cần dùng chuột, tăng hiệu quả công việc lên 1 chút nữa. Chúc các bạn làm việc hiệu quả!

  • Minh Tam

    Hi Bác Mẫn ^^
    Lại phải hỏi bác 1 cái nữa là hiện giở mình đang code với thằng Apache Ant nhưng thằng sublime text 2 này hình như nó không hỗ trợ các tag của thằng Ant (file XML). Vậy bác Mẫn có cách nào hay plugin nào hỗ trợ code về thằng Ant này không (vd: Ctrl + Space thì nó hiện ra các tag đó bác ^^! )

    • http://minhman.me Võ Minh Mẫn

      Chịu thôi ạ, mỗi thằng có điểm mạnh, yếu # :(

      • Minh Tam

        Dù sao cũng thank Bác nhiều ^^
        P/S: nhìn avatar bác “gấu” quá >”< …..!

  • phungvc

    Mình thấy cái này cũng hay, nhưng ko biết nó có chức năng khi click vào 1 hàm thì nó sẽ nhảy đến hàm đó

  • Minh Tam

    Bạn cho mình hỏi sao mấy cái tag như là div khi mình đánh “div” sau đó “tab” thì nó lại không có một số thuộc tính như là class=”" id=”" như của bạn vậy ?!?! Mình có thể config nó như thế nào để có được nó ?!?!
    P/S: video hay quá bạn ơi!!! ^^ Thanks

    • http://minhman.me Võ Minh Mẫn

      Bạn cài thêm plugin “zen coding” vào nhé :)

      • Minh Tam

        Thanks Bác Mẫn nhiều nhiều ^^

    • http://facebook.com/loxuanthanh Thành

      Bạn cài emmet đi, đây là plugin cao cấp hơn zend coding đấy :D

      • anhnm

        tình hình là sau khi cài cả “zen coding” lẫn “emmet” thì ấn tab đều không ra class và id như trong video của bác Mẫn, ko biết lý do tại sao? bác nào help mình cái

        • vnlebaoduy

          Em cũng vậy đã cố thử nhưng ko dc @@

  • Nguyễn Minh Hải

    e sử dụng cuốn tổng hợp về jQuerry lâu rồi mà bây giờ mới biết nó là sản phẩm của Izwebz, rất chất lượng đấy ạ, cảm ơn Izwebz rất nhiều :)

  • http://No Hồng Trầm

    Hi! chủ thớt
    Mình đã thử add một số Plugins của sublime text 2 trên win7 rồi mà sao vẫn không được như trong video bạn hướng dẫn.
    bạn có thể chỉ cho mình cách cấu hình một số plugins của sublime text 2 như là HTML5, sublimelinter… hay không. Thanks!

  • http://ablogit.com tuankma

    Cho mình hỏi..UBUNTU ấy..là sao để gõ được tiếng Việt trong ST2 nhỉ..mình dùng unikey rồi nhưng không được ??

  • Thiện Nhật

    Sao mình cái plugin HTML 5 rồi nhưng mỗi lần tab nó không hiện thêm comment như trong video nhỉ ? bạn giúp mình với .

  • Thiện Nhật

    Sao mình cài đầy đủ plugin như trên sao khi dùng nhanh thẻ div thì nó không hiện thêm phần comment như trong video nhỉ ? Mình thử xóa đi cài lại 2 lần nhưng vẫn thế . Không biết bạn có giới thiệu thiếu plugin nào ko ?

  • Anh Duy

    Các bạn nào biết cách Encoding UTF-8 trong Sublime bày mình với . Mình kiếm hoài không thấy chức năng Encode nằm ở đâu cả.

  • JayC

    Nhưng nó thua dreamwaver ở điểm ko hiển thị hình ảnh để mình chỉnh sửa code

    • JohnFred

      Bạn nên tìm trong izweb 1 bài viết nói về tính năng WYSIWYG, ý của bạn có phải là kéo thả code ?

    • Trung

      bạn vào file save with encoding là có mà

  • http://www.thietkeminhphi.com huyhieu

    chào mm mình cài plugin htm5 thì nó báo lỗi sau đó mình remove ra và cài lại thì ok.
    mình thấy trong video của bạn phần plugin html5 khi dánh từ html -> enter thì nó tự sổ ra một loạt , cái đó là bạn tự định nghĩa hay khai báo là nó có!

  • nguyễn chí thanh

    còn một plugin rất hay để code nhanh html là zen coding.
    chỉ cần tìm phần ZenCoding trong “Install package” là ra.

    sử dụng như thế này:
    ul>li.h*2 và ấn ctrl + enter thì ra thế này:

    ngoài ra zen coding còn hỗ trợ rất nhiều editor: xem thêm tại đây
    http://code.google.com/p/zen-coding/

  • http://www.izwebz.com Chu Tước

    Cảm ơn bài viết của anh. Anh ơi cho em hỏi dùng CSS3

    • Vu Le Tuan

      E làm ko được .a chỉ e cụ thể hơn được ko

Izwebz store
Izwebz store

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives