Sublime Text is one of the most powerful code editors with some amazing features, and it can be even more powerful by installing Plugins or Packages. These plugins add extra functionalities to Sublime Text. And today there are many plugins to fulfill almost any of your coding needs.
Finding a good extension though could be real challenging; some extensions have been completely abandoned by their developers, while others may not longer be compatible with Sublime Text 3, the latest version (at the time of this writing).
If you are a frontend developer, we have handpicked some extensions and put them together for you in this article. These are 10 Sublime Text Packages frontend developers should try out.
More on Hongkiat.com:
- 18 essential plugins to get more out of SublimeText
- [How To] Work with code snippets In Sublime Text
- [How To] Refresh changes on browser with Sublime Text
- [How To] Identify code error In Sublime Text
- Easy Color Picking In Sublime Text
AlignTab is a plugin for aligning your codes. It has a “Preview Mode” which allows you to see how the alignment will be applied (given the RegEx notation) before it is actually applied. It also has the “Table Mode” will allows you to set proper alignment for tables in Markdown format, structured with pipelines:
|. AlignTab is a handy extension to tidy up your code alignment and make it easier to read.
ColorHighlighter is a plugin that shows selected color codes with their visual color. If you select “#fff” it will show you the color, white. ColorHighlighter supports all CSS color formats such as Hex, RGB, HSL, HSV, and include color keywords like “red”, “green”, etc. It also show you LESS, Sass, and Stylus variables that contains a color value. It’s a piece of plugin that will help you be more intuitive when working with colors.
MultiEditUtils plugin improves the SublimeText built-in “multi-cursor” and “multi-selection” feature, saving us time for editing lengthy code lines. For example: you can merge or swap between selected lines, it also improves SublimeText “split selection” by allowing you to specify the notation to split selected lines. I think it’s a must have plugin to install for pro-coders.
4. Git Gutter
If you are working with Git, Git Gutter is a recommended Sublime Text plugin to install. GitGutter will show a flag in the gutter area, of any edits, additions, or removal you did within your code. It’s a useful code to instantly see the comparison between your code edition against your commit, branch, or the HEAD repository.
Modific is useful when you’re using Git or SVN in your work. Just like GitGutter, Modific will mark a change in your codes. Besides highlighting changes, you can also view or compare the difference between the current code and the last commit by pressing Ctrl + Alt + D. Other things you can do with Modific include preview the committed code for the current line as well as reverting code modifications.
6. Inc Dec Value
Inc Dec Value allows you to increase or decrease numbers simultaneously, even if they are on different lines. Besides numbers, you can also change the value of dates, and HEX colors. To use this plugin in general direct the cursor just to the right of the number, then press Alt + ↑ to increase the number or Alt + ↓ to decrease the number. You can also use your mouse wheel.
FileBrowser offers a new way to navigate your files and folders within your project directory. When you install this plugin you can have access to your project directory in a new sidebar, and navigate through it without moving your hands away from your keyboard – like a pro-coder. As you get used to it, this plugin can gradually boost your workflow.
IconFont provides snippets for many popular icon fonts such as FontAwesome, PaymentFont, Typicons and Github Octicons. It works similar to regular HTML snippets where abbreviations will be expanded tothe full-length of classes and HTML code for each icon.
Although Sublime Text’s built-in “Free Distraction” feature lets you focus on the code or content you are typing, when you are in this mode, the minimap, sidebar, and all other tabs are hidden. Distraction-free should not mean losing access to those features. This is where DistractionFreeWindow comes in to give you more flexibility in terms of how the Distraction Free Mode should behave.
- CSS3 — The most complete CSS support for Sublime Text 3.
- SCSS — The TextMate SCSS Official Bundle.
- Stylus — Stylus Package for Sublime Text 2 / 3.
- Sidebar Enhancements — Enhancements to Sublime Text sidebar. Files and folders.
- Alignment — Dead-simple alignment of multi-line selections and multiple selections.
- AlignTab — An alignment plugin using regular expression.
- Bracket Highlighter — Bracket and tag highlighter.
- Emmet — Emmet (ex-Zen Coding) for Sublime Text.
- Sublime Linter — SublimeLinter is a plugin for Sublime Text 3 that provides a framework for linting code. Whatever language you code in, SublimeLinter can help you write cleaner, better, more bug-free code.
- Clipboard History — Clipboard history plugin for Sublime Text 2.
- Color Picker — Color picker for Sublime Text.
- Sublime Minifier — Sublime Text CSS and JS minifier.
- jQuery — Sublime Text package bundle for jQuery.
- Color Highlighter — ColorHighlighter — is a plugin for the Sublime text 2 and 3, which underlays selected hexadecimal colorcodes (like #FFFFFF, rgb(255,255,255), white, etc.) with their real color. Also, plugin adds color picker to easily modify colors.
- MultiEditUtils — A Sublime Text Plugin which enhances editing of multiple selections.
- Modific — Highlight lines changed since the last commit (supports Git, SVN, Bazaar, Mercurial and TFS) / ST2(3) plugin.
- Base16 Color Schemes — Base16 for TextMate & Sublime.
- SASS Snippets — Sass Snippets for Sublime.
- Liquid — Liquid Templates in Sublime.
- Twitter Bootstrap 3 Snippets — Twitter Bootstrap 3 Snippets Plugin for Sublime Text 2/3.
- jQuery Snippets — Code snippets for developing with jQuery.
- Rails Snippets — Sublime Text snippets for the latest Ruby and Rails versions.
- AngularJS — AngularJS code completion, snippets, go to definition, quick panel search, and more.
- LESS — LESS syntax highlighting for Sublime Text.
- Vagrant — Vagrant commands for Sublime Text.
- Http Requester — HTTP client plugin for Sublime Text 2 & 3.
- Markdown Preview — Markdown preview and build plugin for sublime text 2/3.
- Comment Snippets — Several snippets to create fancy PHP, CSS and HTML comments.
- Sublime Git — Full-featured Git integration for Sublime Text 2 and 3.
- Gist — Sublime Text plugin for creating new Gists from selected text.