You can learn a lot by trying new things. Over the past 18 months I have been switching IDEs and editors every few months going between Atom, Visual Studio, Brackets, WebStorm, and Sublime … and then back again. This has given me an appreciation of the various tools, all of which have their pros. For most of that time I have been living in OSX and lately I’m loving Brackets.
Brackets is lightweight, browser-based, and has a great extension model. I feel very productive in it and can run fast and hard when I get a coding itch I need to scratch. I feel as fast in Sublime and Atom, but have been enjoying the plugins and feel of Brackets more so.
Recently I published a course on Gulp at Pluralsight and have presented many sessions at conferences using Brackets. One of the first questions I get is “What theme are you using?” soon followed by “What other extensions do you use for Brackets?” To save time, I figured I’d post about some of my favorite extensions for Brackets. (Learn more about all of the extensions by clicking on the title.)
I love Visual Studio as an IDE (on Windows) and WebStorm (on a Mac), but for super fast editing I vastly prefer a lightning quick editor. Then when I need more powerful features I jump back to an IDE such as Visual Studio or WebStorm.
Select the extension icon in the right border of Brackets
The Extensions window will open where you can search for available extensions or themes. You can also update or remove installed extensions.
Delkos Dark Theme
My favorite theme for Brackets. Install by choosing the Extensions icon in the right brackets border,the clicking the
install from url link, and entering the github address https://github.com/David5i6/Brackets-Delkos-Dark-Theme.
AngularJS Code Hints
Extend Brackets HTML code hints and collif’s Brackets-HTML5CodeHints with AngularJS elements like ng-include, ng-view and attributes such as ng-class, ng-controller, ng-app.
Brackets/Edge Code extension that parses CSS documents and add vendor prefixes automatically. This extension uses Autoprefixer which adds/removes vendor prefixes according to data from Can I Use.
Autosave on View Change
Autosaves the current document, if changed, when switching to another document or on window blur (when switching away from Brackets to something else).
Cmd-Shift-L (Mac) /
Ctrl-Shift-L (Win) key.
Install/Update/Remove a package from Bower, prune the bower folder, and configure bower using the .bowerrc file.
Click the bower icon in the Brackets right border.
Install or update packages.
Brackets Css Color Preview
CSS color preview extension for Brackets. You can toggle this extension to enable it from the view menu.
Brackets File Tabs
Use tabs rather than the sidebar for working files. Enable by choosing
Show tabs in the View menu.
Provides Git integration for Brackets
Adds file icons from the Ionicons project to the Brackets file tree.
Brackets Snippets (by edc)
Add custom snippets to Brackets.
Click on the lightbulb icon in the right border.
choose a file to select a yaml file containing snippets. You can use my Angular snippets found here, to try it out.
The following are the default keyboard shortcut keys for the code-folding extension.
Ctrl-Alt-CCollapse code region at current cursor position
Ctrl-Alt-XExpand code region at current cursor position
Alt-1Collapse all code regions in current editor
Shift-Alt-1Expand all code regions in current editor
Duplicate Files & Folders
Duplicate files and folders in the project view.
- Duplicate - Right click on a file or folder in the project view and select "Duplicate" from the context menu.
- Copy or Move - Right click on a file or folder and select "Mark" to mark the file/folder to be copied or moved. Then right click on a file or folder at your desired destination and then select "Move to Here" or "Copy to Here".
Adds support for EditorConfig. What’s that? EditorConfig allows you to use the same editor settings in multiple editors and IDEs via a config file.
Adds support for Emmet commands. Super helpful for HTML coding.
File Tree Exclude
Brackets extension for excluding folders from the file tree, find in files, and quick open. By default, this extension excludes all node_modules folders
Generates JS/PHPDoc annotations for functions.
- Open a JS or PHP file
- Set your cursor on a function declaration
- Use the shortCut
Ctrl-Shift-D(Mac) to start the documentation or
Shows indent guides in the code editor. Enable by selecting
JSCS and JSHint
Enable JSCS and JSHint linting.
If you have disabled the default Brackets JSLinting service, you will need to manually enable JSCS and JSHint in your Brackets preferences file.
- Go to
Open Preferences File
- Make sure your
I prefer to use JSHint and JSCS and disable the default of JSLint. Setting `linting.usePreferredOnly to true disables JSLint, which comes out of the box with Brackets.
These will look for your
.jscsrc files for the rules to use for linting. You can see the violated rules in a collapsible window at the bottom of the editor
Markdown editor and preview support.
When a markdown document (with extension “.md” or “.markdown”) is open, a markdown icon is shown in the toolbar at the top of the Brackets window. Click this icon to open the preview panel.
Alters whitespace on document save:
- trims trailing whitespaces
- transforms tabs to spaces
- ensures newline at file end
AngularJS for Brackets
QuickEdit directives, controllers and services? Put your cursor on a directive in HTML, then click
E for quick edit in Brackets. This extension will try to locate the source code and open it in an in-line window so you can edit it.
This works in some places, but not others. Though I keep an eye on it as it is great when it works.
Paste and Indent
Automatically apply the correct indentation to pasted text.