Có nhiều phần mền để chúng ta viết code một trong những phần mềm được đánh giá cao đó chính là sublime text. Vậy để căn chỉnh code trong sublime text là một trong những việc mà nhiều bạn quan tâm để cho bài code mình hiển thị một cách dễ nhìn. Nhưng không phải ai cũng biết cách căn chỉnh code trong sublime text cho hợp lí và đẹp. Trong bài viết này, xaydungweb.vn sẽ viết bài viết Hướng dẫn căn chỉnh code trong sublime text mới nhất 2020.

Hướng dẫn căn chỉnh code trong sublime text mới nhất 2020

Sublime Text 3 là một trong những trình biên soạn thảo thông dụng nhất ngày nay. Đối với Atom hay VSCode, Sublime chiếm ưu thế hơn hẳn nhờ tốc độ nhanh, giao diện dễ dàng, và có đa số các tính năng mạnh mẽ. Để khai thác hết mức độ của Sublime, bạn nên lưu ý một số thủ thuật “nhỏ mà có võ” dưới đây.

Nhắn nhủ: Package Control là kho plugin dành riêng Sublime, bạn rất nên sử dụng để thống trị các phần mở rộng dễ dàng hơn. Để setup Package Control, bạn đủ sức sử dụng theo chỉ dẫn này.

Tận dụng phím tắt

Dùng phím tắt để thực hiện tác vụ luôn nhanh hơn dùng chuột hay thực đơn. Bạn k nhất thiết phải học thuộc lòng mọi phím tắt này, mà chỉ cần nhớ là chúng có tồn tại để dễ bề “lục lọi” khi cần.

