• 5305 fans
  • 1036 reader
  • 138 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......

  • Chu Tước

    Cảm ơn bài viết của anh. Anh oi cho em hỏi cái này có hỗ trợ CSS3 không

  • daicamrtran

    Bạn ơi ! Sao mình gõ nó không nhắc vậy bạn??

  • chíp

    Anh mẫn cho e hỏi :

    - cái phần mềm a làm video này tên là gì thế ạ ?

  • Chandler

    Dùng Aptana cũng hay, mình đang dùng, rất thích nó :D , free, giao diện đơn giản, đẹp :”>, có cả các plugin như Zen Coding, WordPress, Jquery,… rất tiện.
    Aptana

  • http://www.cntt.eazy.vn SONGOKU

    Cho E Hỏi Phần Mềm Này Free Hay Đóng Phí Vậy :D

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

      Thích thì đóng phí, ko thích thì thôi. Nó không bắt buộc mình đóng.

  • Nguyễn Lê Trung

    anh ơi cho em hỏi thêm cái này nữa ạ, khi em cái xong các plug-in trên thì em click vào install Package thì nó không hiện ra cái gì nữa ạ, anh có thể chỉ em cách khắc phục không ạ, ctrl + shift + p thì vẫn lên nhưng cái đó không install Package. khi em mở Preference -> Package control thì vẫn bình thường, các chức năng khác vẫn bình thường chỉ có mỗi install Package thì khi load xong nó cũng không hiện lên gì cả ạ

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

      Lỗi lạ, chẵng biết chữa sao cả. ^^!

      • Nguyễn Lê Trung

        em gỡ cài 2 lần rồi, cứ cài xong các plug-in ở trên kia là nó bị như vậy, không install thêm được plug- in nào nữa cả chán quá

        • http://hongducdesign.com Duc Hong

          cách tốt nhất là bạn remove toàn bộ sublime text 2, và xóa lun folder setting của nó rùi thử lại xem.

  • Nguyễn Lê Trung

    anh ơi em hỏi chút ạ, khi em cài plugin HTML5 thì nó báo lỗi và không cài dc ạ anh có thể giúp em không

  • Thành Phúc

    Hiện tài em đang sử dụng windows 7 ultimate 64 bit. Đã cài thành công sublime text 2 và package control. Nhưng không hiểu sao em chỉ có thể cài 2 plugin prefixr và alignment, còn các plugin còn lại thì chỉ hiện dòng installing… rồi mất đi, không hiện dòng installed… Anh Minh Mẫn có thể giúp em sửa lỗi này được không?

  • hoacuong

    cho e hoi chut trong cai ST nay minh co the tim mot function hay mot class duoc dinh nghia o file khac trong project khong vay. giong trong eclipse khi di chuot vao mot function roi an Ctrl no se tu dong load len function do

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

      Chức năng này thì ST2 chưa phát triển, nó chỉ tìm dc function trong cùng 1 file thôi. ^^!

  • ItsJ

    cứ gõ tên hàm hay class là nó nhắc code nhìn khó chịu quá, ai chỉ mình cách tắt nó đi nhưng vẫn giữ nguyên 1 vài cái như lorem hay html với , thanks

    • http://harkable.com Mark

      Mình Fetch 1 Package trên Github vào 1 Folder rồi.

      Mình sửa 1 file nào đó và Save lại.

      Làm sao mình up lên lại tương ứng với Repository của mình vậy các bạn?

  • superbibi

    Cám ơn bạn rất nhiều, bài viết và ứng dụng rất hữu ích

  • Nguyen Trong Nhan

    Cám ơn bạn bài viết
    cho minh hỏi sao trong Video hướng dẩn có phần bấm tổ hợp phím
    ctrl+shift+p vào tùy chọn Fecth rồi vào signle file trong đó mình thấy bạn hiện rất nhiều tùy chọn nhu là HTML4 Structor, reset css v.v….
    Trong khi mình chỉ hiện có Jquery.
    vậy làm thế nào mình mới có được thêm những tùy chọn đó
    Mọng được sự giúp đở của bạn

    thanks

  • thanh dat

    Anh Mẫn cho em hỏi. Em cài đặt gói Packed Control như video hướng dẫn nhưng khi dán code vào sublimetext thi không thấy thông báo gì cả, reset lại sublime và vào preference -> nhưng không thấy packed control. em dùng bản win7 64bit, không biết có lỗi gì không. mong mọi người giúp đỡ

  • ton that tuan anh

    Sao cài html5 nó báo lỗi nhỉ! Mọi người giải quyết giúp mình vấn đề này với nhé! Thanks cả nhà!

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

      Lỗi báo như thế nào vậy bạn nhỉ? Gửi lên để tớ tìm hỉu thử xem.

      • ton that tuan anh

        http://anlapphat.com.vn/error.jpg

        Nó hiện thông báo như thế này anh Mẫn ơi!

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

          Theo như lỗi thông báo thì nó chỉ bị lỗi ở snippet label thôi, các thành phần # vẫn ok.
          Cậu có thể kiểm tra lại bằng cách gõ header rồi tab xem nó có ra tab , nếu ra là ok đó, còn ko ra thì cậu có thể package control>list package xem coi có package nào tên là HTML5 ko, nếu chưa thì đành bó tay. ^^!

          • ton that tuan anh

            Mình làm được rồi! Cám ơn cậu nhé! Chúc cho trang web của mình sẽ ngày càng lớn mạnh, phát triển và có nhiều bài viết hay để chia sẽ. Mình rất thích trang web này. Cám ơn tất cả mọi người!!!

  • http://hoangvanhai.co.cc hoangvanhai

    cho em hỏi chút xíu..? ….nếu xóa mất thanh menu giờ muốn mở lại thì làm ntn..? thanks …!

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

      Nhấn Alt để menu hiện ra lại. ^^!

  • http://hitdetech.vn/ hitdetech.vn/

    Cám ơn bài viết của anh. Em cũng là một coder, em mới code xong website http://hitdetech.vn

  • nhat

    anh cho em hỏi phải cài package nào để sổ các thuộc tính trong html

    • http://levinh.net Lê Quang Vinh

      HTML đấy bạn

  • http://levinh.net Lê Quang Vinh

    Cái này free hay thương mại đấy anh

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

      Mua cũng dc, mà ko mua cũng chẳng sao cả. Khi save chừng 15-20 lần gì đó thì nói hỏi có mua ko? Nhấn cancel thì xài típ nếu thích thì mua, khoảng 54$ thôi.

      • http://levinh.net Lê Quang Vinh

        Cảm ơn ông anh. Chắc dùng vậy thôi, làm gì có tiền chứ :( (

        • http://ppblog.biz Boommad

          Hix 54$ thôi nghe nhẹ nhàn thế bạn

  • ruoitrau

    Hi all,

    Mình cài bản 64bit thì ngon rồi, nhưng khi cài thêm plugin html5 và jquery thì báo lỗi, bạn nào có cách khắc phục chỉ mình với, tks!

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

      Tuy máy mình chạy hệ điều hành 64bit nhưng mà mình cài ST bản 32bit, chạy bình thường, cái HTML5 và Jquery ko thấy phát sinh lỗi.

  • Jack

    Sao install cái HTML5 toàn báo lỗi a nhỉ :(

  • http://tanuyu.tumblr.com Tuấn

    Cho e hỏi tí là hôm bữa xem cái video của cái này nó có cái gõ tắt: gõ một chữ thì ra nguyên đoạn ko biết xài plugin nào nhỉ :-? chắc là plugin chứ ko phải phần mềm riêng đâu ạ @@

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

      Ra nguyên đoạn, là đoạn gì nhỉ? Nếu ý cậu nói là lorem thì cứ gõ lorem rồi tab là nó ra 1 đoạn paragraph cho mình.

      • http://tanuyu.tumblr.com tanuyu

        Kiểu viết tắt ý a @_@ ví dụ như gõ htmltemplate thì nó ra hết …, mình qui định hết á!

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

          Cái đó là shortcode do tự mình viết, mà mình thì chưa mò cái ST2 dc tới mức đó. Để khi nào rảnh, mò mấy chức năng nâng cao của nó, như viết plugin hay shortcode chẳng hạn. ^^!

  • http://xuanchien.herobo.com Xuân Chiến

    Anh có thể hướng dẫn em và mọi người cách buil và debug chương trình trong Sublime Text 2. Em vừa mới cài nên chưa rõ về 1 số tiện ích của ST2. Mong anh và mọi người giúp đỡ

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

      Nó nằm ở menu tool đó. Nhưng mà theo tớ nghĩ nếu đang lập trình phần mềm thì xài mấy cái editor #, chứ ST2 vẫn chưa kham nổi đâu.

      • http://xuanchien.herobo.com Xuân Chiến

        Em chạy 1 file html thôi mà sao không chạy được, vào tools chọn build cũng bị vô hiệu, em muốn chạy file html ra trình duyệt thì làm thế nào ạh, khi em chạy build nó báo “no build system” anh ạh, Làm sao đây anh

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

          Mình thì cũng ko rành lắm về chức năng build này, nhưng mà 1 file html thì cần chi build chi rắc rối. Save lại rồi vào folder vừa save mở lên coi là dc mà. ^^!

  • http://xemboi.us/ xem tu vi

    thủ thuật này mới quá mình chưa có cơ hội tìm hiểu trước đây

  • http://hongducdesign.com Duc Hong

    Hì mình cũng chỉ mới chuyển sang xài chú này đc tầm 4 tháng, thấy hiệu quả làm việc nhanh và cải thiện hơn hẳn so với lúc còn xài eclipse. Một plugin khác đáng chú đó là Trailling Space, giúp xóa bớt các khoảng trắng dư thừa trong quá trình code, mình nghĩ bác Mẫn cũng nên đưa vào sẽ đủ bộ hơn ;)

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

      Ý, cái này hay à. Có khoảng trắng dư nó hightlight lên. Thêm cái phím tắt nữa là ok. Để update thêm bài cho bài viết sinh động.

      • http://hongducdesign.com Duc Hong

        hì thiệt ra bản thân của sublime cũng có tính năng này nhưng chỉ thực hiện khi save file. Plugin này chỉ giúp cho bạn xóa khoảng trắng thừa và nó chưa save. Khác biệt là vậy :) ), nhưng bản thân mình thì thói quen cũng bấm Ctrl S cho chắc cú =)) tiện cả 2 :D

  • Anh Tài

    Em có 1 câu hỏi là :
    khi e cài plugin :Nettuts Fetch
    thì nó chỉ hiện trong single file mỗi cái jquery thôi. ko có css cũng như html …
    Cám ơn anh

    • Anh Tài

      a có thể chia sẻ luôn link trong single file được không anh ?
      “files”:
      {
      “jquery”: “http://code.jquery.com/jquery.min.js”,
      },

      • http://hongducdesign.com Duc Hong

        Phần đường dẫn đến các file trong đó thì cũng tùy mục đích của mỗi người thui bạn, nên chắc chắn sau này khi nhu cầu cần thiết sẽ thêm / bớt. Nếu bạn để ý kỹ thì link trong file single thì hầu hết là từ 1 host riêng của người viết. Bạn cũng có thể làm tuơng tự như vậy thui, ví du như reset css bbạn có thể thêm vào với link sau :
        “reset css” : “http://meyerweb.com/eric/tools/css/reset/reset.css”

  • Tatsuya

    Kết cái này mỗi cái gọn, nhẹ, còn về coding thì không bằng zend studio. Dù sao cũng là 1 editor rất hứa hẹn, hy vọng sẽ hoàn thiện các plugin hơn nữa sẽ chuyển qua dùng hẳn :D

  • http://html5tip.com Dennis Dinh

    @Luân: Zen Coding lỗi trên ST2 quá nhiều. Nói chung tùy người tùy việc, mình thì cứ Zend Studio & Notepad++ thôi. Chờ ST2 cải tiến thêm chút nữa

  • http://tanuyu.tumblr.com Tuấn

    Hôm bữa thấy cái này trên tutplus thấy hơi đơn giản nhưng h biết xài plugin thấy rất ngon :x

  • http://luckyluu.tumblr.com Luckyluu

    Để thử xem sao, thix cái giao diện nhìn cool

  • Luân

    Cảm ơn anh đã chia sẻ! :)
    Em cũng sử dụng ST 2 một thời gian và thấy rất hay. Em xin bổ sung chút:
    + Nếu ai muốn sử dụng tính năng mới nhất thì có thể tải từ: http://sublimetext.com/dev
    + Phần plugin, e thấy có thêm Zen Coding cũng khá hay và có thể tải trực tiếp từ Package Control
    :)

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