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 dạng hiện giờ, liên tục bấm Ctrl+L để lựa chọn thể loạ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ể loạ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 dạng |
| Ctrl+] | Lùi dạ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 loạ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ể loạ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é!
Blog chia sẻ kiến thức code, kiến thức và tài liệu về code website
Nguồn: ehkoo.com Edit by Lion