Chung
Ctrl+Shift+P	xây dựng Command Prompt
Ctrl+K, Ctrl+B	Ẩn/hiện side bar
Chỉnh sửa
Ctrl+Shift+↑	chuyển dịch dòng/vùng chọn lên 1 dòng
Ctrl+Shift+↓	dịch chuyển dòng/vùng chọn xuống 1 dòng
Ctrl+L	chọn định dạng hiện giờ, liên tục bấm Ctrl+L để lựa chọn thể loại kế tiếp
Ctrl+D	chọn một từ, liên tục nhấn Ctrl+D để chọn những từ giống vậy
Ctrl+Shift+D	Nhân đôi thể loại cho đến nay
Ctrl+M	Đi tới dấu đóng ngoặc gần nhất – Lặp lại để đi tới dấu mở ngoặc
Ctrl+Shift+M	chọn all nội dung trong dấu ngoặc
Ctrl+Shift+K	Xóa tất cả định dạng
Ctrl+]	Lùi dạng bây giờ vào trong 1 tab
Ctrl+[	Lùi dòng bây giờ ra ngoài 1 tab
Ctrl+/	Comment/Un-comment dòng/vùng lựa chọn hiện nay
Điều hướng/di chuyển
Ctrl+P	xây dựng mau file bằng tên
Ctrl+R	Đi đến kí tự cần tìm
Ctrl+;	Đi đến từ trong file hiện nay
Ctrl+G	Đi đến loại trong file bây giờ
search và thay thế
Ctrl+F	Tìm
Ctrl+H	Thay thế
Ctrl+Shift+F	Tìm trong các file đang xây dựng
Tabs
Ctrl+Shift+T	xây dựng tab vừa mới đóng gần nhất
Ctrl+Tab	Di chuyển qua lại giữa các tab
Ctrl+W	Đóng tab bây giờ
Alt+[NUM]	Đi tới tab thứ [NUM]
Chia màn ảnh
Alt+Shift+NUM	Chia màn hình thành [NUM] cột
Alt+Shift+5	Chia màn tạo dựng grid gồm 4 groups
Alt+Shift+8	Chia màn tạo dựng 2 hàng
Ctrl+[NUM]	Đi tới nhóm thứ [NUM]
Ctrl+[NUM]	Chuyển file tới nhóm thứ [NUM]
Bookmarks
Ctrl+F2	Bookmarks/Bỏ bookmarks
F2	Đi tới bookmarks kế tiếp
Shift+F2	Đi tới bookmarks trước
Ctrl+Shift+F2	Xóa toàn bộ bookmarks
Thao tác với văn bản
Ctrl+K, Ctrl+U	Chuyển vùng lựa chọn sang chữ in hoa
Ctrl+K, Ctrl+L	Chuyển vùng lựa chọn sang chữ thường

Tô màu mã gốc với các gói mở rộng ngôn ngữ

Sau khi setup, Sublime support đến hơn 50 ngôn ngữ lập trình. ngoài ra, nếu sử dụng việc với Angular, Vue, React hay những framework/ngôn ngữ mới, bạn cần phải setup thêm các phần mở rộng để Sublime có thể hiểu và tô màu mã gốc. Tùy nhu cầu cụ thể mà bạn đủ sức tìm thấy plugin tương ứng trên Package Control. Ehkoo liệt kê dưới đây những plugin đa dạng nhất.

Ngôn ngữ

Babel (React): bên cạnh support các chức năng mới trong ES6, ES7, plugin này cũng hỗ trợ tô màu cho JSX
Better CoffeeScript
Flow
TypeScript

Thư viện

AngularJS
Vue Syntax Highlight
EmberScript

Emmet

Với lập trình viên front-end, Emmet là plugin k thể thiếu rồi. Emmet cho phép bạn viết HTML “nhanh giống như chảo chớp” bằng phương pháp dùng biểu thức mô tả HTML, sau đó Emmer sẽ xây dựng rộng biểu thức này. Chẳng hạn, khi bạn viết #content>p.text*5>lorem, Emmet sẽ “úm ba la” thành:

không chỉ hỗ trợ làm việc với HTML, Emmet cũng biểu thức HTML bên trong JSX. Để tìm hiểu thêm về hướng dẫn viết biểu thức, bạn đủ sức tham khảo ở đây.

Các gói snippets có ích

JavaScript & NodeJS Snippets, giống như tên gọi, gồm có các snippets dành riêng cho JavaScript, giúp bạn gõ một đoạn mã thông dụng nhanh hơn. ví dụ, thay vì gõ document.querySelector('selector');, bạn chỉ cần gõ qs, bấm Tab, và Sublime sẽ giúp phần việc còn lại giúp bạn. Hoặc gi như gợi ý dưới đây.

Nếu thấy Emmet hơi khó khăn, bạn có thể sử dụng một plugin khác tương tự là HTML Snippets. Plugin này có ít chức năng hơn, nhưng dễ sử dụng hơn.

Không những thế, cũng đừng quên những gói snippets khi sử dụng việc với các thư viện/framework, chẳng hạn giống như ReactJS Snippets, AngularJS Snippets, VueJS Snippets…

Với CSS, bạn chỉ cần cài CSS Snippets là có support CSS, LESS, SASS và Stylus.

Định hướng mã gốc

Bằng hướng dẫn sử dụng HTMLBeautify, CSS Format, Pretty JSON hoặc jsfmt, bạn đủ nội lực lựa chọn auto định dạng mã gốc khi lưu files. Nếu là fan của Prettier, bạn đừng quên plugin JsPrettier.

Canh hàng với Alignment

Alignment giúp bạn canh hàng khi khai báo nhiều biến. không chỉ hoạt động trên JS, Alignment còn hỗ trợ PHP. Để tùy chỉnh plugin này, bạn có thể xem chỉ dẫn.

Loại bỏ khoảng trắng dư thừa bằng Trimmer

Trimmer giúp bạn loại bỏ những khoảng trắng thừa một mẹo nhanh chóng. ngoài ra plugin này còn có chức năng Replace Smart Characters, giúp thay thế những ký tự đặc biệt như « thành <<.

Sử dụng DocBlockr để viết tài liệu

Trong công cuộc viết code, thỉnh thoảng chúng ta phải viết thêm ebook mô tả về hàm hay lớp vừa mới thiết lập. Mục tiêu là để tiến trình bảo trì áp dụng không khó khăn hơn, các member mới tham gia đội nhóm cũng easy nắm bắt thông tin hơn. DocBlockr là plugin giúp bạn viết những tài liệu này khẩn trương, tiện lợi. Chỉ cần để con trỏ ở trước hàm hay cách thức, gõ /** và Tab, DocBlockr sẽ tự động nhận biết các tham số và trị giá trả về.

DocBlockr không chỉ hỗ trợ JavaScript mà còn dùng được với nhiều ngôn ngữ không giống giống như PHP, CoffeeScript, TypeScript…

>>>>Hướng dẫn các cách khai báo biến trong javascript mới nhất 2020

Sử dụng việc với git và GitHub

Git

Plugin này giúp bạn dùng Git trực tiếp bên trong Sublime, bao gồm khá nhiều tính năng đa dạng, chẳng hạn như thêm files, tạo commits, xem logs… mà k cần rời khỏi trình biên soạn thảo.

GitGutter

GitGutter theo dõi repo ở thư mục hiện giờ, cho bạn biết tình trạng của mỗi thể loại và cung cấp một cái Nhìn tổng quan về những refresh trong tập tin đã được chỉnh sửa.

GitHubinator

GitHubinator là một plugin cho phép bạn bôi đen code trong Sublime text, và hightlight đoạn code đó trên remote repo của Github (nếu như đoạn code đó tồn tại).

Gist cho phép bạn send đoạn code được chọn lên dịch vụ Gist của Github.

Linter

Sublime Linter

Trong công cuộc code, việc sang chảnh phải những lỗi về cú pháp là k thể tránh khỏi. Plugin này cung cấp một hệ thống để các chương trình rà soát lỗi, ví dụ như ESLint, đủ nội lực được kết hợp vào Sublime. Sau khi cài đặt Sublime Linter, bạn cần cài riêng các gói riêng cho từng ngôn ngữ.

Nâng cấp sidebar

Side Bar Enhancements

Sidebar mặc định của Sublime phân phối số lựa chọn hạn chế để thao tác với tập tin hay tìm kiếm. sử dụng plugin này, bạn sẽ có thêm khoảng 20 lựa chọn mới, bao gồm Open in browser, Duplicate, refresh, Reveal…

AdvancedNewFile

AdvancedNewFile là plugin giúp tăng tốc tạo tập tin mới. Bạn chỉ cần click Ctrl + Alt + N trong Windows, Super + Alt + N trong Mac/Linux để trực tiếp gõ đường dẫn đến tập tin mới. Và yên tâm, nếu tập tin nằm trong thư mục chưa tồn tại, thư mục mới sẽ được xây dựng luôn.

Lựa chọn màu mau với ColorPicker

ColorPicker

Plugin này sẽ cho bạn một hộp thoại nhỏ để chọn màu từ bảng màu, hoặc bạn cũng đủ sức dùng Eye dropper để chọn màu từ bất kì vị trí nào trên màn hình của bạn.

Color Highlighter

Sử dụng plugin này, bạn có thể xem trực quan những màu sắc tương ứng với mỗi trị giá màu như HEX, RGBA…ngay trong mã nguồn.

GhostText

Đây là một plugin thực sự rất thú vị. Nó giúp bạn kết nối Sublime text đến một vùng text trên browser. Gợi ý, bạn đủ nội lực sử dụng việc với CodePen, nhưng all công cuộc code của bạn sẽ được thực hiện trên Sublime text, và bạn đủ nội lực dùng tất cả những tính năng, plugin của Sublime text. Sau khi cài plugin này, bạn cần cài thêm extension cho browser.

Bonus

Emoji

dùng plugin này, bạn đủ nội lực chèn thêm emoji từ Command palette. Có lẽ k cần thiết lắm với những ai dùng Mac vì bạn đủ nội lực xây dựng emoji panel bằng cách click Control + Command + Space rồi.

Kết

Với những plugin được mô tả ở đây, Ehkoo mong là sẽ làm bạn nâng cao hiệu suất làm việc trong Sublime Text. Nếu bạn biết plugin nào hay ho, hãy chia sẻ ở phần cmt phía dưới nhé!