SublimeText + Emmet tool siêu tốc cho frontend

SublimeText và Emmet là chi

Như mình đã giới thiệu Zend Coding cho Visual Studio ở mấy bài trước (link) thì bản thân mình thấy dùng khá hay tuy nhiên thì cái bộ VisualStudio nó lại khá nặng nên nếu anh em chỉ làm về frontend thì thực sự chắc ngại chả muốn dùng.

Chính vì vậy mình xin giới thiệu bộ công cụ có tính năng tương tự thậm chí còn mạnh mẽ hơn đó là SublimeText + plugin Emmet

Sublime Text là trình editor text giống như Notepad++ (cái này chắc anh em biết nhiều :3), công cụ này hỗ trợ rất nhiều ngôn ngữ từ html, python, js thậm chí cả C# :3


Các bạn có thể download ở đây https://www.sublimetext.com/

Emmet
thì là 1 plugin hỗ trợ cho việc phát triển ứng dụng web để viết html, css, js cực nhanh

http://emmet.io/

Nó hỗ trợ cực nhiều các trình texteditor. Ngay cả VisualStudio Code mới ra cũng đã được hỗ trợ. Các bạn xem danh sách hỗ trợ nhé. Ai dùng gì thì chọn đúng cái còn trong bài này mình chỉ nói về SublimeText thôi

 

Cài đặt

Để cài đặt Emmet cho SublimeText thì trong SublimeText bạn cần cài PackageControl trước.

Đầu tiên là mở cái màn hình console trong SublimeText bằng cách vào View -> Show Console hoặc phím tắt Ctrl + `


Sau đó bạn truy cập vào cái địa chỉ https://packagecontrol.io/installation và copy cái dòng loằng ngòa loằng ngoằng như hình vẽ vào phần Console để cài đặt

 


Đoạn code này mục đích là sẽ tạo ra 1 folder Installed Packages trong máy bạn và tiến hành download Package Control.sublime-package vào đó.

Sau khi cài đặt được rồi thì bạn nhấn tổ hợp Ctrl + Shift + P rồi gõ PackageControl: InstallPackage.


Nó sẽ hiện ra danh sách các plugin có thể cài đặt cho SublimeText
Ở đây bạn gõ Emmet rồi tiến hành cài vào thôi là được. :3 Rất dễ phải không

PS: Tuy nhiên 1 số bạn bị lỗi khi cài đặt với PyV8 của Emmet do vấn đề kết nối thì có thể tự cài bằng tay theo link sau

https://github.com/emmetio/pyv8-binaries

Cách sử dụng

Cú pháp của Emmet thì tương tự như trong bài viết trước mình đã chia sẻ link

Ngoài ra các bạn có thể tham gia vào 1 khóa sử dụng Emmet miễn phí trên udemy. Trước mình có vào học qua khá là dễ hiểu và đơn giản

https://www.udemy.com/emmet-video-tutorials/learn/v4/

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s