Brackets Code Editor

1 - Image - Brackets Code Editor
1 – Image – Brackets Code Editor

Brackets Code Editor is open source for Web Designers by Adobe. Download and Install Brackets. The ‘Live Code Preview’ automatically updates files without having to write any code. Use brackets to edit documents. The ‘Inline Editor’ edits multiple files and supports preprocessors. As you use the ‘Inline Editor’ to see the code applied to a particular element or class you get a view of the LESS or SCSS files with the processed CSS files. Many APIs can hook into brackets to create custom scripts or brackets plugins. Make your brackets experience better with extensions. Install and remove plugins and themes. To add extensions use the Extension Manager to install update packages. In the Bracket’s toolbar access it by selecting File > Extension Manager. Optimized for HTML, CSS, JavaScript, Brackets can be used on a Mac, Windows, and Linux.

2 - Brackets Code Editor Interface
2 – Brackets Code Editor Interface

Brackets Code Editor Interface

On the left (1) fig 1 is the project or the project bar shows a list of files that you have in your project as well as a list of files that you currently have open. eg The file ‘blank’ is open. The circle (2) fig 2 next to it shows unsaved changes to this file. Clicking the (X) next to a working file will close the file. A prompt will ask you if you want to save the change. Now the working file area does not show this file.

To add ‘variables.php’ to the working files (3) fig 2 all we have to do is double click it. Then it adds to our working files.

3 - Brackets Code Editor: 'Getting Started' Project & Folder- first CSS.
3 – Brackets Code Editor: ‘Getting Started’ Project & Folder- first CSS.

The ‘Getting started’ Project (10) fig 3 under the working files is by default. If you click here you will see an option to open a folder. The ‘Getting Started’ Project nests the ‘demo’ and ‘first-CSS’ are folders. Click the down arrow next to the folder – ‘first-CSS’ (11) fig 3 to reveal the files it contains.

Add a new folder – “sapCanvas_demo” (4) fig 2 to the bracket’s project. Below is a list of all the files in this folder. Open any of them in brackets by clicking it.

Click the down arrow next to the greyed out ‘Title’ of a folder. Note the contents of the folder get revealed. Switch between different projects that are recently opened by clicking them on the arrow. Remove a project from my available fast projects by clicking on the (x) button.

4 - Code Completion
4 – Code Completion


The Code completion features in brackets work for JavaScript, CSS, and HTML. Type param. in the working file main.js and you will see a drop-down menu containing a list of all the built-in param functions. The other features are Command Line Integration and Multiple Code Selection.

5 - Editor - Vertical Split
5 – Editor – Vertical Split


To split the editor (9) fig 2 click the icon right to the circle (2) fig 2 at the top right in the project bar and select

  • Vertical Split will split the screen into two sections
  • Horizontal Split will split the screen into two wide sections or
  • No Split will be the default setting.

Brackets Code Editor – Menu Bar (5)


The File is a list of options that we can use to help build our projects. File drop-down contains numerous options related to saving along with the shortcut keys next to the function.


Edit allows us to do many functions that edit the text we are working on.


Find contains abilities to find replace and find projects which are also available through hotkeys.


The View allows us to change various display settings as well as the split that brackets are displaying and themes. Brackets come with two themes by default – Light and Dark.

6 - Navigate
6 – Navigate


It allows us to do a few things like opening documents and going to the next document.

Quick Open’ shows a menu at the top with the names of the files in your project. Select a file and it will open up and be added to your working files.

To look at Code, click on ‘Go to Line’ and type the line number you would like to go to. The line number gets highlighted. Feel free to use the shortcut key displayed next to the function in the drop down of the Navigation menu.

The ‘Quick Find Definition‘ shows automatically an @ selector and a list of existing selectors that are written in the file. Selecting any will highlight that in the file. Showing in ‘files tree’ will disclose your currently open file in your project.

Quick Docs‘ is a feature which allows you to view the CSS documentation on supported languages.

‘Quick Edit’ allows you to view/edit any CSS code linked with a selector such as a tag, class, id or any other selector. An HTML page or a .css file can demonstrate the use of Quick Edit. The CSSA Quick Editor can make your front end development easier.


Debug contains numerous options, we can use to debug code specifically front end code like javascript.


Help contains some links as well as community links to various other resources. To the right are three buttons.

7a - embed.php file
7a – embed.php file
7b - Live Preview of embed.php file
7b – Live Preview of embed.php file

Live Code Preview

Preview will generate a ‘ live preview’ of the code that you’re working on. Open the ’embed.php’ file and click on the thunderbolt icon (6) fig 2 for a live preview. Use a local host server XAMPP.

8 - Themes & Plugins - Installed Emmet
8 – Themes & Plugins – Installed Emmet

Extension Manager

Extension Manager (7) fig 2 (plugins) manages both the installed extension and new extensions installations. To make your coding workflow easy use plugins by exploring the available themes and plugins in the brackets repository.

To install a plugin click on the Extension Manager. The display page shows the tabs – Available, Themes, Installed, and Default. Install a theme or a plugin by clicking the ‘Install’ button located next to the plugins name
on the right. We had installed the ‘Emmet’ plugin fig 8. Emmet gets added to the menubar. The dropdown display many options. Use Emmet syntax in your workflow as it helps you create markup. For example if If you type ‘a’ emmet expands it into <a href=” “></a>. To read more about this plugin click on ‘Emmet Documentation’. In a similar manner, install a theme type you find suitable from the theme repository by clicking on the ‘Themes’ tab. We installed the ‘Atomic Theme (Dark)’. To remove the Theme go to View in the menubar and select say ‘Brackets Dark Theme’.

9 - Disable or Remove Extension
9 – Disable or Remove Extension

All the installed plugins can be viewed by clicking on the ‘Installed’ tab. Installed plugins can be disabled by clicking on the ‘Disable’ or ‘Remove’ button next to the plugin fig 9. Update your plugins as frequently as possible as plugins tend to contain bug and security fixes plus other upgrades that help in your programming.

Some popular plugins worth considering are Beautify, Bracket Gits, Code Folding, Minimap, CSS Lint, Interactive Linter, etc. Explore the list by clicking on registry plugins.


Extract (8) fig 2 for brackets is an Adobe special option that integrates with other Adobe software.

The Bottom Bar

Additional options to the bottom of the screen on the left show the Line Number, the Column Number, and the Size of the File for any open file.

Click on INS for the option to enable. INS is inserted and OVR (overwrite) is if you type notice the text disappears as you type it.

To the right of this is the Language that refers to the file that is open. Change the selected language from the drop-down. Change the code completion that it offers.

10a - Code Linting - showing yellow icon > error
10a – Code Linting – showing yellow icon > error

When we type “JavaScript!”; and save the file as main.js fig 10a. Code Linting shows ‘errors’ as a yellow icon.

10b - Code Linting - showing green check mark > no error
10b – Code Linting – showing green check mark > no error

In a similar manner when we type //”JavaScript!; and save, a green checkmark appears next to JavaScript for ‘no errors’ fig 10b. The JavaScript Lint by default helps us identify problems in advance while writing code. Fix these problems. Other Linters are also available for install. In the extension manager type ‘Lint’ in the search and browse through a list of Linters.

The Special Context menu will change based on what language you have open.

Spaces (indentation) is the tab at the bottom most right of the brackets screen.

Digital Marketing Solutions

Thank you for subscribing.

Something went wrong.