• Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

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

ATPMedia Bởi ATPMedia
22/11/2019
Trang chủ Kiến thức xây dựng website
Rate this post

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.

Căn Chỉnh Code Trong Sublime Text

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. Doc​Blockr 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.

Ghost​Text

Đâ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é!

>> Hướng dẫn các cách khắc phục lỗi bảo mật mới nhất 2020

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

Tags: cài emmet cho sublime text 3Căn chỉnh code trong sublime textformat code php sublime text 3gợi ý code trong sublime texthướng dẫn sử dụng sublime text 3 pythonpackage format code sublime text 3plugin căn chỉnh code trong sublime textsublime text 3 không có màutự căn chỉnh code trong sublime text
ATPMedia

ATPMedia

Bài Viết Tiếp Theo
Cách Rút Gọn Link Bằng Bit.ly

Hướng dẫn cách rút gọn link bằng bit.ly mới nhất 2020

Bài Viết Mới.

Cách đưa ảnh Lên Google

Hướng dẫn các cách đưa ảnh lên google mới nhất 2020

15/12/2019
Text Indent Trong Css

Text-indent trong css? Tại sao chúng ta cần hiểu thuộc tính text-indent?

21/11/2019
Tổng Hợp Cách Quản Lý Tài Chính Hiệu Quả Nhất 2020

Tổng hợp cách quản lý tài chính hiệu quả nhất 2020

01/12/2019
Phần Mềm Viết Web đơn Giản

Nên sử dụng phần mềm thiết kế web đơn giản nào?

16/08/2020
7 mẹo giúp bạn cải thiện kỹ năng viết blog

7 mẹo giúp bạn cải thiện kỹ năng viết blog

17/07/2021
Ham Xu Ly Chuoi Php

Tổng hợp ham xu ly chuoi php mới nhất 2020

20/11/2019
Image001(67)

Lợi ích của việc thi công lắp đặt hệ thống mạng LAN

04/11/2020
Những Kỹ Năng Sống Cho Trẻ

Tổng hợp những kỹ năng sống cho trẻ mà cha mẹ nào cũng nên biết

16/08/2020

XÂY DỰNG WEBSITE

Coder.com.vn là Blog chia sẻ kiến thức học lập trình miễn phí. Chuyên tổng hợp các bài viết về tài liệu học lập trình, với mong muốn tất cả mọi người ở khắp nơi trên thế giới được học lập trình miễn phí.

Chuyên mục

  • Trang Chủ
  • Source Web
  • Kiến Thức Seo
  • Bảo Mật Website
  • Tài Liệu Làm Web
  • Xây Dựng Website

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Topvui
  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí

© 2019 | Thiết Kế bởi ATP MEDIA

  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.