Sublime Text 3 is a code editor software program that allows you to be able to write code efficiently. Here you can do all that you want within the coding process, and it has a solid number of plugins and packages to customize the platform directly to your needs. Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance. JsPrettier is a Sublime Text Plug-in for Prettier, the opinionated code formatter. GitHub - jonlabelle/SublimeJsPrettier: JsPrettier is a Sublime Text Plug-in for Prettier, the opinionated code formatter. Sublime Text 3 cheat sheet of all shortcuts and commands.
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 Extension
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 Extension
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 extension 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.
Related Posts
As a professional developer, we're sure you have a specific setup you like working with. But we're also guessing that you're always on the lookout for new tools to help you work better, faster, and more efficiently. For those of you using Sublime Text as your text editor, we'd like to share the top 10 Sublime Text plugins you should consider using today.
What Are Sublime Text Plugins?
If you're reading this blog post, you likely know and understand what Sublime Text plugins are. You probably wouldn't have started reading this article if you didn't already have some knowledge of the subject.
But in case you need a refresher, we'll start with an official definition:
Sublime Text is, 'a proprietary cross-platform source code editor with a Python application programming interface (API).' Therefore, Sublime Text Plugins are simply tools that help developers accomplish certain tasks inside Sublime Text in a more convenient way.
Sublime Text 4
The 10 Best Sublime Text Plugins
Sublime Text
Now that we're all on the same page regarding what Sublime Text plugins are, let's dive into the top 10 ones you should start using right now. Ready?
1. Package Control
Of all the plugins on this list, Package Control is the most essential. What does it do? It enables Sublime Text users to quickly and easily install, download, view, and update every other package or plugin they either are, or want to be working with, in Sublime Text.
Installation of Package Control is pretty straightforward and directions can be found on the company's website. Once the tool has been installed successfully, pull up the Command Pallet, using 'ctrl+shift+p' on Windows, or 'cmd+shift+p' on Mac.
This view will allow you to install additional packages off the Package Control website, add plugins hosted outside of Package Control (via the 'Add Repository' feature), and remove plugins completely.
It should be noted that all the plugins on this list are available via Package Control. So, if you work in Sublime Text, do yourself a favor and download Package Control first, then enjoy access to every other plugin mentioned below.
2. SublimeGit
How annoying is it to constantly have to shift back and forth between your text editor and the terminal to run Git commands? It's just tedious and a massive waste of time. Enter SublimeGit, a tool that puts Git and Sublime together and keeps you from having to transition between the two applications.
And the best part is, SublimeGit is now open-sourced. What used to cost a little over $10 can now be had for free. Win!
3. GitGutter
Another Git commands editor, GitGutter allows programmers to have access to Atom and add diff hints to the sidebar gutter. But that's not all. GitGutter also allows its users to copy diff state content, view previous changes, revert changes back to their Git-state, and perform a multitude of other commands.
Save time switching back and forth between your text editor and Git and install one of the top Sublime Text plugins today.
4. Emmet
When it comes to Sublime Text plugins, Emmet is another mainstay because it's an incredible productivity booster. In short, this plugin allows programmers to write HTML and CSS much faster via snippets. These abbreviations can then be expanded into valid HTML tags.
The less code you have to write, while still accomplishing your objectives, the more productive you can become. Use Emmet to write less and get more done at the same time.
5. Alignment
The Alignment plugin let's programmers quickly align their code (including PHP, Javascript, and CSS), to make it easier to read. Multiple sections and multi-line sections can each be aligned with this plugin using 'ctrl+alt+a' on Windows, or 'cmd+ctrl+a' on Mac.
After staring at endless lines of code all day, you'll definitely appreciate Alignment and the way it makes things, neat, tidy, and a breeze to read.
6. SublimeLinter
Linters, as you may know, help ensure consistency amongst multiple team members working on projects together by providing them with a framework for linting code. SublimeLinter, one of the most popular Sublime Text plugins out there, having made Package Manager's top 25 downloaded list, is the most popular linter on the market.
The latest version comes with a couple new features, and allows programmers to choose and install just the linters they regularly use, not the entire package. Handy, right?
7. Terminal
Terminal allows developers to open terminals directly inside the current file they're working on, or the current root project folder, while working in Sublime Text. This time saving feature has been a hit with programmers and the plugin currently sits on Project Control's 100 most downloaded list.
But be warned, while this plugin is a great productivity booster, you'll need to change the shortcut you use to access it. By default, the shortcut is set to 'ctrl+shift+t' on Windows and 'cmd+shift+t' on Mac. Unfortunately, this is also the shortcut to open your last closed file, but a quick adjustment will have you up and running in no time.
8. ColorPicker
ColorPicker makes it easy for developers to adjust colors. We're guessing your current workflow for this task involves you accessing a separate program — Photoshop, for example — and choosing colors there. It works, but it takes up more time than you'd like, right?
Sounds like you need ColorPicker, which allows you to access a color wheel inside of Sublime Text. Once this plugin has been installed, access it by typing either 'ctrl+shift+c' on Windows or 'cmd+shift+c' on Mac.
9. DocBlockr
Docblockr makes the tedious task of documenting and annotating your lines of code simple and straightforward by parsing the functions, parameters, variables, and automatically adding basic documentation.
All you, the programmer, have to do is begin your code with '/**' and this plugin will take care of the rest, saving you both time and hassle. Docblockr works in Javascript, PHP, CoffeeScript, Actionscript, C, and C++.
10. Color Sublime
Finally, much of your day as a developer is spent looking at and using your text editor. So doesn't it make sense to make it look as visually pleasing as you possibly can? We think so!
Color Sublime allows users to install different color schemes for their editors and change the syntax highlighting. But don't worry, you won't have to download every scheme to find the perfect match. This plugin allows you to quickly cycle through the options and choose a favorite before committing.
CloudApp for Developers
While different from the Sublime Text plugins we mentioned in this post, CloudApp's screen recorder is an incredibly helpful tool for developers and we'd be doing you a disservice if we didn't at least mention it in this article.
Why are you reading this post on the CloudApp website? Because many of our customers are developers. They use our solution to:
- Spot and report bugs faster.
- Better communicate with product teams.
- Improve documentation and reduce mistakes.
- Organize files more efficiently and track progress on projects.
- And improve security by adding password protection, expiration dates, and user controls.
Find out more about how CloudApp can make your life as a developer easier here.
The Right Sublime Text Plugins for You
Sublime Text plugins will make you much more productive and allow you to complete your work much easier. The 10 plugins listed in this blog post are the absolute cream of the crop, so we encourage you to explore each of them further and to begin using the ones that fit your personal workflow. For your convenience, the 10 apps are listed again below.
- Color Sublime