Lỗi dùng phím tắt bootstrap trên sublime text 3 năm 2024

Sublime Text từ lâu đã nổi tiếng vì sự đơn giản, hỗ trợ nhiều Packages, vậy Package là gì ? Package là những gói mở rộng được cộng đồng đóng góp giúp việc quản lý và code một cách đơn giản hơn, chúng ta có thể tải trực tiếp từ bên trong Sublime Text và cài đặt nó một cách đơn giản.

Trang chính thức Package của Sublime Text: https://packagecontrol.io/ ở đây bạn có thể tìm thấy những package phổ biến, mới, đang hot nhất.

Cài đặt Package Control

Cách 1: sử dụng phím tắt

Bạn nhấn tổ hợp phím Ctrl + Shift + P ( Command + Shift + P ) và gõ Install Package: Chọn Package Controll:: Install Package

Cách 2: sử dùng CLI của Python

Trên thanh công cụ bạn vào:

View > Show Console

Phím tắt Ctrl + `

Truy cập vào: https://packagecontrol.io/installation bạn sẽ thấy đoạn mã sau:

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Copy đoạn mã trên và dán vào Console sau đó nhấn Enter để cài đặt

Khởi động lại Sublime Text, như vậy bạn đã cài đặt Sublime Text thành công.

Những Package cần thiết sau khi cài Sublime Text

1. Emmet

Đây là package hỗ trợ cho bạn trong việc viết code HTML, HTML quả là cơn ác mộng đối với người lập trình vì các thẻ cứ lặp đi lặp lại giống nhau vì thế Emmet ra đời để giúp các lập trình viên có thể viết code nhanh hơn, thay vì ngồi gõ cả đoạn HTML thật là nhàm chán thì bạn chỉ cần gõ b + tab

Cài như thế nào ?

Bạn nhấn tổ hợp phím Ctrl + Shift + P ( Command + Shift + P ) và gõ emmet:

Sử dụng như thế nào ?

Để có thể sử dụng tốt Emmet bạn cần đọc qua hướng dẫn document tại đây

https://docs.emmet.io/cheat-sheet/

Cách dùng

nav>ul>li + Tab

2.Sidebar Enhancements

Đây là package như là cánh tay phải đắc lực của Sublime Text, nó hỗ trợ cho bạn rất nhiều thứ, từ tạo file, thư mục, tìm kiếm, copy path, paste, mở file bằng trình duyệt và rất nhiều thứ chờ bạn khám phá.

Cài như thế nào ?

Bạn nhấn tổ hợp phím Ctrl + Shift + P ( Command + Shift + P ) và gõ SidebarEnhancements:

Sử dụng như thế nào ?

Chuột phải vào thư mục, file trong Sidebar mà bạn muốn thao tác.

3. SublimeCodeIntel

Khi code, đôi khi bạn không thể nhớ tất cả các tính năng của một function việc được nhắc giúp đó giống như cái phao vậy, và SublimeCodeIntel chính là cái phao mình muốn nói đến, nó hỗ trợ cho bạn việc hiển thị, gợi ý khi bạn code, như các functions, biến, object, string ...

4. Sub­limeLin­ter

Đôi khi code bạn quên dấu chấm hoặc quên đóng ngoặc và save lại chạy thì bị báo lỗi và không biết lỗi ở đâu. Nhưng với package này, khi bạn gõ sai, hay quên dấu nó sẽ báo đỏ cho bạn biết luôn, tránh mất thời gian quý báu của bạn.

Command palette gíúp chúng ta thay đổi môt số thiết lập, gọi các lệnh của các plugin-package, thay đổi định dạng màu ngôn ngữ, tạo projects mới và nhiều hơn thế nữa,

Ở đây mình ví dụ ở Package Git nhé, mình có thể sử dụng các lệnh branch, commit, push, và pull all trên command palette một cách dễ dàng.

Sử dụng: Ctrl + Shift + P

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

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õ @

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õ :

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 + f và alt + enter: Tìm trong tệp và chọn tất cả các cụm giống cụm đang chọn.

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ụng bootstrap thay vì mình gõ

thì mình chỉ cần gõ .bs3-sm-col-12 (phải cài đặt package Bootstrap) và bấm Tab 1 cái nó sẽ ra ``ngay. Bạn có thể tự tạo Snippets riêng của mình hoặc tải về trên Package.

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.

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ìm Package mình cần và Enter thôi.

Sau đây là một số Package hay mà mình đang sử dụng:

Alignment

Căn lề đều tự động cho code.

Cách sử dụng: ctrl + alt + a

Colorpicker

Hiện bảng màu chọn và lấy mã hex.

Cách sử dụng: ctrl + shift + c

Emmet

Gõ HTML, CSS nhanh hơn.

DocBlockr

Hỗ trợ bộ PHPdocs, bạn chỉ cần gõ / và tab nó sẽ tạo ra vùng khai báo, các khai báo trong PHPdocs đều hỗ trợ đầy đủ, sử dụng như Snippets nhé.

Git

Công cụng ai cũng quen rồi sử dụng bằng Command Palette nhé.

Một số anh em của nó: Gist, GitGutter,…

Vintage

Package hay dành cho dân dùng vim là package vintage mặc định cài sẵn nhưng disable.

SidebarEnhancements

Thêm công cụ quản lý tập tin và thư mục đầy đủ hơn trong cột bên Projects

Một số Snippets hay dùng

Đây là một số Snippets hay mà mình sử dụng nhiều, tuy nhiên bạn hãy cài đặt cái nào cần thôi nhé: WordPress, Laravel, Jquery, HTML5, CSS3, SASS, Bootstrap….