So sánh code trong sublime text

Trong Linux và kể cả Windows hai công cụ rất mạnh cho soạn thảo code như Notepad++ và Sublime Text 2, trong đó Notepad++ là mã nguồn mở mà trước kia tôi rất hay sử dụng, tuy nhiên thời gian gần đây tôi đã chuyển sang sử dụng Sublime Text 2 bởi khả năng tuyệt vời của nó trong cả việc soạn thảo và biên dịch code, đặc biệt là biên dịch code Fortran và C trên Windows.

Một trong lí do khiến tôi chọn Sublime Text 2 bởi thư viện plugin khổng lồ và rất hữu ích của chúng, ở bài viết này tôi không thể nói hết được mọi thứ về Sublime Text 2, nên tôi sẽ tập trung vào một số plugin hữa ích của Sublime Text 2 và cách kết hợp nó với GCC trong CYGWIN để biên dịch ngôn ngữ Fortran và C (hai ngôn ngữ rất phổ biến cho lập trình trong khoa học tính toán).

Plugin hữu ích:

– Package Control

Package Control là một công cụ quản lý các plugin của Sublime Text 2. Nó giúp bạn tìm kiếm, cài đặt, nâng cấp và xóa các plugin. Nó là plugin đầu tiên bạn cần cài đặt

Việc cài đặt Package Control cũng rất đơn giản:

  • Tải gói Package Control.sublime-package
  • Chép Package Control đã tải về vào thư mục Installed Packages tại C:\Sublime Text 2.0.2\Data\Installed Packages (chú ý: tôi sử dụng đường dẫn trong máy tính của tôi, nó có thể khác tuỳ thuộc vào thư mục cài đặt Sublime Text 2).
  • Khởi động lại Sublime Text 2.

Sau khi cài đặt Package Control: Từ menu của Sublime Text 2 chọn Preferences -> Package Control (hoặc tổ hợp phím Ctrl + Shift + p), hộp thoại xuất hiện, chọn Package Control: Installed Packages như dưới hình 1, sau đó một hộp thoại mới xuất hiện bạn có thể gõ tên plugin muốn cài đặt. Ngoài ra còn rất nhiều lựa chọn như Package Control: Remove Packages (xoá các plugin đã cài đặt).

So sánh code trong sublime text
Hình 1: Package Control

– BracketHighlighter

Như cái tên của plugin, nó làm nổi bật các ngoặc đơn và ngoặc kép trong code. Mặc dù là plugin đơn giản, nhưng nó rất hữu ích cho việc soạn thảo code.

– Alignment

Tôi rất thích code được căn chỉnh đẹp, và plugin có thể làm được điều đó. Bạn chỉ cần tô sáng các dòng code cần căn chỉnh và nhấp tổ hợp phím Ctrl + Alt + a.

– SublimeLinter

Giúp bạn phát hiện và làm nổi bật các lỗi trong code, nó hỗ trợ rất nhiều ngôn ngữ khác nhau.

– SublimeCodeIntel

Tôi rất thích plugin này, khi bạn gõ lệnh hay các hàm trong code, nó sẽ tự động phát hiện lệnh hay các hàm đó mà chỉ cần bạn gõ vài kí tự đầu. Điều này rất hữu ích cho người hay quên lệnh như tôi và nó hộ trợ rất nhiều ngôn ngữ, tuy nhiên nó cũng khá nặng và có thể làm thời gian khởi động Sublime Text 2 bị chậm đi.

– MinimalFortran

Vì tôi sử dụng ngôn ngữ Fortran khá nhiều nên nó rất hữu ích, nó giúp làm nổi bật các câu lệnh hay hàm trong Fortran.

– Theme – Reeder

Đây là một giao diện trong rất nhiều giao diện của Sublime Text 2, bạn có thể chọn giao diện bất kỳ mà bạn thích, tôi thì sử dụng giao diện trên vì thấy nó khá hài hoà và nhẹ nhàng và mắt mình dễ chịu khi làm việc với code trong thời gian liên tục.

– Cài đặt người dùng

Từ menu của Sublime Text 2 chọn Preferences -> Setting – Users bạn sao chép đoạn code sau:

{ "color_scheme": "Packages/Theme - Reeder/EarthsongLight.tmTheme", "font_size": 11.0, "ignored_packages": [ "Vintage" ], "theme": "Reeder.sublime-theme" }

