Code editors for designers/developers are in no shortage whatsoever. But, there is always going to be a type of software that will stand out from the rest, and in the market of code editors, it is Sublime Text — the world’s most widely and purposefully used code editor that has helped tens of millions of programmers to become full-scale developers and website designers. The magic of Sublime Text lies in its flexible functionality, and with the ability to extend the code editor with custom packages and plugins.
With the use of right packages, one can create their Sublime Text environment to reflect a fully comprehensive building, testing, and launching environment, which not only adds to productivity but also the quality of code/software that you are building. Sublime Text offers a thoroughly friendly development environment for those who are working heavily with back-end and front-end programming languages. Front-end developers are crazy over Sublime, and you will find their passion invaluable to your learning curve.
What made Sublime Text stand out from any other code editor in the market, is the integration of a package manager that can be used to add custom plugins and custom Sublime Text themes to personalize the coding experience. This has led to the development of thousands of unique Sublime plugins that add the most versatile functionality to your development environment. Some of the plugins have been downloaded over a million times, indicating their great success in making Sublime Text the best code editor on the planet. We will be showcasing only the best Sublime Text plugins for both the version 2 and version 3. We made sure to include as much variety as possible, with the intention of these plugins to be used by both front-end and back-end developers. Share your own in the comments!
Package Control is what makes everything else work from this list, so you will need to download and activate it for your Sublime Text installation. It’s your little plugin central for Sublime. It gives you access to a simple module that lets you download, install and activate all kinds of Sublime plugins, but also supports general developer tasks and helps with having more time to focus on coding. To date, more than seven million users have installed Package Control, indicating the huge popularity of the Sublime package manager, and being a testament of how an open-source project can be of help to millions of users, at the cost of donations from those who use the platform, incredible work indeed.
Materialized CSS Snippets
Materialize’s a huge front-end framework for modern and responsive design development using material design standard. The Materialized plugin for Sublime brings you the CSS components directly onto your editor so that you can access them all instantly with basic commands. This will save you enormous amounts of time and energy that would otherwise go into looking up the syntax manually, which is another factor that’s important for code editors like Sublime — the more you use packages, the easier it becomes to understand how certain libraries and even programming languages work, and how you can better understand the use of specific syntax.
Formatting will always be important for coders, not only to help yourself create a more solid codebase, but to help anyone else who is going to touch your code to have better navigation access through your code. The StandardFormat plugin will take the well-known Standard Format JS library, then execute it against your written code to convert your code into traditional JS standard format code. Very quick to get going with, and the results are staggering.
CSS Media Query Snippets
Media queries are the syntax that we use when we want to develop for mobile devices, or responsive screen sizes. With media queries, our designs can quickly be turned into mobile compatible platforms. The plugin at hand we are looking at right now, is aimed to help developers and designers like you and me to easier access CSS media queries through pre-written templates. With the plugin, you would only need to type in “media” and select any of the available pre-written templates and instantly have access to modification for that particular device. It does exactly what you think it would, even more intuitively once you install the plugin. With more than 16,000 downloads, this is one of the most higher rising plugins in recent months.
Shell access has always been dreaded. Back in the day, a lot of servers that would run insecure configurations combined with a PHP platform would fall prey to hackers who could easily run Shell Exec commands directly from a vulnerability in their PHP platform. It was an interesting time to be a part of the web, certainly far less frequent in today’s world when we have platforms like WordPress, completely changing the landscape of website building. Anyhow, the Shell Exec plugin is for running shell commands like git, rvm, rspec, ls, etc. with Bash, Zsh and others inside your Sublime Text 3. This is what you would call an advanced way of saving your own time, just remember to configure your firewall and access patterns so that no intruder could just take over your system.
What it comes down to, is productivity. Sublime Text plugins are all about saving you time. Giving you the tools and features to make your development environment much smoother, much more flexible, and certainly usable. The terminal is one of those libraries that you don’t think you need, until you start using it. What the package/plugin does, it creates shortcuts and menu entries that can be used to open your Terminal at the position of the file that you are currently editing, or you can quick jump towards the root folder where your project is residing, also in the terminal of course. It’s an easy package, with easy functionality, yet somehow it makes life easier for more than 220,000 people already. Are you one of them?
Live reloading allows you to quickly make changes and understand their impact on the production version of the platform. We don’t need to explain in detail what this plugin does, the name explains it by itself.
Git is the worlds most widely used version control management system. With Git, you can quickly scale your projects with a timeline of changes that helps to maintain a solid foundation from the day that the project was started. In the bigger picture, Git allows teams and companies to manage their code structure without feeling like something is missing, Git helps to organize everything neatly into one place, and developers can focus on what they do best instead; develop cool stuff! The plugin will bring a full and comprehensive Git integration within your Sublime Text editor.
Laravel Blade Highlighter
You might have been a PHP developer in the past, but you got bored of the language and decided to try something new… well, before you consider yourself done with PHP for good, perhaps you should give a try to Laravel, an amazing open-source PHP framework that has changed the landscape of PHP and general PHP development. Without question, one of the hottest frameworks of the decade, all presented back to the community by a single developer who had a vision of creating something unique, and that vision was achieved rather quickly, needless to say. Laravel uses what’s called a Blade Engine, a specific syntax that supports the development of new software on top of the framework, frankly.. it’s hard to imagine coding Laravel on Sublime without the help of this plugin, and 120,000 people would agree with me on that.
Everyone’s going crazy over HTML5 — the most modern language for the browser. Still, so many changes are yet to come to browsers, the world’s unprepared! Though, those who do code with HTML5, you probably will want to install a plugin that can help you to autocomplete certain syntaxes and attributes. That’s why you need the HTML5 Attributes plugin. With this, you can write HTML5 code and have it auto complete itself depending on what you need, and it can even fetch in-depth syntax too, so you can quickly structure any particular HTML5 element with the use of a few Tab clicks. Depending on your settings you may need to press Ctrl-Space to display the completions within an opening HTML-tag.
They say that truly successful people use lists to manage their lives and the goals they want to achieve. In some ways that statement is right, lists do help us with managing our goals and projects, and it gives us a concise understanding of where we stand on any particular issue. That’s what lists are good for, for having a timeline of what we are trying to do. PlainTasks lets you create a todo list within your Sublime editor directly. You can quickly assess and create a roadmap for your project, giving yourself the required understanding of what you’re trying to build, and because it is being done within Sublime, you can always Tab over to it to read up on what still needs to be done, or cross over the stuff that has already been accomplished.
Advanced New File
AdvancedNewFile helps you create new files through directories and root paths, but does it in such a way where it compliments your development workflow.
We at Colorlib, we love jQuery. We have a strong passion for jQuery, and our past publications based on the subject should be enough proof of that: see here, here, and here. We’re super pleased and happy to promote the jQuery plugin for Sublime Text users, a plugin that more than 500,000 developers are actively enjoying and using. jQuery is a language of the web, it what makes the web more interactive, more friendly to the user.
The jQuery plugin for Sublime will intuitively understand what you are trying to program, and give you hints, clues, tips and autocomplete functions whenever you are writing new jQuery code. In turn your productivity levels are going to rise through the roof thanks to being able to write code without referencing back to the documentation every five minutes. This goes in particular for projects that require a ton of coding and management. It’s priceless to have a plugin do all the hard work for you, and in just a few hours of using this plugin, it becomes clear — these plugins are life (productivity) saving!
SASS is the preprocessor that you need to learn! If you want to experience CSS programming in a new light, it helps to learn a preprocessor that can easily convert a scripting language into an actual functional programming language where you don’t need to reuse the same syntax and patterns every ten seconds. SASS just makes it incredibly easy to “program” with CSS, and treat CSS as a functional alternative. Anyway, the SASS plugin has nearly 480,000 downloads already. This incredibly versatile plugin will add the SASS functionality to your Sublime workflow, allowing you to use Sass more effectively, and with more precision.
Forget about referencing back to the web every few minutes to find the color that you need. All that hard work should be happening directly into your editor, or as front-end developers would say: in your browser. ColorPicker will give your Sublime Text editor a functionality boost that will give you a simple way of picking the right colors for whatever it is that you are trying to style at that given moment. ColorPicker works across all platforms, and is easier to use than learn how to say Hello World in Haskell!
LESS is another preprocessor that has a solid community of followers behind it. The plugin at hand will do autocomplete and syntax highlighting for any project files that have been built using LESS. With more than 370,000 active installations, this plugin sits comfortably amongst the top Sublime Text plugins that have ever been released.
If there’s one feature that every single developer can agree is invaluable to code editors like Sublime, then it is going to autocomplete. With autocomplete, we can easily change function names or add new syntax without having to worry that we will have to repeat the same action over and over again, nah.. autocomplete takes care of ALL of that! And this All Autocomplete plugin for the Sublime Text editor is going to rock your world when it comes to code autocompletion using an intuitive interface. This plugin extends your default autocomplete function to search for matching syntax in all of the open project files.
Emmet Css Snippets
Emmet’s a tool that many developers find is hard to live without. It was one of the first most successful tools of its kind, providing proper syntax highlighting and syntax tooltips for HTML and CSS languages. With the help of Emmet, developers can create dynamic and automated scripts to quickly bootstrap a website. The Emmet CSS Snippets plugin is for helping you add the Emmet CSS snippets functionality to Sublime Text. Now you’ll have a much easier workflow to work with when building front-end stuff.
Have problems with your code, or feel like you do? Well, trying to spot any errors in a wall of code is going to be a tough job to do. But, you don’t have to do it anyway. That’s why engineers built linters, tools that help to check your code against common errors, including style issues. The SublimeLinter automates this process for the code that you’re writing in your Sublime Text editor, quickly and accessibility.
j Query Snippets pack
We already discussed one jQuery plugin, so why another? Well, another one because this one is a preconfigured set of jQuery snippets that you wouldn’t otherwise have access to. This means that you would need to write them on your own, and that’s never fun. Instead, you can just use this package and have all these insanely useful snippets at your disposal. It’s perfect within the line of code that you are editing.
Of course, how can we forget the WordPress developers? There is an actual package for those of you who work with WordPress actively. Sublime Text operates in such a way that you can have as many plugins installed as you like. You need to keep this in mind. They will only begin to function when you start to use the code that supports the plugins purpose. Here, we also have the WordPress plugin. It’s a module that will aid in writing the WordPress related syntax for WordPress related projects you are working for. Accelerate your WP development to a whole new level!
Java Script Next – ES6 Syntax
However, you might be a fan of Babel, which also supports ES6 syntax. In that case, you just need to grab a copy of Babel plugin and do your ES6 programming that way. Happy coding whatever you decide to do!
The best code editor for the serious developer
Sublime’s success isn’t based on marketing. It’s pure appeal that developers have found within the design, and function pallet that Sublime so effortlessly delivers. Extendable through plugins and custom themes, you can effectively customize Sublime to suit the needs of any kind of developer. You can also incorporate its modern frameworks and their syntax into your Sublime workflow. You don’t need to check the documentation ever again. Moreover, nobody can match the productive features of Sublime, who would want to compete anyway? Millions have dedicated their work to Sublime. Learning a new code editor would require a lot of time, and most likely be a failed adventure anyway.