Brackets Code Editor

Image - Brackets Code Editor
Image – Brackets Code Editor

Brackets Code Editor is open source for Web Designers. Download and Install Brackets ~ brackets.io The ‘Live Code Preview’ automatically updates files without having to write any code. Use Brackets Code Editor 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 bracket 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, and JavaScript, Brackets can be used on a Mac, Windows, and Linux.

Table of Contents

Introduction

The Brackets Code Editor focuses on web development by building web applications, exploring new technologies, or working with data-driven projects. Brackets support several language and file formats applicable to the internet. It accommodates various languages and file types such as HTML/ CSS, JavaScript, PHP, Python, Perl, Ruby, VBScript, XML, Java, SQL, C/C++, YAML, JSON, etc. Brackets Code Editor streamlines your web development process with the live preview features drawing a line between code and visual output. The live preview features work with ~

  • Split View to see Code and live preview.
  • Extension and Themes that add up to the live preview experience.
  • Instant Updates that make changes in real-time and instant updates to webpages.
  • Interactive Debugging for inspection of elements, viewing console logs, and finding issues between code and page rendering.
  • CSS Preprocessor Support to write/ modify code and preview changes instantly.
  • Browser compatibility to ensure cross-browser affinity.
fig2 - Brackets Code Editor Interface
fig2 – 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.

fig3 - Brackets Code Editor- 'Getting Started' Project & Folder- first CSS.
fig3 – 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 are revealed. Switch between different projects that have recently opened by clicking them on the arrow. Remove a project from my available fast projects by clicking on the (x) button.

fig4 - Code Completion
fig4 – Code Completion

Brackets Code Editor Features

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.

fig5 - Brackets Code EditorEditor - Vertical Split
fig5 – Brackets Code Editor – Vertical Split

Editor

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)

File

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

Edit

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

Find

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

View

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.

fig6 - Brackets Code Editor - Navigate
fig6 – Brackets Code Editor – Navigate

Navigate in Brackets Code Editor

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 the 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 that allows you to view the CSS documentation in 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

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

Help

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

fig7a - embed.php file
fig7a – embed.php file
fig7b - Live Preview of embed.php file
fig7b – Live Preview of embed.php file

Brackets Code Editor – 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. Live Preview allows you to see real-time changes in your page as you keep editing without requiring it to be saved.

fig8 - Brackets Code Editor - Themes & Plugins - Installed Emmet
fig8 – Brackets Code Editor – Themes & Plugins – Installed Emmet

Brackets Code Editor – Extension Manager

Extension Manager (7) fig 2 (plugins) manages both the installed extension and new extension 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 plugin’s name
on the right. We had installed the ‘Emmet’ plugin fig 8. Emmet gets added to the menubar. The dropdown displays many options. Use Emmet syntax in your workflow as it helps you create markup. For example, if you type ‘a’ emmet expands it into <a href=” “></a>. To read more about this plugin go to ‘Emmet Documentation’ ~ docs.emmet.io. Similarly, install a suitable theme type 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 ‘Brackets Dark Theme’.

fig9 - Brackets Code Editor - Disable or Remove Extension
fig9 – Brackets Code Editor – 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 going to the registry plugins at registry.brackets.io.

Extract

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

The Bottom Bar

Additional options at 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 when you type notice the text disappears.

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

fig10a - Code Linting - showing yellow icon > error
fig10a – 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.

fig10b - Code Linting - showing green check mark > no error
fig10b – Code Linting – showing green check mark > no error

Similarly 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 installation. 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 right of the brackets screen.

Brackets Code Editor – Alternatives

The alternatives to Brackets Code Editor are worth exploring and depend on your choice of a Code Editor. More or less it should align with your personal preferences, the features, and the workflow environment that goes along with your web development journey. Some popular choices that deserve mention are-

Visual Studio Code

Visual Studio Code is free, open-source, and works with macOS, Windows, and Linux systems. Built on Electron framework it supports many programming languages such as Java, C++, JavaScript, Phyton, TypeScript, etc. Features include-

  • IntelliSense comes with syntax highlighting and smart completions that support function definitions, import modules, and variable types
  • Debugging of Code is possible from the editor
  • Extensions for new languages, debuggers, and themes. Comes with in-built Git extension
  • Microsoft Azure extension for deploying host web and cloud applications within Visual Studio Code.

Sublime Text

Sublime Text is available for macOS, Windows, and Linux and can be customized to meet your needs with themes and functionality plugins. The features include syntax highlighting, language support, smart auto-complete, GPU rendering, etc. Sublime Text is designed for writers and programmers to support quick text selection, modification, and auto-complete.

Atom

GitHub has developed Atom which is a free open-source hackable text editor and a tool for beginners and experienced programmers. Features include Cross-Platform that supports, macOS, Windows, and Linux. Extend functionality with JavaScript-based plugins and Git Integration for version control. Customize Atom further to meet your expectations for appearance, behavior, functionality, etc

Conclusion

Brought to you by Adobe, the Brackets Code Editor is an open-source modern editor written in JavaScript, CSS, and HTML. Backed by an active community of front-end developers and web designers Brackets transforms how you work with Preprocessors. Moreover, the Inline Editor feature in Brackets provides a seamless experience by opening a window into the code you work with. When you modify CSS and HTML, view those changes on screen with the Live Preview feature. With extension add-ons customize your web development environment and find multiple language support. The Themes & Color Schemes can enhance the look and feel of the user interface by personalizing and optimizing workflows. The Quick Navigation features help speed up coding with ‘quick open’ and ‘quick find’.