Ở đây bạn có thể sử dụng đoạn khác của riêng bạn, tôi chỉ chú ý ở phần “Vintage”, nó là chế độ chỉnh sửa trong vi cho Sublime Text 2. Sử dụng chế độ này sẽ rất thuận tiện cho ai quen với sử dụng vi trong Linux. Như đoạn code trên thì chế độ này đang bị tắt, nếu muốn mở chế độ này, bạn tham khảo đoạn code đơn giản ở link sau: http://www.sublimetext.com/docs/3/vintage.html

Chú ý: Có rất nhiều các plugin khác các bạn có thể cài đặt trong Sublime Text 2. Tuỳ thuộc môi trường làm việc của bạn, nếu môi trường lập trình web với các ngôn ngữ PHP hay HTML, bạn sẽ cần thêm những plugin khác hữu ích dàng riêng cho việc soạn thảo các ngôn ngữ như vậy.

Tạo trình biên dịch với GCC:

Vì như tôi nói, tôi làm việc khá nhiều với Fortran hay C. Nếu trong các hệ điều hành Ubuntu hay Redhat thì biên dịch các ngôn ngữ này với GCC là đơn giản. Tuy nhiên gần đây tôi có chuyển sang sử dụng Windows. Việc biên dịch ngôn ngữ sử dụng Visual Studio hay Intel Compiler trong Windows, sẽ tốn rất nhiều tiền vì vấn đề bản quyền. Đó là lý do hợp lý để lựa chọn GCC với CYGWIN vì nó là miễn phí và rất mạnh mẽ.

Sublime Text 3 là một trong những trình soạn thảo phổ biến nhất hiện nay. So với Atom hay VSCode, Sublime chiếm ưu thế hơn hẳn nhờ tốc độ nhanh, giao diện đơn giản, và có đầy đủ các tính năng mạnh mẽ. Để khai thác hết khả năng 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 để quản lý các phần mở rộng dễ dàng hơn. Để cài đặt Package Control, bạn có thể làm theo hướng 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 menu. Bạn không 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.

ChungCtrl+Shift+PMở Command PromptCtrl+K, Ctrl+BẨn/hiện side barChỉnh sửaCtrl+Shift+↑Dịch chuyển dòng/vùng chọn lên 1 dòngCtrl+Shift+↓Dịch chuyển dòng/vùng chọn xuống 1 dòngCtrl+LChọn dòng hiện tại, tiếp tục nhấn Ctrl+L để chọn dòng tiếp theoCtrl+DChọn một từ, tiếp tục nhấn Ctrl+D để chọn những từ giống vậyCtrl+Shift+DNhân đôi dòng hiện tạiCtrl+MĐi tới dấu đóng ngoặc gần nhất - Lặp lại để đi tới dấu mở ngoặcCtrl+Shift+MChọn toàn bộ nội dung trong dấu ngoặcCtrl+Shift+KXóa toàn bộ dòngCtrl+]Lùi dòng hiện tại vào trong 1 tabCtrl+[Lùi dòng hiện tại ra ngoài 1 tabCtrl+/Comment/Un-comment dòng/vùng chọn hiện tạiĐiều hướng/di chuyểnCtrl+PMở nhanh file bằng tênCtrl+RĐi đến kí tự cần tìmCtrl+;Đi đến từ trong file hiện tạiCtrl+GĐi đến dòng trong file hiện tạiTìm kiếm và thay thếCtrl+FTìmCtrl+HThay thếCtrl+Shift+FTìm trong các file đang mởTabsCtrl+Shift+TMở tab đã đóng gần nhấtCtrl+TabDi chuyển qua lại giữa các tabCtrl+WĐóng tab hiện tạiAlt+[NUM]Đi tới tab thứ [NUM]Chia màn hìnhAlt+Shift+NUMChia màn hình thành [NUM] cộtAlt+Shift+5Chia màn hình thành grid gồm 4 groupsAlt+Shift+8Chia màn hình thành 2 hàngCtrl+[NUM]Đi tới group thứ [NUM]Ctrl+[NUM]Chuyển file tới group thứ [NUM]BookmarksCtrl+F2Bookmarks/Bỏ bookmarksF2Đi tới bookmarks tiếp theoShift+F2Đi tới bookmarks trướcCtrl+Shift+F2Xóa tất cả bookmarksThao tác với văn bảnCtrl+K, Ctrl+UChuyển vùng chọn sang chữ in hoaCtrl+K, Ctrl+LChuyển vùng chọn sang chữ thường

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

Sau khi cài đặt, Sublime hỗ trợ đến hơn 50 ngôn ngữ lập trình. Tuy nhiên, nếu làm việc với Angular, Vue, React hay những framework/ngôn ngữ mới, bạn cần phải cài đặt thêm các phần mở rộng để Sublime có thể hiểu và tô màu mã nguồn. Tùy nhu cầu cụ thể mà bạn có thể tìm thấy plugin tương ứng trên Package Control. Ehkoo liệt kê dưới đây những plugin thông dụng nhất.

Ngôn ngữ

  • Babel (React): bên cạnh hỗ trợ các tính 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 không thể thiếu rồi. Emmet cho phép bạn viết HTML “nhanh như chảo chớp” bằng cách dùng biểu thức mô tả HTML, sau đó Emmer sẽ mở 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:

So sánh code trong sublime text

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ề cách viết biểu thức, bạn có thể tham khảo ở đây.

Các gói snippets hữu ích

JavaScript & NodeJS Snippets, như tên gọi, bao gồm 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, nhấn Tab, và Sublime sẽ làm phần việc còn lại giúp bạn. Hoặc gi như ví dụ dưới đây.

So sánh code trong sublime text

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

So sánh code trong sublime text

Bên cạnh đó, cũng đừng quên những gói snippets khi làm việc với các thư viện/framework, chẳng hạn như ReactJS Snippets, AngularJS Snippets, VueJS Snippets…

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

Định dạng mã nguồn

So sánh code trong sublime text
Bằng cách sử dụng HTMLBeautify, CSS Format, Pretty JSON hoặc jsfmt, bạn có thể chọn tự động định dạng mã nguồn khi lưu files. Nếu là fan của Prettier, bạn đừng quên plugin JsPrettier.

Canh hàng với Alignment

So sánh code trong sublime text

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 hướng 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 cách nhanh chóng. Bên cạnh đó plugin này còn có tính năng Replace Smart Characters, giúp thay thế những ký tự đặc biệt như « thành <<.

Dùng DocBlockr để viết tài liệu

Trong quá trình viết code, đôi khi chúng ta phải viết thêm tài liệu mô tả về hàm hay lớp đang xây dựng. Mục đích là để quá trình bảo trì ứng dụng dễ dàng hơn, các thành viên mới gia nhập team cũng dễ 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 nhanh chóng, tiện lợi. Chỉ cần để con trỏ ở trước hàm hay phương thức, gõ / và Tab, DocBlockr sẽ tự động nhận biết các tham số và giá trị trả về.

So sánh code trong sublime text

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

Làm việc với git và GitHub

Git

So sánh code trong sublime text

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

GitGutter

So sánh code trong sublime text

GitGutter theo dõi repo ở thư mục hiện tại, cho bạn biết trạng thái của mỗi dòng và mang đến một cái nhìn tổng quan về những thay đổi trong tập tin đang được chỉnh sửa.

GitHubinator

So sánh code trong sublime text

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 Gist cho phép bạn gửi đoạn code được chọn lên dịch vụ Gist của Github.

Linter

Sublime Linter

So sánh code trong sublime text

Trong quá trình code, việc mắc phải những lỗi về cú pháp là không thể tránh khỏi. Plugin này cung cấp một nền tảng để các chương trình kiểm tra lỗi, ví dụ như ESLint, có thể đượ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ữ.

Side Bar Enhancements

So sánh code trong sublime text

Sidebar mặc định của Sublime cung cấp số lựa chọn giới hạn để 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

So sánh code trong sublime text

AdvancedNewFile là plugin giúp tăng tốc tạo tập tin mới. Bạn chỉ cần nhấn 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 tạo ra luôn.

Chọn màu nhanh với ColorPicker

ColorPicker

So sánh code trong sublime text

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 có thể sử 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

So sánh code trong sublime text

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

Ghost​Text

So sánh code trong sublime 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. Ví dụ, bạn có thể làm việc với CodePen, nhưng toàn bộ quá trình code của bạn sẽ được thực hiện trên Sublime text, và bạn có thể sử dụng tất cả những chức 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

So sánh code trong sublime text

Sử dụng plugin này, bạn có thể chèn thêm emoji từ Command palette. Có lẽ không cần thiết lắm với những ai sử dụng Mac vì bạn có thể mở emoji panel bằng cách nhấn Control + Command + Space rồi.

Kết

Với những plugin được giới thiệu ở đây, Ehkoo mong là sẽ giúp 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 bình luận phía dưới nhé!