Brackets Code Editor is an open-source for Web Designers by Adobe. Download and Install Brackets [http://brackets.io/]. 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.
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) fig1 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) fig1 all we have to do is double-click it. Then it adds to our working files.
The ‘Getting started’ Project (10) fig2 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) fig2 to reveal the files it contains.
Add a new folder – “sapCanvas_demo” (4) fig1 to the bracket’s project. Nested 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.
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.
Editor
To split the editor (9) fig1 click the icon right to the circle (2) fig1 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. File drop-down contains numerous options related to saving along with the shortcut keys next to
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.
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
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.
Live Code Preview
Preview will generate a ‘ live preview’ of the code that you’re working on. Open the ’embed.php’ file fig6 and click on the thunderbolt icon (6) fig1 for a live preview. Use a localhost server XAMPP fig7.
Extension Manager
Extension Manager (7) fig1 (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 go to [docs.emmet.io]. 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’.
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[registry.brackets.io]
Extract
Extract (8) fig1 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 fig1 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 (insert text fig1) and OVR (overwrite fig1) say if you type notice the text disappears as you type it.
To the right of this is the Language fig1 that refers to the file that is open. Change the selected language from the drop-down. Change the code completion that it offers.
When we type “JavaScript!”; and save the file as main.js fig10 Code Linting shows ‘errors’ as a yellow icon.
In a similar manner when we type //”JavaScript!; and save, a green checkmark appears next to JavaScript for ‘no errors’ fig11. 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 fig1) is the tab at the bottom-most right of the brackets screen.
Brackets Code Editor is used for creating and editing codes for HTML, CSS, JavaScript & PHP. It also supports other file formats such as Perl. Python etc.