This section contains the instrunctions for downloading and installing the Adobe Brackets text editor. I also give instructions for installing various useful extensions that can be used within the Brackets development environment. The main Brackets-Git extension and it’s installation process is covered in section 5.1.
Brackets is my text editor of choice.
I used Brackets to write the entire HTML, CSS and jQuery code within this website.
Brackets lets you add extensions that do certain things: auto-save, additional menu functions, automatically add browser prefixes &c. Specifically, it allows the Brackets-Git extension to be installed.
This will download the brackets.release.1.13.msi file.
Run this file and leave all the default options selected (Figure A.2):
After the installation is complete, start Brackets; it will look something like this:
Right, we’ve installed Brackets and now we can install some extensions. Extensions are “plugins” that add extra functionality to Brackets, one comes pre-installed with Brackets, this is the live preview function (this is the lightning bolt icon in the right hand side bar, Figure A.4.
The live preview opens a new Chrome window and directs it to the current web page being edited in Brackets, the browser preview is always up to date, any changes made to the file in Brackets are instantly reloaded in the live preview (no page reloads are required).
The live preview updates the Chrome browser in real time whenever changes are made to the HTML or CSS files, changes to other file types (Java script for example) cause the preview page to be reloaded when the file is saved.
Brackets has a fairly extensive library of extensions available to it. Most of these are written by third-part developers (rather than Adobe) and I’ve installed several that I think are useful.
|Autoprefixer||Autoprefix||Automatically adds browser prefixes to CSS code (all those –webkit things that nobody understands)|
|Autosave files on
|Autosave||Automatically saves all the files open in Brackets whenever you click out of the Brackets window|
|Brackets icons||Icons||Adds little icons to the side of each file in the file tree showing its type (HTML, CSS, JS &c.)|
|Copy as HTML||Copy HTML||Copies code to the clipboard and preserves the colour coding used by Brackets (I used it to copy code from Brackets into documents)|
|Interactive Linter||Interactive||Analyses the HTML, CSS and Java script code and highlights errors in the syntax and structure—a process referred to as “linting”†1|
|Pop-up menu Brackets||Pop-up||Adds case conversion functionality to the pop-up menu that appears when text is right clicked in the Brackets window. It adds uppercase, lowercase and camel case†2 conversions.|
|Table A.1 My selection of Brackets extensions|
|†1||Linting: (present participle of the verb to lint—yes I know, I think lint is the stuff you get off old jumpers too; and it’s definitely not a verb) is the process of automatically checking software for errors—this process is usually carried out by another software programme called (would you believe it) a “linter”. Apparently it started with C code and there is a whole Wikipedia article on it here.|
|†2||Camel case is the practice of joining words together and capitalising the start of each word (CamelCase for example), its more formal name is medial capitals.|
To add extensions to Brackets click the Extensions Manager icon (it’s the second icon in the right hand side bar; it looks like a Lego brick, Figure A.4). This opens the extension manager dialogue box (Figure A.5).
To find the extensions, click the search for” terms listed in Table A.1 in the search box at the top; select the actual extension from those presented by the search and click on the right hand side.tab and enter the “
The Copy as HTML extension is not required for coding (the others all make coding easier apart from the icon thing, that just makes it look nice), I use it purely to copy code from Brackets and paste it into other documents (it preserves all the syntax colour coding). It’s how I got the code fragments from Brackets into the pdf document version of this website.
Uninstalling an extension is much the same, click thetab and then click the button next to the extension you want to uninstall. It will require Brackets to close and re-open.