Top 15+2 Plugins for Sublime Text 3
A text editor for a web developer is what a katana sword is to a Samurai. It’s your weapon and loyal ally, who will always accompany you to every coding endeavor, so you better ensure you are being as productive as possible.
For me, the weapon of choice is none other than Sublime Text 3. Quick, reliable and due to the wonders of open source we can fully customize it to our heart’s desire. Nevertheless, just simply choosing a tool doesn’t make you a lethal machine, that’s why you should always make sure your weapon is staying sharp and you’re skillful enough to exploit it’s full potential. For that reason, I created a list of packages I use in my everyday work with Sublime Text 3.
1. Package Control
I really can’t understand why Sublime text doesn’t come by default with this, as it’s necessary to install packages. Without it, plugin installation is really time consuming. Check here for installation instructions.
After you install it, you’ll be able to get packages right from Sublime Text. Forget about manually searching and installing stuff!
2. Emmet
Previously known as Zen Coding, it can significantly accelerate the way you’re writing HTML & CSS. Write CSS like abbreviation, hit tab to expand… DONE!
This is by far my favorite plugin of all times. Trust me, that’s life changing power we got here. You’ll never go back after Emmet.
3. SublimeLinter (Together with JSHint)
For me, debugging is one of the most tedious tasks in programming. Linting code is a way to ensure my code is cleaner and more bug-free. Use this and crash bugs faster than ever.
Linters are separate, but you can practically find any language you’ll ever need.
4. SidebarEnhancements
Provides some key features to the sidebar like open in browser, copy name, copy path etc… These kind of features should really be there by default in any text editor.
5. Bracket HighLighter
This plugin gives a great visual hint to where is a tag or bracket ending. Helps a lot, especially in debugging by highlighting the scope
6. Color HighLighter
It underlines hexadecimal color codes (like #FFFFFF, rgb(255,255,255), red, etc.) with their real color. When you click on that particular code it fills it with color.
It even comes with it’s own color picker, just press ctrl +Shift + C and pick your colour.
7. Color Picker
If you are only interested in the color picking capabilities of color highlighter, then you should know there is a standalone color picker package too.
Never again search for online sites which provides color picking services, you can do it faster through your editor and even without internet access. Just press Ctrl+Shift + C
8. SublimeCodeIntel
Another favorite of mine, you can add IDE capabilities to sublime text. Just start typing code as usual , autocomplete will pop up whenever it’s available. It also allows you to jump around symbol definitions even across files with just a click. It supports a great variety of languages like JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP
You can see a better demonstration here
9. Git
Full featured git integration for sublime text. Time saver, who doesn’t use this?
10. Git Gutter
This plugin provides right to your editor a live git status in your project. It can show three states:
- Altering/editing lines with a square
2. Adding lines with a green cross
3. Removing lines with a red arrow
11. LiveReload
A page reloading plugin for sublime text 3.
12. AdvancedNewFile
Another time saver. When you want to make a new file, you click New file then it opens a dialog to save etc. Well… forget about that. Define a keybinding for bringing up the plugin (in my case Ctrl+Alt+N), enter the path along with the file name in the input field
hit enter and DONE
13. AutoPrefixer
Who has time to add every CSS prefix there is? Not us! Just run this and it will automatically add them. Simple and blazing fast!
14. HTML-CSS-JS Prettify
Run this and it will format your HTML, CSS, Javascript or JSON code. It’s really helpful if you’re a messy coder.
Look and Feel
You’ll be spending a lot of hours in front of your editor, so you better make it as pleasing to your eyes as possible. One thing to know is that the theme is different from the color scheme.
Theme refers to the looks of the UI like sidebar, tabs, modal windows and the color scheme refers to the background and syntax highlight colors.
15. Themr
I use Themr to quickly change my UI theme, I just hit Ctrl + F5 and select my theme with ease and quickness.
16. Theme
I like every theme that provides Sidebar icons, after changing between these above I finally concluded to Preap. The former themes where too dark and tiring for my eyes in the sidebar section. I think Preap is pleasing enough for me
17. Color Scheme
I prefer the SpaceGray-Eighties
The most pleasant in my eyes are the Preap + SpaceGray Eighties Color scheme so that’s what my editor looks like:
That’s it folks! Hope you picked up some things you didn’t know. Thanks for reading, feel free to make recommendations or share with me stuff I forgot to mention. Happy Coding ^_^
