Skip to content

Instantly share code, notes, and snippets.

@AllThingsSmitty
Last active August 29, 2015 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AllThingsSmitty/61c81cf5ae4466810f85 to your computer and use it in GitHub Desktop.
Save AllThingsSmitty/61c81cf5ae4466810f85 to your computer and use it in GitHub Desktop.
A new user's guide to Brackets. Estimated reading time: <2 min. Estimated walkthrough time: 8 min.

Ready out of the Box

Brackets has a terrific built-in extension manager for super-easy add-ins. There's no setup work required, no Package Manager to install like in Sublime Text. Simply download and install Brackets and you're ready to go.

Make It Look Good

  • Install Atom Dark Theme. I like Atom's default theme.
  • Monokai Dark Soda is pretty lovely, too.
  • I prefer to increase the theme font size to 13px: ViewThemes...Theme Settings. Go with what feels best.

Add Helpful Tools

Open Extension Manager (FileExtension Manager) and search available extensions:

  • Autoprefixer parses CSS and adds vendor prefixes automatically (and removes any unnecessary ones, too).
  • Brackets Git provides Git integration in the IDE.
  • CSSLint scans your CSS for any problems.
  • JSHint helps detect errors and potential problems in your JavaScript.
  • Emmett improves your workflow for faster coding.
  • CSSComb let's you order CSS based on what you define your preferences to be.
  • Theseus is a new type of JavaScript debugger for NodeJS, Chrome, and both simultaneously.

Adding these and other favorite extensions will only make your time using Brackets that much better.

Favorite Features

Everybody has their favorite built-in features, so here are mine:

  • Quick edit: Ctrl / + E opens an inline editor directly in your HTML for fast and easy editing of CSS, colors, and curves.
  • JSLint: This is enabled by default and will check your JavaScript code upon saving. Results are displayed in a panel below the main editing window.
  • Turbo-charged code completion.
  • Live Preview Multibrowser: this feature is currently experimental but it allows connecting to multiple browsers with live edits updating all connected browsers at once.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment