10 Sublime Text Packages for Frontend Developers

By Agus. in Toolkit. Updated on March 2, 2020.

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.

1. AlignTab

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.

2. ColorHighlight

ColorHighlight 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.

3. MultiEditUtils

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.

5. Modific

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.

7. FileBrowser

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.

8. IconFont

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.

9. DistractionFreeWindow

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.

10. FilterLines

FilterLines allows you to search through the lines within your document for the given “keyword string” or “RegEx notation”. It’s a handy feature to deal with a large amounts of raw data in the form of JSON, JavaScript Array, CVS.

More related posts: