10 Packages Sublime Text cần thiết cho Frontend Developers

<h2 class="excerpt" style="background-color: white; box-sizing: border-box; color: #141414; font-family: Roboto, sans-serif; font-size: 18px; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;"> Sublime Text là một trong những IDE đang được rất nhiều lập trình viên yêu thích vì tính năng hấp dẫn và rất nhẹ.</h2> <div class="ads" id="google-ads-1" style="background-color: white; box-sizing: border-box; color: #141414; font-family: Roboto, sans-serif; font-size: 14px; margin: auto; text-align: center;"> </div> <div class="relate-news" style="background-color: white; box-sizing: border-box; color: #141414; font-family: Roboto, sans-serif; font-size: 14px;"> <ul style="box-sizing: border-box; margin-bottom: 10px; margin-top: 0px;"></ul> </div> <div class="ads" style="background-color: white; box-sizing: border-box; color: #141414; font-family: Roboto, sans-serif; font-size: 14px; margin: auto; text-align: center;"> </div> <div class="entry-content" style="background-color: white; box-sizing: border-box; color: #141414; font-family: Roboto, sans-serif; font-size: 14px;"> <div style="box-sizing: border-box; margin-bottom: 10px;"> <span style="box-sizing: border-box; font-weight: 700;">Sublime Text</span> là một IDE nhẹ và nhiều tính năng hay. Bạn có thể thêm những tính năng mới thông qua việc cài đặt <span style="box-sizing: border-box; font-weight: 700;">Plugin</span> hay <span style="box-sizing: border-box; font-weight: 700;">Package. </span>Những plugin được thêm vào sẽ mở rộng thêm tính năng cho Sublime Text.</div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="10-packages-sublime-text-can-thiet-cho-frontend-developers" class="lazy aligncenter size-full wp-image-1492" data-lazy-src="http://nqdung.info/wp-content/uploads/10-packages-sublime-text-can-thiet-cho-frontend-developers.jpg?70564f" data-lazy-srcset="http://nqdung.info/wp-content/uploads/10-packages-sublime-text-can-thiet-cho-frontend-developers.jpg 800w, http://nqdung.info/wp-content/uploads/10-packages-sublime-text-can-thiet-cho-frontend-developers-267x200.jpg 267w" data-lazy-type="image" height="600" sizes="(max-width: 800px) 100vw, 800px" src="http://nqdung.info/wp-content/uploads/10-packages-sublime-text-can-thiet-cho-frontend-developers.jpg?70564f" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" width="800" /></div> <div style="box-sizing: border-box; margin-bottom: 10px;"> Có thể một số package sẽ không tương thích với bản Sublime Text 3. Những tính năng trong bài viết này sẽ giúp cho những frontend developer thao tác nhanh chóng hơn.</div> <h3 style="box-sizing: border-box; color: inherit; font-family: inherit; font-size: 24px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;"> 1. AlignTab</h3> <div style="box-sizing: border-box; margin-bottom: 10px;"> <a href="https://github.com/randy3k/AlignTab" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank">AlignTab</a> là một package giúp bạn sắp xếp lại code một cách gọn gàng hơn. AlignTab có hổ trợ “Preview Mode” giúp bạn có thể xem trước khi nó thực hiện sắp xếp.</div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="align-tab" class="lazy aligncenter size-full wp-image-1493" data-lazy-src="http://nqdung.info/wp-content/uploads/align-tab.jpg?70564f" data-lazy-srcset="http://nqdung.info/wp-content/uploads/align-tab.jpg 700w, http://nqdung.info/wp-content/uploads/align-tab-310x168.jpg 310w" data-lazy-type="image" height="380" sizes="(max-width: 700px) 100vw, 700px" src="http://nqdung.info/wp-content/uploads/align-tab.jpg?70564f" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" width="700" /></div> <h3 style="box-sizing: border-box; color: inherit; font-family: inherit; font-size: 24px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;"> 2. ColorHighlighter</h3> <div style="box-sizing: border-box; margin-bottom: 10px;"> <a href="https://github.com/Monnoroch/ColorHighlighter/" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank">ColorHighlighter</a> là package cho phép bạn nhìn thấy màu sắc của mã màu mà mình sử dụng trong CSS, LESS, SASS,… Bạn cũng có thể thay đổi màu bằng cách nhấn đề chuột vào mã màu cần đổi.</div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="Description" class="lazy aligncenter" data-canonical-src="http://i.imgur.com/UPmEk09.png" data-lazy-src="https://camo.githubusercontent.com/e13f5346a650e7e3fc2269fd4de3904d78c8fd1e/687474703a2f2f692e696d6775722e636f6d2f55506d456b30392e706e67" data-lazy-type="image" src="https://camo.githubusercontent.com/e13f5346a650e7e3fc2269fd4de3904d78c8fd1e/687474703a2f2f692e696d6775722e636f6d2f55506d456b30392e706e67" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" /></div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="Description" class="lazy aligncenter" data-canonical-src="http://sametmax.com/wp-content/uploads/2013/04/hilight-color.gif" data-lazy-src="https://camo.githubusercontent.com/88316b57b3173bdea1c93b0ac5634103bbf649a9/687474703a2f2f73616d65746d61782e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031332f30342f68696c696768742d636f6c6f722e676966" data-lazy-type="image" src="https://camo.githubusercontent.com/88316b57b3173bdea1c93b0ac5634103bbf649a9/687474703a2f2f73616d65746d61782e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031332f30342f68696c696768742d636f6c6f722e676966" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" /></div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="Description" class="lazy aligncenter" data-canonical-src="http://sametmax.com/wp-content/uploads/2013/04/color-picker.gif" data-lazy-src="https://camo.githubusercontent.com/6d582efa7356d7832269c9e164cc1bef8788952e/687474703a2f2f73616d65746d61782e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031332f30342f636f6c6f722d7069636b65722e676966" data-lazy-type="image" src="https://camo.githubusercontent.com/6d582efa7356d7832269c9e164cc1bef8788952e/687474703a2f2f73616d65746d61782e636f6d2f77702d636f6e74656e742f75706c6f6164732f323031332f30342f636f6c6f722d7069636b65722e676966" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" /></div> <h3 style="box-sizing: border-box; color: inherit; font-family: inherit; font-size: 24px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;"> 3. MultiEditUtils</h3> <div style="box-sizing: border-box; margin-bottom: 10px;"> <a href="https://github.com/philippotto/Sublime-MultiEditUtils" rel="external nofollow" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank">MultiEditUtils </a>là package giúp cải thiện tính năng “đa con trỏ” của Sublime Text</div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="multi-edit-utils" class="lazy aligncenter size-full wp-image-1494" data-lazy-src="http://nqdung.info/wp-content/uploads/multi-edit-utils.jpg?70564f" data-lazy-srcset="http://nqdung.info/wp-content/uploads/multi-edit-utils.jpg 700w, http://nqdung.info/wp-content/uploads/multi-edit-utils-310x168.jpg 310w" data-lazy-type="image" height="380" sizes="(max-width: 700px) 100vw, 700px" src="http://nqdung.info/wp-content/uploads/multi-edit-utils.jpg?70564f" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" width="700" /></div> <h3 style="box-sizing: border-box; color: inherit; font-family: inherit; font-size: 24px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;"> 4. Git Gutter</h3> <div style="box-sizing: border-box; margin-bottom: 10px;"> Nếu bạn đang làm việc với Git, mình khuyên bạn nên cài<a href="https://github.com/jisaacks/GitGutter/" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank"> <span class="goog-text-highlight" style="box-sizing: border-box;">Git Gutter</span></a>. Package này giúp cảnh bảo những thay đổi phiên bản của bạn với Git server</div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="git-gutter" class="lazy aligncenter size-full wp-image-1495" data-lazy-src="http://nqdung.info/wp-content/uploads/git-gutter.jpg?70564f" data-lazy-srcset="http://nqdung.info/wp-content/uploads/git-gutter.jpg 700w, http://nqdung.info/wp-content/uploads/git-gutter-310x168.jpg 310w" data-lazy-type="image" height="380" sizes="(max-width: 700px) 100vw, 700px" src="http://nqdung.info/wp-content/uploads/git-gutter.jpg?70564f" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" width="700" /></div> <h3 style="box-sizing: border-box; color: inherit; font-family: inherit; font-size: 24px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;"> 5. Modific</h3> <div style="box-sizing: border-box; margin-bottom: 10px;"> Cũng giống như GitGutter, <a href="https://github.com/gornostal/Modific" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank">Modific</a> rất hữu ích khi bạn đang sử dụng Git hoặc SVN trong công việc của bạn.Ngoài việc làm nổi bật, bạn có thể xem sự khác nhau giữa các phiên bản và commit bằng cách sử dụng tổ hợp phím <span style="box-sizing: border-box; font-weight: 700;">Ctrl + Alt + D</span></div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="modific" class="lazy aligncenter size-full wp-image-1496" data-lazy-src="http://nqdung.info/wp-content/uploads/modific.jpg?70564f" data-lazy-srcset="http://nqdung.info/wp-content/uploads/modific.jpg 700w, http://nqdung.info/wp-content/uploads/modific-310x168.jpg 310w" data-lazy-type="image" height="380" sizes="(max-width: 700px) 100vw, 700px" src="http://nqdung.info/wp-content/uploads/modific.jpg?70564f" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" width="700" /></div> <h2 style="box-sizing: border-box; color: inherit; font-family: inherit; font-size: 30px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;"> 6. Inc Dec Value</h2> <div style="box-sizing: border-box; margin-bottom: 10px;"> <a href="https://github.com/rmaksim/Sublime-Text-2-Inc-Dec-Value" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;">Inc Dec Value</a> cho phép bạn tăng giá trị của số đồng thời, dù nằm trên những dòng khác nhau. Đối với String thì sẽ chuyển từ viết hoa sang thường và ngược lại</div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="inc-dec-value" class="lazy aligncenter size-full wp-image-1497" data-lazy-src="http://nqdung.info/wp-content/uploads/inc-dec-value.jpg?70564f" data-lazy-srcset="http://nqdung.info/wp-content/uploads/inc-dec-value.jpg 700w, http://nqdung.info/wp-content/uploads/inc-dec-value-310x168.jpg 310w" data-lazy-type="image" height="380" sizes="(max-width: 700px) 100vw, 700px" src="http://nqdung.info/wp-content/uploads/inc-dec-value.jpg?70564f" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" width="700" /></div> <h3 style="box-sizing: border-box; color: inherit; font-family: inherit; font-size: 24px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;"> 7. FileBrowser</h3> <div style="box-sizing: border-box; margin-bottom: 10px;"> <a href="https://github.com/aziz/SublimeFileBrowser" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank">FileBrowser</a> cung cấp khả năng duyệt file linh hoạt hơn so với mặc định. Bạn có thể duyệt thư mục mà không cần đưa con trỏ chuột sang sidebar.</div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="file-browser" class="lazy aligncenter size-full wp-image-1498" data-lazy-src="http://nqdung.info/wp-content/uploads/file-browser.jpg?70564f" data-lazy-srcset="http://nqdung.info/wp-content/uploads/file-browser.jpg 700w, http://nqdung.info/wp-content/uploads/file-browser-310x168.jpg 310w" data-lazy-type="image" height="380" sizes="(max-width: 700px) 100vw, 700px" src="http://nqdung.info/wp-content/uploads/file-browser.jpg?70564f" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" width="700" /></div> <h3 style="box-sizing: border-box; color: inherit; font-family: inherit; font-size: 24px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;"> 8. IconFont</h3> <div style="box-sizing: border-box; margin-bottom: 10px;"> <a href="https://github.com/idleberg/Icon-Fonts-Sublime-Text" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank">IconFont</a> cung cấp đoạn cho nhiều phông chữ biểu tượng phổ biến như <a href="http://fortawesome.github.io/Font-Awesome/" rel="external nofollow" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank">FontAwesome</a> ,<a href="http://paymentfont.io/" rel="external nofollow" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank">PaymentFont</a> , <a href="http://typicons.com/" rel="external nofollow" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank">Typicons</a> và <a href="https://octicons.github.com/" rel="external nofollow" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank">Github Octicons</a>.</div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="icon-fonts" class="lazy aligncenter size-full wp-image-1499" data-lazy-src="http://nqdung.info/wp-content/uploads/icon-fonts.jpg?70564f" data-lazy-srcset="http://nqdung.info/wp-content/uploads/icon-fonts.jpg 700w, http://nqdung.info/wp-content/uploads/icon-fonts-310x168.jpg 310w" data-lazy-type="image" height="380" sizes="(max-width: 700px) 100vw, 700px" src="http://nqdung.info/wp-content/uploads/icon-fonts.jpg?70564f" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" width="700" /></div> <h3 style="box-sizing: border-box; color: inherit; font-family: inherit; font-size: 24px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;"> 9. DistractionFreeWindow</h3> <div style="box-sizing: border-box; margin-bottom: 10px;"> Tính năng Free Distraction của Sublime Text giúp bạn có thể tập trung code mà không bị phân tâm bởi <span style="box-sizing: border-box; font-weight: 700;">minimap, sidebar, và tất cả các tab đang ẩn.<a href="https://github.com/aziz/DistractionFreeWindow" style="background-color: transparent; box-sizing: border-box; color: #242424; font-weight: 500; text-decoration-line: none;" target="_blank">DistractionFreeWindow</a> </span><span class="goog-text-highlight" style="box-sizing: border-box;">giúp bạn định nghĩa các điều kiện để </span><span class="goog-text-highlight" style="box-sizing: border-box;">Distraction Free Mode hoạt động linh hoạt hơn.</span></div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="distraction-free" class="lazy aligncenter size-full wp-image-1500" data-lazy-src="http://nqdung.info/wp-content/uploads/distraction-free.jpg?70564f" data-lazy-srcset="http://nqdung.info/wp-content/uploads/distraction-free.jpg 700w, http://nqdung.info/wp-content/uploads/distraction-free-310x168.jpg 310w" data-lazy-type="image" height="380" sizes="(max-width: 700px) 100vw, 700px" src="http://nqdung.info/wp-content/uploads/distraction-free.jpg?70564f" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" width="700" /></div> <h3 style="box-sizing: border-box; color: inherit; font-family: inherit; font-size: 24px; font-weight: 500; line-height: 1.1; margin-bottom: 10px; margin-top: 20px;"> 10. FilterLines</h3> <div style="box-sizing: border-box; margin-bottom: 10px;"> <a href="https://github.com/davidpeckham/sublime-filterlines" style="background-color: transparent; box-sizing: border-box; color: #242424; text-decoration-line: none;" target="_blank">FilterLines</a> cho phép bạn tìm kiếm chuổi từ khóa hoặc chuổi RegEx. Tính năng này rất hữu ích với những ai phải duyệt <span style="box-sizing: border-box; font-weight: 700;">dữ liệu thô</span> ở dạng JSON, JavaScript Array, CVS</div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <img alt="filter-lines" class="lazy aligncenter size-full wp-image-1501" data-lazy-src="http://nqdung.info/wp-content/uploads/filter-lines.gif?70564f" data-lazy-type="image" height="474" src="http://nqdung.info/wp-content/uploads/filter-lines.gif?70564f" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" width="800" /></div> <div style="box-sizing: border-box; margin-bottom: 10px;"> Trên đây là một số package cần thiết cho frontend developer nếu bạn biết thêm thì hãy để lại comment để mình bổ sung vào vài viết này.</div> <div style="box-sizing: border-box; margin-bottom: 10px;"> <br /></div> <div style="box-sizing: border-box; margin-bottom: 10px;"> Nguồn: Copy </div> </div>

10 Packages Sublime Text cần thiết cho Frontend Developers

Sublime Text là một trong những IDE đang được rất nhiều lập trình viên yêu thích vì tính năng hấp dẫn và rất nhẹ. Sublime Text  l...

Read more »