Date post: | 07-Jul-2018 |
Category: |
Documents |
Upload: | manuela-taveras |
View: | 214 times |
Download: | 0 times |
of 7
8/19/2019 Brackets - Extensions Recommended
1/14
My Recommended Brackets Extensions
M A R C H 3 1 S T , 2 0 1 5
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 anappreciation 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 (http://brackets.io/).
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 (http://jpapa.me/gulpps) 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.
Brackets Extensions
JohnPapa.net (/) (http://github.com/johnpapa (http://twitter.com/john_papa)
Home (/) Categories (/categories.html)
8/19/2019 Brackets - Extensions Recommended
2/14
8/19/2019 Brackets - Extensions Recommended
3/14
AngularJS Code Hints (https://github.com /sirajc/Brackets-AngularJS-CodeHints/)Extend Brackets HTML code hints and collif’s Brackets-HTML5CodeHints
(https://github.com/coliff/Brackets-HTML5CodeHints) with AngularJS elements like
ng-include, ng-view and attributes such as ng-class, ng-controller, ng-app.
Autopre�xer (https://github.com/mikaeljorhult /brackets-autopre�xer)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).
Autosave on View Change (https://github.com /marcantony/brackets-autosave-on-view-change)
Autosaves the current document, if changed, when switching to another document oron window blur (when switching away from Brackets to something else).
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.
Brackets Bower (https://github.com/albertinad
/brackets-bower)Install/Update/Remove a package from Bower, prune the bower folder, and configure
bower using the .bowerrc file.
8/19/2019 Brackets - Extensions Recommended
4/14
Click the bower icon in the Brackets right border.
Install or update packages.
Modify the .bowerrc file.
Brackets Css Color Preview (https://github.com /cmgddd/Brackets-css-color-preview)CSS color preview extension for Brackets. You can toggle this extension to enable it
from the view menu.
8/19/2019 Brackets - Extensions Recommended
5/14
Brackets File Tabs (https://github.com/crot4lus /Brackets---Tabs)Use tabs rather than the sidebar for working files. Enable by choosing Show tabs in
the View menu.
Brackets Git (https://github.com/zaggino /brackets-git)Provides Git integration for Brackets
Brackets Icons (https://github.com/ivogabe /Brackets-Icons)Adds file icons from the Ionicons project (https://github.com/driftyco/ionicons) to the
Brackets file tree.
8/19/2019 Brackets - Extensions Recommended
6/14
Brackets Snippets (by edc) (https://github.com /chuyik/brackets-snippets)Add custom snippets to Brackets.
8/19/2019 Brackets - Extensions Recommended
7/14
Click on the lightbulb icon in the right border.
Then click import and choose a file to select a yaml file containing snippets. Youcan use my Angular snippets found here (https://raw.githubusercontent.com/johnpapa
/angular-styleguide/master/assets/brackets-angular-snippets.yaml), to try it out.
Code Folding (https://github.com/thehogfather /brackets-code-folding)A code folding extension for Brackets based on CodeMirror’s folding addon
(http://codemirror.net/demo/folding.html). Peforms code folding based on brace ({}, [])
matching and multiline comments for javascript, json, css, php and less files. Also has
some support for html and xml files based on tag matching.
The following are the default keyboard shortcut keys for the code-folding extension.
8/19/2019 Brackets - Extensions Recommended
8/14
Ctrl-Alt-C Collapse code region at current cursor position
Ctrl-Alt-X Expand code region at current cursor position
Alt-1 Collapse all code regions in current editor
Shift-Alt-1 Expand all code regions in current editor
Duplicate Files & Folders (https://github.com /torinpascal/brackets-duplicate-extension)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".
EditorCon�g (https://github.com/kidwm /brackets-editorcon�g)Adds support for EditorConfig (http://editorconfig.org/). What’s that? EditorConfig
allows you to use the same editor settings in multiple editors and IDEs via a config
file.
EmmetAdds support for Emmet (http://emmet.io/) commands. Super helpful for HTML
coding.
File Tree Exclude (https://github.com/gruehle /exclude-folders)Brackets extension for excluding folders from the file tree, find in files, and quick
open. By default, this extension excludes all node_modules folders
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
8/19/2019 Brackets - Extensions Recommended
9/14
Indent Guides (https://github.com/lkcampbell /brackets-indent-guides)Shows indent guides in the code editor. Enable by selecting View and
Indent Guides .
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"
8/19/2019 Brackets - Extensions Recommended
10/14
"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
Markdown Preview (https://github.com /gruehle/MarkdownPreview)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
8/19/2019 Brackets - Extensions Recommended
11/14
icon to open the preview panel.
Whitespace Normalizer (https://github.com /dsbonev/whitespace-normalizer)Alters whitespace on document save:
trims trailing whitespaces
transforms tabs to spaces
ensures newline at file end
Honorable Mentions
8/19/2019 Brackets - Extensions Recommended
12/14
← Previous (/angular-and-gulp) Next → (/web-dev-with-editors-and-ides)
AngularJS for Brackets (https://github.com /angular-ui/AngularJS-brackets)QuickEdit directives, controllers and services? Put your cursor on a directive in
HTML, then click CMD + 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 (https://github.com/ahuth /brackets-paste-and-indent)Automatically apply the correct indentation to pasted text.
brackets (1) , (/categories.html#brackets-ref)
editor (1) , (/categories.html#editor-ref) ide (1) , (/categories.html#ide-ref)uncategorized (150) (/categories.html#uncategorized-ref)
Share Post
Twitter (http://twitter.com/share?text=My Recommended Brackets Extensions&via=john_papa)
Facebook (https://www.facebook.com/sharer/sharer.php)
Google+
John Papa
Evangelist on the
Loose
8/19/2019 Brackets - Extensions Recommended
13/14
8/19/2019 Brackets - Extensions Recommended
14/14
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/)