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.
Using Sublime Linter 3. The biggest change between this and other versions of Sublime Linter is that a new package must be installed for each of the languages that we need to lint. For instance, if we need to lint JavaScript, PHP, and CSS, we'll need four packages: SublimeLinter; SublimeLinter-php; SublimeLinter-jshint; SublimeLinter-csslint. JavaScript packages Sublime-tern – plugin for TernJS, which analyses your JS code on-the-fly and provides autocompletion, function argument hints, jump-to-definition, and various automatic refactoring operations.
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.
- Sublime Text is one of the best light-weight text editors in existence right now. It is a favourite of many developers, b/c of its beautiful UI, speed and a diverse ecosystem of extensions. This article explains how to use Sublime Text to create a powerful, yet light-weight Javascript development environment. At the end of these.
- 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.
- Packages are Sublime Text's equivalent to modules or WordPress plugins. They're add-ons you can set up to extend the platform's primary functionality and make your work easier. The concept of code editor packages isn't anything new. Most popular platforms, such as Atom, also offer plenty of extensions.
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.
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.
Sublime Text Beautify Javascript
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
This is the final post in my series on Sublime Text, and how to get the most out of the editor.The series is focused on Javascript development, as that is how I use Sublime Text, but itshould be applicable to any developer who uses Sublime Text as part of their workflow.
A large part of Sublime Text's power comes from its extensive collection of packages.There are packages for pretty much every use case. I'm going to limit myself to listing 5 of the most useful for Javascript development, but its definitely worth looking around at the options to find more that fit what you want to do.
#1. Package Control - The Essential Plugin
Sublime Javascript Autocomplete
Package Control is the very first package anyone should install for Sublime Text. It makes it easy to install any other package without having to clone Git repositories or work through Sublimes file structure. And the author has made it relatively easy to install Package control as well. All that is required is a quick copy and paste of code provided on the developers website. Package control makes it easy to install new packages, snippets, themes, and color schemes.
#2. Sublime Linter - Write Better Code
Sublime Linter is a code quality tool for Sublime Text that makes it easy to find and fix code that doesn't meet the standards that you define. For javascript code you can choose to use jsHintjshint or jsLintjslint, the two most popular javascript linters. I highly recommend this package. It places a border around lines that are non-conformant with a message in the bottom border of the editor, but otherwise stays out of your way. It makes it easy to fix code issues as you're editing, rather than waiting till the end and getting a huge error dump when you run your code through the linter.
#3. Emmet - Get Through The Boilerplate
Emmet is a tool for web developers that allows you to use CSS style prefixes to quickly generate html code. It allows quick generation of boilerplate HTML with a familiar syntax, so you can focus on code instead of markup. The github project for the package is here
#4. Git - Take Control Of Your Project Inside Your Editor
Git has rapidly become the go to version control system for open-source projects, and is also used by many private organizations and individual developers. If you're using Git to manage your javascript projects, you should definitely install the git package for Sublime Text. Its not a command line replacement, some commands move much slower than it would with command line, but it allows the convenience of using common commands like add, diff, and blame from within your editor. Android studio dmg.
#5. Clipboard History - Improve your clipboard
Clipboard History is a nice little utility that lets you see the recent history of your clipboard. It only works for snippets copied from within Sublime Text, but its a nice little tool for refactoring, when you're moving code around quickly and want to delete something without losing it completely.
Find your own
In the end different packages work for different people. I highly recommend installing Package Control and browsing around through the options. If you find a great package, leave a comment here and let me know. There are a lot of packages out there, and everybody's needs are different
Article Info
Author Ben McCormick Publish Date January 3rd 2013 Category