My Recommended Brackets Extensions
Total Page:16
File Type:pdf, Size:1020Kb
JohnPapa.net 356 3http:55twitter.com/9ohn_papa6 3http:55github.com/9ohnpapa6 Home (56 Categories (5categories.html6 My Recommended Brackets Extensions MARCH 31ST, 2015 You can learn a lot by trying new things. Over the past 18 months I have been switching &'(s and editors every few months going between Atom, Visual Studio, Brackets, WebStorm, and Subli%e … 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 & have been living in OSX and lately I2m loving Brackets (http:55brackets.io/6 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. & *eel 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:559papa.me/gulpps6 and have presented many sessions at conferences using Brackets. !ne of the first questions I get is =.hat 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 *avorite extensions for Brackets. (Learn more about all of the extensions by clicking on the title.) & love Visual Studio as an &'E (on Windows) and WebStorm (on a Mac), but *or 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 +isual Studio or WebStor% Brackets Extensions 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 (https://github.com /David5i6/Brackets-Delkos-Dark-Theme) My *avorite theme for ,rackets. Install by choosing the Extensions icon in the right brackets border,the clicking the install from url link, and entering the github address https:55github.com/'avid5iC5,rackets-'elkos-Dark-Theme (https:55github.com 5'avid5iC5,rackets-'elkos-Dark-Theme6 AngularJS Code Hints (https://github.com /sirajc/Brackets-AngularJS-CodeHints/) Extend Brackets HTML code hints and colli*’s Brackets-HTML5CodeHints 3https:55github.com/coli**/Brackets-HTML5CodeHints6 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:55github.com/postcss 5autoprefixer6 which adds/removes vendor prefixes according to data from Can & Use 3http:55caniuse.com6 Autosave on View Change (https://github.com /marcantony/brackets-autosave-on-view- change) Autosaves the current document, if changed, when switching to another document or on window blur (when switching away *rom Brackets to something else). Beautify (https://github.com/drewhamlett /brackets-beautify) Brackets Extension that formats open HTML, CSS, and JavaScript files using 9s-beautify. Cmd-Shift-L (Mac) / Ctrl-Shift-L (Win) key. Brackets Bower (https://github.com/albertinad /brackets-bower) &nstall5Dpdate/Remove a package *rom Bower, prune the bower folder, and configure bower using the .bowerrc *ile. Click the bower icon in the Brackets right border. &nstall 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 *rom the view menu. Brackets File Tabs (https://github.com/crot4lus /Brackets---Tabs) Dse tabs rather than the sidebar *or 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 &onicons project (https:55github.com/dri*tyco/ionicons6 to the Brackets file tree. Brackets Snippets (by edc) (https://github.com /chuyik/brackets-snippets) Add custom snippets to ,rackets Click on the lightbulb icon in the right border. Then click import and choose a file to select a yaml file containing snippets. You can use my Angular snippets found here (https:55raw.githubusercontent com/9ohnpapa 5angular-styleguide/master/assets/brackets-angular-snippets.yaml6, to try it out. Code Folding (https://github.com/thehogfather /brackets-code-folding) A code *olding extension for Brackets based on CodeMirror’s folding addon 3http:55codemirror.net5demo/folding.html6 Peforms code folding based on brace 3E}, [H6 matching and multiline comments *or javascript, 9son, 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. Ctrl-Alt-C Collapse code region at current cursor position Ctrl-Alt-X (xpand code region at current cursor position Alt-1 Collapse all code regions in current editor Shift-Alt-1 (xpand all code regions in current editor Duplicate Files & Folders (https://github.com /torinpascal/brackets-duplicate-extension) 'uplicate files and folders in the project view Duplicate - Right click on a file or folder in the project view and select I'uplicate" from the context menu. Copy or Move - Right click on a file or folder and select IMark" to mark the *ile/*older to be copied or moved. Then right click on a file or folder at your desired destination and then select IMove to Here" or ICopy to Here". EditorCon�g (https://github.com/kidwm /brackets-editorcon�g) Adds support for EditorConfig (http:55editorconfig.org/6 What’s that? (ditorConfig allows you to use the same editor settings in multiple editors and I'Es via a config file. Emmet Adds support for Emmet (http:55emmet.io/6 commands. Super helpful for HTML coding. File Tree Exclude (https://github.com/gruehle /exclude-folders) Brackets extension *or excluding *olders *rom the file tree, find in *iles, and quick open. By default, this extension excludes all node_modules folders FuncDocr (https://github.com/wikunia /brackets-funcdocr) :enerates JS/;HPDoc annotations for functions. !pen a JS or PHP file Set your cursor on a function declaration Dse the shortCut Ctrl-Alt-D (Win) or Ctrl-Shift-D (Mac) to start the documentation or /** + Enter 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. &f you have disabled the default Brackets JSLinting service, you will need to manually enable JSCS and JSHint in your Brackets preferences file. :o to Debug and then Open Preferences File Make sure your language.javascript.linting.prefer definition includes "JSCS" and IJSHintI "language": { "javascript": { "linting.prefer": [ "JSHint", "JSCS" ], "linting.usePreferredOnly": true } } & 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 icon to open the preview panel Whitespace Normalizer (https://github.com /dsbonev/whitespace-normalizer) Alters whitespace on document save: tri%s trailing whitespaces transforms tabs to spaces ensures newline at file end Honorable Mentions AngularJS for Brackets (https://github.com /angular-ui/AngularJS-brackets) MuickEdit 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) , 35categories.html#brackets-ref6 editor (1) , 35categories.html#editor-ref6 ide (1) , 35categories.html#ide-ref6 uncategorized (150) 35categories.html#uncategorized-ref6 Share Post John Papa Twitter 3http://twitter.co%/share?text=My Recommended BracketsEvangelist Extensions&via=9ohn_papa on the 6 Loose Facebook 3https://www.facebook.com/sharer/sharer.ph#6 GoogleJ ← Previous (5angular-and-gulp6 Next → (5web-dev-with-editors-and-ides6 12 Comments John Papa 1 Login Recommend 1 ⤤ Share Sort by Best Join the discussion… Tjaard Du Plessis • 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! 1 • Reply • Share › Russell > Tjaard Du Plessis • 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 Great article -- thanks! • Reply • Share › 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 I was a faithful Coda-coder, BBedit-freak, Espresso-enthusiast.