DSGN

Thoughts

My Brackets Setup

shared on April 27, 2015

As a longtime Notepad++ user in my PC days, I have found Brackets to be a suitable replacement for editing and viewing code…I would even call it an upgrade. I was screensharing with a remote co-worker today and he kept asking me what I use for several plugins, so I thought I would whip up a quick blog post to share with everyone.

You can search for these plugins (and install!) within Brackets itself by bringing up the Extension Manager and copy/pasting the titles below.

Autosave Files on Window Blur

I still hit Cmd + S (sometimes) even though I don’t need to. You’re going to look at your browser right after you edit code anyway, so why waste (a) precious second(s) tapping keys?

Beautify

Brackets CSS Color Preview

Brackets File Tree

Brackets Sass

NOTE: Joshua Miller informed me of this plugin and I must say, it’s a hell of a lot better than trying to remember Terminal commands. Getting this setup was a little tricky, so I’ll make a post detailing the process later I wrote a post explaining how to use it! Apparently, this is a hot topic because I still get at least 20 hits a week on that post alone.

Crazy.

Brackets UI Theming Enable

Recently, I have become interested in customizing my setup even more than just the code window. This plugin allows you to override the Brackets UI with your own brand of awesome.

Code Folding

As of release 1.3 (Brackets notified me of an update as I began writing this post), code folding is integrated by default. Sweet! This plugin will continue to exist for Bracket versions below 1.3.

Dracula

This one is by your’s truly! I love the Dracula theme, but the original Brackets theme I was using wasn’t 100% to my liking, so I fixed some things and optimized a lot of other things.

Indent Guides

I modify this in my preferences file to show as dotted lines. Just looks cleaner IMO, than the default solid line. Note that after you install this plugin and restart Brackets, you will have to enable Indent Guides via the View menu. To make the guides dotted, go to the Debug menu and select Open Preferences File. Add this line to that file and it will update immediately:

"brackets-indent-guides.guideStyle": "dotted"

Indentator

Interactive Linter

I use JSHint usually, but when I remember I have this plugin, I use this!

Markdown Preview

I used to have keep a separate app for viewing and editing Markdown files, but that immediately seemed silly once I learned the existence of this plugin.

Open .gitignore

For those times when you need to ignore files and folders, but can’t be bothered to show hidden files in the filesystem.

Paste and Indent

Right Click Extended

I really don’t understand why this isn’t in Brackets by default.

SVG Preview

I find this plugin incredibly helpful, especially as I start using SVGs more. You can optimize by hand and see if you mess something up.

Tabs - Custom Working

Trailingspaces

I fucking hate trailing spaces. They look terrible! Stop leaving that crap in your code.

Unused Files

When I refactor components and optimize code in my browser and OS projects, I tend to leave behind files that are now wasting space. This plugin will help you streamline resources.

And there you have it! I will keep this post updated as I change my setup. Here’s a screenshot of it, where you can see some of the plugins mentioned, in action:

Aww yiss, kinda like Inception, right?

P.S. I figured it might even be useful to see my Preferences File. My directories not showing up before my files irritated me to no end before realizing I could enable that functionality. I also do not like tags closing automatically, and that is something else you can configure. Anyhoo, here it is:

{
  "me.drewh.jsbeautify.on_save": false,
  "themes.theme": "dsgn.dracula-theme",
  "sortDirectoriesFirst": true,
  "scientech-com-ua.brackets-trailingspaces.checked": true,
  "closeTags": {
    "whenOpening": false,
    "whenClosing": true,
    "indentTags": []
  },
  "useTabChar": false,
  "spaceUnits": 2,
  "tabSize": 2,
  "linting.collapsed": true,
  "brackets-indent-guides.enabled": true,
  "brackets-paste-and-indent.enabled": true,
  "brackets-indent-guides.guideStyle": "dotted",
  "styleActiveLine": true,
  "brackets-css-color-preview.enabled": true,
  "fonts.fontFamily": "\"SourceCodePro-Medium\", MS ゴシック, 'MS Gothic', monospace",
  "fonts.fontSize": "12px",
  "markdown-preview.useGFM": true
}
My Brackets Setup
Top

Here

Home Me Projects Thoughts Resumé Imprint

Elsewhere

Dribbble GitHub Miiverse Twitter