10 Awesome Sublime Text Packages for Frontend Developers

Sublime Text is an incredibly powerful code editor with a wealth of amazing features. But did you know that you can make it even more powerful by installing plugins or packages? These additions bring extra functionality to Sublime Text and can greatly enhance your coding experience.

However, finding the right plugins can be a real challenge. Some have been abandoned by their developers, and others may not be compatible with the latest version of Sublime Text 3. It can be overwhelming to sift through all the options and find the ones that are truly useful.

That’s why we’ve done the hard work for you. As frontend developers ourselves, we understand the importance of having the right tools. So, we’ve handpicked 10 sublime text packages that we believe every frontend developer should try out. These packages will help you streamline your workflow, increase your productivity, and make coding a breeze.

More posts you might enjoy:

• I want to share with you 18 essential plugins that will enhance your experience with Sublime Text.
• Let me show you how to work with code snippets in Sublime Text.
• I’ll teach you how to refresh changes on your browser using Sublime Text.
• I’ll also show you how to identify code errors in Sublime Text.
• And finally, I’ll explain an easy way to pick colors in Sublime Text.

1. AlignTab

AlignTab is a fantastic plugin that helps you align your code. It has a cool “Preview Mode” that lets you see how the alignment will look before applying it. It also has a “Table Mode” that allows you to easily set alignment for tables in Markdown format, using pipelines. With AlignTab, you can tidy up your code and make it much easier to read.

2. ColorHighlight

Hey there! Let me tell you about an awesome plugin called ColorHighlight. It’s a super handy tool that helps you work with colors more intuitively.

Imagine this: You’re working on a project and you come across a color code like “#fff”. Instead of scratching your head and wondering what that color actually looks like, ColorHighlight comes to the rescue! It shows you the visual representation of the color right away. In this case, it would show you the color white – pretty cool, right?

But that’s not all! ColorHighlighter supports all sorts of color formats like Hex, RGB, HSL, HSV, and even color keywords like “red” and “green”. So whether you’re using a fancy code like “#ff6600” or just the word “blue”, ColorHighlight has got you covered!

Oh, and here’s another neat feature: ColorHighlight also shows you variables from languages like LESS, Sass, and Stylus that contain color values. So if you’re working with those languages, it’s a total game-changer!

So, if you want to make your color coding experience a whole lot easier and more enjoyable, give ColorHighlight a try. Trust me, you won’t be disappointed!

3. MultiEditUtils

The MultiEditUtils plugin is an invaluable tool that enhances SublimeText’s built-in “multi-cursor” and “multi-selection” capabilities, saving us valuable time when editing long lines of code. With this plugin, you have the power to merge or swap selected lines effortlessly. Additionally, it takes SublimeText’s “split selection” feature to new heights by allowing you to define the specific notation for splitting selected lines. Trust me, installing this plugin is a necessity for any professional coder.

4. Git Gutter

If you use Git, I highly recommend installing Git Gutter, a fantastic plugin for Sublime Text. With Git Gutter, you’ll have a visual indicator right in the gutter area that shows any changes you’ve made to your code, whether it be edits, additions, or removals. It’s incredibly helpful because it lets you instantly compare your code to your commit, branch, or the main repository.

5. Modific

If you’re using Git or SVN in your work, Modific is a handy tool. Similar to GitGutter, Modific lets you see any changes you make to your code. It highlights these changes, making them easy to spot. Additionally, you can quickly check the difference between your current code and the last commit by pressing Ctrl + Alt + D. Modific offers even more features, such as previewing the committed code for the line you’re currently working on and undoing code modifications. It’s a powerful tool that can assist you in managing your code effectively.

6. Boost or Lower Values

If you want to change numbers, dates, or HEX colors quickly and easily, Inc Dec Value is the perfect tool for you! This plugin allows you to adjust values effortlessly, whether they’re on the same line or scattered throughout your text.

Here’s how it works:

• Place your cursor to the right of the value you want to modify.
• Press Alt + ↑ to increase the value or Alt + ↓ to decrease it. Alternatively, you can use your mouse wheel to make adjustments.

With Inc Dec Value, updating your numbers and colors is a breeze. No need to hassle with manual changes – let the plugin do the work for you!

7. FileBrowser

Are you tired of wasting time searching for files and folders in your project directory? Have you ever wished for a more efficient way to navigate through your files without constantly switching between your keyboard and mouse? Look no further, because FileBrowser is here to save the day!

With FileBrowser, you can seamlessly explore your files and folders right from your project directory. Once you install this amazing plugin, a convenient sidebar will appear, giving you instant access to all your project files. No more endless scrolling or frantic searching – FileBrowser makes it easy to find what you need, allowing you to stay in the flow like a pro-coder.

Imagine the time you’ll save by keeping your hands on the keyboard at all times. With FileBrowser, you can quickly navigate through your project directory using simple keyboard shortcuts, effortlessly moving from one file to another without missing a beat.

But that’s not all – using FileBrowser can also supercharge your productivity. As you become more comfortable with the plugin, you’ll discover even more ways to streamline your workflow. From opening files in a snap to organizing your project structure with ease, FileBrowser empowers you to work faster and smarter.

So why waste another precious minute searching for files and folders when you can have FileBrowser do the hard work for you? Experience a whole new level of efficiency and take your coding skills to new heights – with FileBrowser, the power to master your project directory is at your fingertips.

8. IconFont

IconFont is a fantastic resource that offers ready-made code snippets for various popular icon fonts. These include FontAwesome, PaymentFont, Typicons, and Github Octicons, among others. It functions in a similar way to regular HTML snippets, where abbreviations are instantly expanded to their full-length counterparts. This means you won’t have to remember complex class names or HTML code for each icon anymore!

9. Get Rid of Distractions

When I want to focus on writing code or content in Sublime Text, I use the “Free Distraction” feature. But sometimes, that mode hides the minimap, sidebar, and other tabs. Distraction-free shouldn’t mean losing access to those helpful features. That’s where DistractionFreeWindow comes in – it gives you more control over how Distraction Free Mode works.

10. Easily Search and Filter

With FilterLines, you can easily search through the lines in your document for specific keywords or patterns using regular expressions. It’s a convenient tool for dealing with large amounts of raw data, like JSON, JavaScript Arrays, or CSV files.