10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

Ngày đăng: 04/09/2015

Sublime Text là một ứng dụng tuyệt vời dành cho các lập trình viên. Nó là một text editor tiên tiến, có độ tùy biến cao, hỗ trợ đa nền tảng và là IDE (Integrated Development Environment: Môi trường phát triển tích hợp) có đầy đủ tính năng và trình biên tập dòng lệnh chẳng hạn như Vim hay Emacs.

Một trong những điều tạo nên sự tuyệt vời của Sublime đó là cấu trúc plugin (phần bổ trợ) có thể mở rộng được. Điều này giúp cho các lập trình viên mở rộng chức năng cốt lõi của Sublime với các tính năng mới chẳng hạn như code completion, hay nhúng tài liệu API quản lý từ xa. Sublime Text không đề cập đến các plugin mà được cài đặt thông qua hệ thống quản lý gói cài đặt của bên thứ 3 có tên là Package Control. Để cài đặt Package Control trong Sublime Text, thì bạn có thể xem chỉ dẫn trên trang web của Package Control.

Trong khuôn khổ bài viết này, chúng tôi sẽ phác thảo 10 plugin cần thiết của Sublime dành cho các lập trình viên JavaScript, mỗi plugin có thể giúp cải thiện tiến độ công việc của bạn và giúp bạn làm việc hiệu quả hơn. Chúng ta hãy cùng nhau khám phá nhé!

1. Babel

Dĩ nhiên plugin đầu tiên trong danh sách mà chúng tôi đang nói đến là Babel. Plugin này thêm syntax highlighting (Syntax highlighting có tác dụng vô cùng to lớn để hiển thị các đoạn code như khi bạn đang dùng notepad++ hay dreamviewer giúp code dễ đọc hơn rất nhiều) thích hợp vào ES6/2015 và React JSX. Sau khi cài đặt plugin, việc đầu tiên mà bạn nên làm đó là thiết lập nó như là một cú pháp mặc định cho .es6, .jsx, và thậm chí là các tệp tin .js. Tuy nhiên, bạn nên cẩn thận với tệp tin .js nếu bạn đang làm việc với ES3/5 và không cần phải phiên dịch code mà đang sử dụng Babel.

Nếu bạn chưa thấy được sự tuyệt vời của Babel, thì chúng tôi khuyên bạn nên thử một lần. Babel cho phép bạn biên dịch ES6/2015 và JSX sang ES5. Nó tích hợp rất tốt với những công cụ xây dựng phổ biến và CLI (Command Line Interface: giao diện dòng lệnh). Rõ ràng, nó không hỗ trợ các trình duyệt kế thừa, nhưng bạn có thể tuân theo các chỉ dẫn trên trang caveats nếu bạn cần hỗ trợ IE10 và các phiên bản cũ hơn.

Thật không may, Babel không cho phép bạn biên dịch ES6 tốc hành bên trong Sublime. Đối với vấn đề này, bạn có thể tham khảo qua tài liệu Compile Selected ES6.

2. JSHint

Plugin tiếp theo mà chúng tôi muốn nhắc đến là JSHint. JSHint là một JavaScript Linter (Linter là một công cụ giúp lập trình viên kiểm tra những gì nó nghi ngờ là không đúng với chuẩn, không giúp kiểm tra lỗi. Có nhiều loại linter: css, js, html.), sẽ kiểm tra code và xác nhận code có cấu trúc đúng, và thoát khỏi các lỗi phổ biến có liên quan đến cấu trúc. Dù cho bạn là người mới bắt đầu hay đã có kinh nghiệm, thì JSHint là một plugin không thể thiếu. Để hiểu rõ hơn về những lợi ích mà JSHint mang đến, bạn có thể truy cập vào trang web của JSHint để biết rõ hơn.

Để JSHint hoạt động, bạn cần phải cài đặt JSHint qua npm:

npm install -g jshint

Nếu bạn không rõ về cách cài đặt như thế nào, thì bạn có thể đọc qua hướng dẫn của chúng tôi về cách bắt đầu với Node Package manager (Trình quản lý gói của nodejs) tại đây.

Ngay khi mô đun JSHint và JSHint Sublime Text được cài đặt, thì bạn có thể đơn giản invoke JSHint bằng cách mở tệp tin JavaScript và nhấn Ctrl + J (hoặc Alt + J nếu bạn đang sử dụng hệ điều hành Linux/Windows). Ngoài ra, bạn có thể truy cập vào JSHint qua trình đơn ngữ cảnh (context menu).

