Brackets Text and Code Editor: Overview, Best Extensions

If you are a programmer or a wannabe developer, you will want to find and use a robust code editor from start, which will help you write the most efficient code. In this post, I want to introduce Brackets editor

Brackets is introduced as a lightweight, yet powerful, modern text and code editor. Brackets was developed with the purpose of offering developers the right amount of help when they want it without getting in the way of coding process.

Inline Editor

Brackets comes with 4 features which make you want to use it instead of using other popular editors such as Atom or PHPStorm.

  • Inline Editors: you can open a popup above the code you want to modify its related properties. There is no need for jumping among file tabs to edit related codes. For example, you can edit a HTML tag’s style right in the HTML file and the changes are applied to both files.
  • Live Preview: CSS and HTML changes are instantly applied right into browser for you to see. Also you can see where your CSS selector is being applied in the browser by simply putting your cursor on it.
  • Preprocessor Support: you can use Quick Edit and Live Highlight with your LESS and SCSS files with Brackets.
  • JavaScript Refactor: this feature was introduce in the latest release. It can refactor specific JavaScript  codes.

Minimum Requirements:

    • Mac OSX 10.6.8
    • Windows Vista, 7, or 8/8.1 (x32 and x64)
    • Linux Ubuntu 12.04 (x32 and x64)
    • Debian Linux 8
    • 2 GB of RAM

Popular Brackets extensions

  • Emmet: a web-developer’s toolkit that can greatly improve your HTML & CSS workflow
  • Beautify: format JavaScript, HTML, and CSS files.
  • File Icons: File icons based on file formats in Brackets’ file tree.
  • Indent Guides: Show indent guides in the code editor.
  • Git: Git integration for Brackets.
  • Autoprefixer: parse CSS and add vendor prefixes automatically.
  • W3C Validation: a simple W3C Validator.
  • Open In Browser: open the contents of your current view/tab in a web browser
  • JS CSS Minifier: minifies and concatenates JS and CSS in Brackets using UglifyJS3 and CleanCSS.