My pretty move to Brackets

PHPDesigner is my very first IDE when I started to code. Then I moved to Dreamweaver which was a product of Macromedia during that time. It had been a favourite editor during most of my developer life time, but I rarely used additional extensions and themes along with it as they are not easily available.  I was comfortable with its default theme and I’m too familiar with its color scheme and I like it. There are some drawbacks of Dreamweaver – it is not lightweight; It is no easy-to-install; it is a proprietary software; it is not available for Linux. Linux solution is my major concern as I’m moving to Linux from Windows. I had to find a replacement of Dreamweaver.

I tried to use Sublime Text which is very popular and lightweight. Easy configuration tweak in a json file sounds great. Its package installation is little tricky. I could not use Sublime even for an entire day as its themes sound crazy to me. I don’t like any of them.  I did not learn how to write custom package or theme as I’m not interested to continue to use Sublime. Opening a new file in the middle of all open tabs makes me weird because I have been familiar with new file open at left most or right most in the other IDEs. There might be a plugin to fix the tab open position, but I did not find and try. One of my disfavor experience with Sublime is that it did not alert me when code is changed outside IDE and the code was not updated in the open file. When the file was saved, the updated code was gone. The worst thing, my stupid mistake of course, is that I renamed an open file in IDE from the file explorer. Then I was mistakenly updating the open file and saving, however, it was saved silently with the old file name without alerting me. Anyway, thanks to Sublime Text for unlimited free trial, but annoyed me keep alerting to buy it. Sorry for that I’m not affordable.

Eventually, I found a new IDE, Brackets – a lightweight, powerful, modern open-source code editor. It is absolutely free and available in all major platforms. It is originally designed for front-end developers and designers. I started to use it for my node.js development. There are plenty of extensions and themes available that can be easily installed via Extension Manager. If you know Javacript, HTML and CSS, you can even easily implement your own extensions and themes. I’m favourable in light theme with white background. Although Brackets comes with a default white theme, I created my own theme, DreamPHP, that simulates the Dreamweaver’s default theme. During the early days of Brackets, it is more suitable for front-end developers. However, today it opened a way to PHP developers since there are some useful extensions for PHP development. We can now use Brackets for both front-end and back-end development.

I feel I’ve found a replacement of Dreamweaver that was my favorite editor throughout most of my developer lifetime. I believe Brackets will become a more mature and powerful code editor along with its future release versions.

Why I love Brackets

  • Free open source of Adobe
  • Make with javascript + html + css
  • Cross-platform
  • Plenty of useful extensions and themes available
  • Easy to implement extensions and themes
  • Available awesome extensions like shell access within IDE

The Theme I use

DreamPHP (The theme I created)
A dream theme that simulates the default theme of Dreamweaver and coloring scheme of code snippets. More info…

The Extensions I use

Format JavaScript, HTML, and CSS files and related languages. More info…

Brackets Git
Integration of Git into Brackets. More info…

Brackets Icons
File icons in Brackets’ file tree. More info…

Brackets Shell
Shell access within Brackets. Want to run some shell command, install a node package, install from bower the list goes on and on. Well then, this extension is for you. More info…

Code Folding (This has been integrated into Brackets core)
Brackets extension that provides simple code folding for files edited in brackets. Supports brace folding, tag folding, indent folding and multi-line comment folding. More info…

Adds CSSLint support to Brackets. More info…

Supporting EditorConfig features. More info…

Generates JSDoc, PHPDoc annotations for your functions. More info…

Adds HTMLHint support to Brackets. More info…

Adds JSCS support to Brackets. JSCS is a code style checker. JSCS can check cases, which are not implemented in JSHint, but it does not duplicate JSHint functionality, so you should use JSCS and … More info…

Adds JSHint support to Brackets. More info…

PHP Code Quality Tools
Analyze and lint PHP using several code analysis tools. Please note that this extension needs PHP to be installed on your machine to work properly. More info…

PHP Syntax Hint
PHP Syntax Hint is a plugin for Brackets, which will help you alot in writing php SYNTAX, MYSQL Queries as this will auto suggest Syntax while coding, within Brackets software. More info…

Provides code hints for PHP files including PHP keywords, built-in functions, constants and variables. Also provides hinting for variables in the current open PHP document. More info…

Inline short documentation for PHP functions, including a summary, syntax, return values and parameters. More info…

Inline short documentation for regular expressions in JS and PHP. More info…

Show Whitespace
Visualizes whitespace similar to how Sublime Text does it. More info…

Tab To Space
Converts indentation to tabs or spaces. More info…

Whitespace Normalizer
Trims trailing whitespaces; transforms tabs to spaces; adds newline at the end of file. More info…

For Javascript development, Brackets uses JSLint by default. You may want to use other javascript linters. You can easily configure Brackets to use your prefer linter. Let’s say you installed JSHint extension and you want to use JSHint instead of JSLint, go to the menu “Debug >> Open Preferences File”, add the following code snippets to the open brackets.json:

"language": {

"javascript": {
"linting.prefer": "JSHint",
"linting.usePreferredOnly": true


It is also allowed to use multiple linters at the same time, you just need to add an array of linters to the “linting.prefer” option, for example, "linting.prefer": ["JSHint", "JSCS"].

If you use Brackets for PHP development, you may need to map file extensions and file names to languages via preferences as some file extensions are not recognized.  For example, if you are developing a Drupal project, some Drupal file extensions such as .inc, .module, .install are not recognized by Brackets and they are open as plain text with no code coloring. You can easily configure it in your brackets.json previously mentioned by mapping file extensions to the existing languages supported by Brackets.

"language.fileExtensions": {

"inc": "php",
"module": "php",
"install": "php",
"ctp": "php" // CakePHP template file


Moreover, you can also map any exact file names to any languages supported.

"language.fileNames": {

"Jakefile": "javascript",
".jscsrc": "javascript",
".project": "xml"


If you are thinking to use Brackets, I hope this blog will help you indeed.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s