Nếu bạn đã cài đặt plugin này nhưng muốn có thêm một cảnh báo rõ ràng dành cho những vị trí đã xảy ra lỗi, thì hãy tìm hiểu thêm tại đây. Hay, nếu bạn muốn thử JSHint trước khi cài đặt gói NPM hay plugin, thì JSHint.com là một công cụ tương tác online tuyệt vời dành cho bạn, tại đây bạn có thể dán code của mình lên và sẽ nhận được các phản hồi ngay tức thì.

3. JSFormat

JSFormat là một plugin dựa trên JS Beautifier và có thể giúp bạn định dạng tự động JavaScript và JSON. Nếu bạn dùng nó chỉ để định dạng JSON, thì đây là một plugin đáng để thử. Nhưng đối với chúng tôi, lợi thế lớn nhất mà plugin này mang lại đó là khi chúng tôi làm việc với code của các lập trình viên khác, hay thậm chí là code mà đã được viết từ rất lâu.

Những code như vậy thường rất khó để đọc và tuân theo kiểu định dạng của code phổ biến thì thật sự có ích. Trong lúc các trình định dạng (formatter) có thể không dành cho tất cả mọi người, nhưng chúng có thể giúp các lập trình viên đọc code bằng cách giới thiệu một cấu trúc phổ biến. Các Linter sẽ chịu trách nhiệm về một trong số các định dạng này, nhưng không cần thiết phải sửa định dạng tự động. Trình định dạng code giúp bạn tiết kiệm thời gian và tránh xa các cơn đau đầu.

Sau khi cài đặt, để sử dụng JSFormat, bạn hãy mở tệp tin JS và nhấn tổ hợp phím Ctrl + Alt + f trên hệ điều hành Windows/Linux hay tổ hợp phím Ctrl + ? + f trên hệ điều hành Mac. Ngoài ra, bạn còn có thể sử dụng trình đơn ngữ cảnh.

Đôi lúc có lẽ bạn nghĩ rằng: “Nhưng nếu lỡ tôi không thích cái cách mà chúng định dạng cho JavaScript thì sao?”

Thật may là JsFormat có tính lập cấu hình cao và dựa trên các cài đặt của JS Beautifier. Để điều chỉnh các cài đặt này cho Sublime Text 3, thì các bạn hãy làm theo hướng dẫn sau nhé:

Preferences -> Package Settings -> JsFormat -> Settings – Default

Sau đó các bạn tiến hành chỉnh sửa các cài đặt của JSON theo ý muốn của mình.

4. DocBlockr

