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.
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)
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 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.
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.
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 (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 (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.
- 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.