Extending Brackets

For some time now Brackets has been my Editor of choice for web projects.

For those of you who don’t know it. It is a HTML5 based editor. Using it you develop with the web, for the web. Alongside many great features like quick edit for styles and just generally being awesome to code HTML, CSS and JavaScript the thing that makes me really love it is it’s live preview that can show you in real time how your changes to your code will look. With the new 0.42 Version Brackets now supports Designs, or Themes if you want to call them that. Due to that I revisited my Plugins and thought I would share what I am using.

Extensions I use

HTML templates

Who want to type the skeleton of a HTML page every time he creates one? I for one do not. So this extension comes in very handy. It created the most needed tags for a projects and lets me jump right into it. Here is what a HTML file may look after using this extension:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Untitled Document</title>
</head>
<body>

</body>
</html>

Brackets Todo

I don’t use this nearly as often as I could but it is a great tool. It enables you to type “TODO” somewhere in your code and will than generate you a list of things to do for the current file or project. Great to keep organized and a good place to start if you are not sure what to do next. There is surely something you still have to do.

File Icons

[caption id=”” align=”alignleft” width=”159”] Geöffnete Dateien in Brackets, mit File Icons Extension.[/caption]

This extension is just so awesome. I have no idea how I could life without this. A lot of times I find myself working with three files. One HTML, one CSS and one JS file. Taking a glance at the open files sometimes is not enough to see which is which and open the correct one. This extension however makes that way easier. It adds icons in front of the file names making it possible to see the file I want to jump to at a glance.

Code Overview

This extension provides Brackets with a feature I love about Sublime. You get a bar at the side of the editor which shows you an overview over your code. Useful to quickly find the part of your code you want to jump to.

Themes I use

With 0.42 Brackets introduced the possibility to use Themes. I currently am still playing around with two themes as well as the default dark one and am not sure which one I will choose just yet.

Monokai Dark Soda

This theme makes Brackets look like Sublime. On the one hand this is a theme I am used to especially since I still use Sublime for parts of the PHP work. On the other hand it brings strong colors and differences which at times can be a pain when working with HTML.

Mystique

This theme has less contrast than Monokai and is therefore easier on the eyes. but it comes with a way to display indentation that goes on my nerves.

Brackets Default Dark

The colors bring a bit more contrast and it does not have the weird indentation. Currently my favorite.

 

May this short list of mine inspire you as to what you might use.

Feel free to leave your favorites in the comments.