Show Indentations in Brackets, using Visual Studio style tabs
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 13 commits ahead, 20 commits behind DennisKehrig:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
nls It's 2015 Apr 24, 2015
styles update styles Jun 12, 2015
.brackets.json Add .brackets.json and .editorconfig Mar 20, 2015
.editorconfig Add .brackets.json and .editorconfig Mar 20, 2015 Change log Apr 24, 2015
LICENSE It's 2015 Apr 24, 2015 Update Jun 12, 2015
main.js fix console warning Jul 4, 2017
package.json patch bump instead of minor Jul 4, 2017
strings.js It's 2015 Apr 24, 2015

Show Whitespace

A Brackets extension to visualize whitespace (both spaces and tabs) in the same style as Visual Studio.


Activate using View > Show Whitespace or by using the shortcut Ctrl-Shift-W (Command-Shift-W on Mac OS X). The extension state is remembered across Brackets launches. Whitespace in all editor windows are visualized, including inline editors.

Technical Details

This extension uses CodeMirror overlays to construct and render whitespace for both spaces and tabs. Each individual character is wrapped in a <span></span> with an appropriate denoting class. The following are all the classes this extension uses and their purpose. Do note that tabs follow this same structure, with the word space replaced with tab.

  • .cm-dk-whitespace-space: Whitespace between any characters
  • .cm-dk-whitespace-leading-space: Whitespace that makes up any indentation
  • .cm-dk-whitespace-empty-line-space: Any lines that consist solely of whitespace
  • .cm-dk-whitespace-trailing-space: Whitespace at the end of a line after any characters

The primary extension styling is defined in styles/main.less, which is compiled into CSS, while whitespace colors are defined in Brackets preferences and rendered into styles/whitespace-colors-css.tmpl. Both files are then loaded into Brackets on startup.


Method 1: Open the Brackets Extension Manager and search for "show whitespace"

Method 2: Download the latest revision in .zip archive directly from GitHub and drag it onto the "Drag .zip here" area in the Extension Manager. Alternatively, use the "Install from URL..." link also in the Extension Manager.

Known Issues

  • CodeMirror overlays have a side effect of slowing down the editor in many aspects, including typing and scrolling. If the slowdown is too unbearable, it may be worthwhile to disable the extension except when required.

Brackets Wishlist

What I wish Brackets would provide:

  • An API to remove a command
  • An API to remove a menu item