Must-Have Sublime Text Extensions For Web Developers

The world of IDE software is massive with programs for every operating system. My personal favorite is Sublime Text, and I use it for all my coding projects.

Aside from Sublime’s many optional themes, keyboard shortcuts and lightning-fast workflow, it also has a vast community of developers that create extensions that make the software even better and easier to use.

If you search around you’ll find hundreds of extensions to pick from. And for this post, I’ve curated some of the best Sublime extensions that’ll save time and effort in any web dev workflow.

If you’re looking for Sublime Text extensions for WordPress, try this collection.

1. Emmet

Sublime Text and Emmet are practically one and the same. The Emmet extension doesn’t serve just one function or purpose.

It’s a massive toolkit for web developers with a bunch of handy coding features, extra keyboard shortcuts, and features for automating your workflow. This can help you manage your code snippets or add extra features like auto-image attributes.

If you look through Emmet’s massive documentation you’re sure to find a bunch of handy things you can adopt. It’ll take some adjusting to make this a normal part of your workflow, but in the end, it’s worth learning.

There’s no better extension for Sublime Text than Emmet. Especially for anyone frequently coding websites from scratch.

2. Autoprefixer

Many of the newer CSS3 properties have prefixes to handle different rendering engines. These are mostly used for the WebKit, Gecko, and Microsoft engines which are grouped together as vendor prefixes.

Not every property requires these prefixes anymore. Browsers have come a long way in a few short years, and most CSS3 properties can run without prefixed code.

But if you want to support the largest possible audience then you’ll want Autoprefixer. This can be installed via the Sublime package manager with just a few clicks, and it’s even easier to add into your codebase.

3. Themr

Sublime comes with a couple default themes with certain syntax highlighting styles. But you may want to add more into your arsenal and that’s where Themr can help.

This small add-on lets you sort through available UI themes and organize them according to your favorites, even assigning keyboard shortcuts if needed.

Plus you can add new themes as you find them and organize them all together. Your “favorite” themes can even be saved as presets based on whatever file types you’re using(ex: HTML, JS, and PHP files).

4. JSHint

Debugging JavaScript is a pain. If you practice debugging you’ll naturally get better at the process, but it’s still not easy to do.

With Sublime’s JSHint extension you can bring JavaScript debugging right to your IDE. This simple add-on lets you test your JavaScript code from any JS file.

A new console window appears on the IDE where you can sift through errors, find what they mean, and quickly correct them.

You can even run this from the terminal window if you want to check a file outside of Sublime. An excellent tool for developers who continuously find themselves working in JavaScript.

5. Auto Filename

Almost every webpage references other files somewhere in the code. These files could be images, JS scripts, stylesheets, or even other dynamic pages like .php files.

With Auto Filename you’ll save loads of time manually entering these files. Just start typing the name and this extensions handles the rest with an autocomplete field.

It works for all elements inside your HTML so you can quickly add directory paths for images, CSS files, JavaScript plugins, you name it.

6. Sidebar Enhancements

Sublime Text comes with an optional sidebar view that works like a directory. This is handy when you’re working on a larger project with multiple files and includes.

Sidebar Enhancements takes the default Sublime sidebar and, well.. enhances it!

This gives you multiple folder views, more options in the right-click context menu, easy copying of path URIs and other handy options like “open with” for graphics.

Not every developer uses the sidebar feature. I even turn it off when I’m just editing single files. But if you continuously use Sublime’s sidebar this extension will prove invaluable to your workflow.

7. ColorPicker

Most of us are familiar with color picker tools in programs like Photoshop. They work great and often they’re all we need for a solid UI process.

Sublime’s ColorPicker extension lets you bring the color selection process right into your IDE. Of course, there are plenty of free color webapps you could rely on instead.

But this plugin is superb since it works right inside the code window.

8. Git

If you’ve never used Git version control then it can be a long road to learn. The right resources will help and once you fully understand Git you’ll never want to go back.

One of the best resources you can use is the Git extension for Sublime. This automates the Git version control workflow and makes it super easy for you to manage packages from your IDE.

It’s a super simple plugin to work with, and it’s compatible with all operating systems.

Many developers prefer to use the command line for Git management, but Sublime is another viable choice.

9. Bracket Highlighter

Here’s an sought-after feature that’s definitely useful when coding big pages.

The Bracket Highlighter extension automatically highlights the opening and closing brackets inside your code. All you need to do is place your cursor inside the starting(or ending) bracket, then sift through the file to find the matching tag.

It’ll help you visualize HTML containers in your page and see which elements are contained inside other elements.

Sublime does have a small bracket highlighting feature with Emmet, but I prefer this extension since the highlighting is much clearer.

The post Must-Have Sublime Text Extensions For Web Developers appeared first on Speckyboy Web Design Magazine.