Brackets Editor Basics

Brackets is an open-source project with code written in JavaScript, HTML, and CSS.

The Brackets text editor is similar to other editors like Notepad++ and Eclipse. If you are familiar with these editors, you will be able to understand Brackets quickly. Otherwise, you can follow our tutorial step by step to fully grasp how to use the Brackets editor.

Once Brackets is successfully installed and opened for the first time, you will see a default "Getting Started" page, which is named index.html, as shown below -

Adobe Brackets Basics

The Brackets editor have below sections -

  • Main Menu
  • Left Sidebar/Working Files Section
  • Editor - This section, highlighted with a red background, is where developers can code and modify the existing code.
  • Right Sidebar/Quick Access Section
  • Status Bar/Bottom-line

Sections at the Main Menu -

The main menu is pretty much like the ones you find in other editors, with sections for File, Edit, Find, View, and Navigate.

Adobe Brackets Basics

The top-level main menu sections in the brackets are -

  • File – Consists of the file-related operations.
  • Edit – Consists of the editing options that are used to edit the file.
  • Find – Consists of the find and replace options for the text.
  • View – Consists of the options that control the view.
  • Navigate – Consists of the options that to navigate from one place to another.
  • Debug – Consists of the debugging tools.
  • Help – Provides the manual help and the support for the tool.

Left Sidebar/Working Files Section -

This section is specific to the Brackets to display current working files at one place instead of showing in different tabs. This is very useful feature in Brackets.

Customizing Workstation

Left sidebar have the below sections to manage the files -

  • Working Files
  • Configure Working Set/Sorting Files
  • Split Editor
  • Getting Started

Right Sidebar/Quick Access Section -

The right sidebar contains shortcuts from the main menu for instant access without navigating to it.

Customizing Workstation

This section is more famous for Live Preview and Extension Manager shortcut buttons to access them directly.

Customizing Workstation

Right sidebar having below options by default.

  • Live Preview
  • Extension Manager

Sections at the Status Bar/Bottom-line -

Status bar showing information about editor formatting (spaces/tabs), the current language (HTML, CSS, etc.), encoding in use (UTF-8), and the insert/overwrite mode (INS/OVR).

Adobe Brackets Basics

The status bar includes the following options:

  • Space/Tabs – This menu allows you to specify the formatting for spaces and tabs. You can edit the number of spaces and tab stops as needed.
  • Type – This refers to the type of file you are working on. The supported types include HTML, JavaScript, CSS, PHP, and others.
  • Character Encoding – The preferred character encoding for HTML files is UTF-8.
  • INS/OVR – The INS/OVR means that insert or overwrite. Here "Insert" is used to insert the code, where new code can be added and then "Overwrite" is used to overwrite the code, which replaces existing code. By default, the insert is in active mode.
  • File status symbol – This symbol indicates the status of your code. If there are any errors, it will display a yellow symbol. Clicking on this yellow icon will show the errors. When your code is error-free, the status symbol will turn green, indicating success with a checkmark.