Thỉnh thoảng việc thêm các bình luận dành cho lập trình của bạn có thể là một nỗi đau thực sự. Chúng tôi không biết nhiều người có thích việc này hay không, nhưng điều đó thật sự là hoàn toàn cần thiết. DocBlockr giúp bạn cảm thấy thoải mái khi làm điều này. Sau khi cài đặt DocBlockr, thì tất cả những gì bạn cần làm là bắt đầu một dòng với/* hay /** và DocBlockr sẽ giúp bạn thực hiện phần còn lại. Nếu bạn bắt đầu với /** trên một chức năng, thì nó sẽ sinh ra các bình luận cho bạn dựa trên định dạng JSDoc. DocBlockr sẽ là một plugin tuyệt vời mà bạn không ngờ tới.

DocBlockr cũng hỗ trợ nhiều ngôn ngữ khác như: CoffeeScript, TypeScript, PHP, ActionScript, Haxe, Java, Apex, Groovy, Objective C, C, C++, và Rust.

5. SideBar Enhancements

Sublime Text có rất ít lựa chọn để thao tác các tệp tin trong cây sidebar của bạn. Hãy nói đơn giản là SideBarEnhancements sẽ giúp bạn thực hiện điều này. Đặc biệt plugin này cung cấp lựa chọn “move to trash” (di chuyển tới thùng rác) dành cho các tệp tin và các thư mục, lựa chọn “open with...” (mở cùng với...) và thậm chí là một clipboard. Plugin này còn cho phép bạn mở các tệp tin ở trình duyệt web của bạn, sao chép nội dung của một tệp tin như data:uri base64 (mà đặc biệt là dễ dàng nhúng các hình ảnh trong CSS) và cung cấp một host dành cho các hoạt động tìm kiếm. Ngoài ra plugin này còn tích hợp với SideBarGit để mang đến các câu lệnh Git trực tiếp từ sidebar.

Với sự phát triển của JavaScript, một phương tiện hợp lý để điều hướng dự án của bạn và có thể thao tác các tệp tin của dự án là điều cần thiết. Do đó bạn phải có plugin này trong hộp công cụ của mình.

6. AngularJS

Angular JS được phát triển bởi nhóm Angular-UI, đây có lẽ là một trong những gói lớn nhất được liệt kê trong danh sách này. Plugin này có các tính năng nổi bật như:

. Code completion của AngularJS Directives cốt lõi (Directives là một thành phần mở rộng HTML, hay nói cách khác là các thuộc tính (properties) của các thẻ HTML mà Angular nó định nghĩa thêm) (như ng-model, ng-repeat...)
. Directive completions dành cho directive được xác định
. Quick Panel – tìm kiếm các directive, bộ điều khiển và bộ lọc
. Các snippet liên quan đến Angular
. GoToDocs dành cho AngularJS directives cốt lõi

Do Angular là một thư viện lớn như thế, nên chúng tôi nhận thấy rằng đây là một plugin hữu ích đến kinh ngạc. Nó có nhiều cài đặt mà bạn có thể tìm hiểu thêm qua trang web của nó.

Để tận dụng cú pháp của plugin này, thay đổi kiểu xem cho tệp tin HTML, thì bạn hãy làm theo chỉ dẫn sau đây:
View -> Syntax -> HTML (Angular.js)

7. TypeScript

TypeScript là một tập cha được đánh máy của JavaScript, nó biên dịch sang JavaScript thuần túy. Điều này có lẽ chẳng có gì đáng ghê gớm đối với các lập trình viên, ngoại trừ một tuyên bố nhỏ hồi tháng Ba năm nay khi nói rằng: Angular 2 sẽ được xây dựng dựa trên Typescript. Điều này có nghĩa là nếu bạn đang làm việc với Angular và bạn đang có ý định chuyển sang Angular 2 trong tương lai, thì TypeScript là một plugin mà bạn cần phải có.

Ngoài việc được sự ủng hộ của Microsoft, thêm code completion, cú pháp chính xác, định dạng code và các khả năng điều hướng được mở rộng sang các dự án TypeScript của bạn. Nó còn đề cập đến hệ thống xây dựng cho phép bạn biên dịch các tệp tin TypeScript sang JavaScript.

Để truy cập vào hệ thống xây dựng thì bạn làm theo chỉ dẫn sau: Tools -> Build System và chọn TypeScript. Sau đó mở một tệp tin kết thúc với đuôi .ts và chọn Tools -> Build hoặc đơn giản là nhấn tổ hợp phím Ctrl + B. Bạn sẽ được yêu cầu về bất kỳ tham số xây dựng nào. Và nó chỉ cần Node.

8. Handlebars

Nếu bạn đang làm việc với Ember.js hay chỉ sử dụng HandleBars như là ngôn ngữ khuôn mẫu của bạn, vậy thì bạn không thể không có Handlebars. Nếu không có nó, thì bạn cũng có thể chỉ cần tắt syntax highlighting.

Ngoài Syntax highlighting, thì plugin này còn có tab trigger cho các biểu thức (expressions) khác nhau. Ví dụ: khi nhập x-temp và nhấn phím TAB thì sẽ tạo ra:

<script type="text/x-handlebars" data-template-name=""></script>

Ngoài ra, nếu gõ ifel và nhấn phím TAB, thì bạn sẽ nhận được là:

{{#if }}

 

{{else}}

 

{{/if}}>

Khá tiện lợi đúng không nào?

Bên cạnh đó còn có danh sách đầy đủ của các snippet trên trang chủ của Handlebars.

9. Better CoffeeScript

Better CoffeeScript là một nhánh của CoffeeScript-Sublime-Plugin gốc – thật không may nó đã bị ruồng bỏ bởi chính những người tạo ra nó và chỉ làm việc với Sublime Text 2.

Plugin này mang đến syntax highlighting cần có cho các hoạt động trong CoffeeScript, nhưng những gì nó mang đến còn nhiều hơn thế. Nó thêm một chùm các câu lệnh vào Sublime, chẳng hạn như khả năng vận hành kiểm tra cú pháp, biên dịch một tệp tin, hay hiển thị JavaScript đã được biên dịch. Nó còn có các snippet và hệ thống xây dựng mà làm việc với cake (một phiên bản đã được đơn giản hóa của Make dành cho CoffeeScript).

Bạn có thể tìm hiểu thêm nhiều các cài đặt và lựa chọn của plugin này tại trang chủ của Better CoffeeScript.

10. iQuery

Dường như jQuery đang dần ít được sử dụng đến, nhưng nó vẫn còn hữu ích đến không ngờ nếu bạn không xây dựng một trang web hoàn toàn mang tính tương tác hay bạn chỉ muốn thêm chức năng vào một ứng dụng hiện có.

Plugin này cung cấp thêm syntax highlighting và hầu hết tất cả các jquery method là các snippet. Các snippet này được truy cập bằng cách gõ tên method và chọn cái phù hợp.

Ví dụ: nếu bạn gõ $.a, thì sau đó bạn sẽ chọn $.ajax():

Rất hay!

  Xem: 18034