Professional Documents
Culture Documents
net (/)
Home (/)
(http://twitter.com/john_papa)
(http://github.com/johnpapa)
Categories (/categories.html)
Brackets Extensions
The Extensions window will open where you can search for available extensions or
themes. You can also update or remove installed extensions.
Autoprexer (https://github.com/mikaeljorhult
/brackets-autoprexer)
Brackets/Edge Code extension that parses CSS documents and add vendor prefixes
automatically. This extension uses Autoprefixer (https://github.com/postcss
/autoprefixer) which adds/removes vendor prefixes according to data from Can I Use
(http://caniuse.com).
Beautify (https://github.com/drewhamlett
/brackets-beautify)
Brackets Extension that formats open HTML, CSS, and JavaScript files using
js-beautify. Cmd-Shift-L (Mac) / Ctrl-Shift-L (Win) key.
Then click import and choose a file to select a yaml file containing snippets. You
can use my Angular snippets found here (https://raw.githubusercontent.com/johnpapa
/angular-styleguide/master/assets/brackets-angular-snippets.yaml), to try it out.
The following are the default keyboard shortcut keys for the code-folding extension.
EditorCong (https://github.com/kidwm
/brackets-editorcong)
Adds support for EditorConfig (http://editorconfig.org/). Whats that? EditorConfig
allows you to use the same editor settings in multiple editors and IDEs via a config
file.
Emmet
Adds support for Emmet (http://emmet.io/) commands. Super helpful for HTML
coding.
FuncDocr (https://github.com/wikunia
/brackets-funcdocr)
Generates JS/PHPDoc annotations for functions.
Open a JS or PHP file
Set your cursor on a function declaration
Use the shortCut Ctrl-Alt-D (Win) or Ctrl-Shift-D (Mac) to start the
documentation or /** + Enter
JSCS (https://github.com/globexdesigns
/brackets-jscs) and JSHint (https://github.com
/cfjedimaster/brackets-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 Debug and then Open Preferences File
Make sure your language.javascript.linting.prefer definition includes
"JSCS" and "JSHint"
"language": {
"javascript": {
"linting.prefer": [
"JSHint",
"JSCS"
],
"linting.usePreferredOnly": true
}
}
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 .jshintrc and .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
Honorable Mentions
Share Post
John Papa
Evangelist
on the
Extensions&via=john_papa)
Twitter (http://twitter.com/share?text=My Recommended Brackets
Facebook (https://www.facebook.com/sharer/sharer.php)
Loose
Google+
Previous (/angular-and-gulp)
Next (/web-dev-with-editors-and-ides)
12 Comments
John Papa
Share
Recommend 1
Login
Sort by Best
9 months ago
Great post! I've just downloaded brackets and I must say I'm impressed. What about hiding minified js
files? I found one hiding js files while using coffeescript called BetterCoffee, but can't seem to find one for
hiding .min and .map files for example. I'm still noob at brackets though, could even write my own I guess.
Thanks!
Reply Share
a month ago
Good idea! And if you do code it, should have an easy toggle on/off as you 'may' need it :-D Or at
least know they are being generated, as sometimes they are accidentally generated. I know that
happens with Codekit quite a bit where my config settings for "no output file" keeps getting lost.
Reply Share
Naugh Toekneesfwend
20 days ago
555|STi
a month ago
Man I was looking all around the internet for the "indent guides"!
Thank you!
Reply Share
Fuzzy
4 months ago
singhacz
6 months ago
Thanks for this useful overview, John. As I'm new to Brackets, it helped me a great deal.
Reply Share
Kamal Sharif
7 months ago
Copyright 2015 - John Papa Blog content licensed under the Creative Commons CC BY 2.5
(http://creativecommons.org/licenses/by/2.5/) | Unless otherwise stated or granted, code samples licensed under
the MIT license (http://sm.mit-license.org/). | Site design based on the dbyll theme (https://github.com/dbtek
/dbyll) under the MIT license (http://sm.mit-license.org/)