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.
A.1
The Brackets text editor
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.
A.1.1
Getting and installing Brackets
Brackets is available from the brackets.io website. I’m currently using version 1.13. It’s pretty easy to get; just click the big blue download button (highlighted in orange in Figure A.1).
Figure A.1 Brackets text editor download
This will download the brackets.release.1.13.msi file.
Run this file and leave all the default options selected (Figure A.2):
Figure A.2 Brackets text editor install options
After the installation is complete, start Brackets; it will look something like this:
Figure A.3 Brackets first use
A.2
Adding extensions to Brackets
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.
Figure A.4 Brackets sidebar
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.
These are:
Extension
Search for
Function
Autoprefixer
Autoprefix
Automatically adds browser prefixes to CSS code (all those –webkit things that nobody understands)
Autosave files on Window Blur
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).
Figure A.5 Brackets extension manager
To find the extensions, click the available tab and enter 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 install on the right hand side.
It is my experience that Brackets should be closed and re-started after each extension is installed. It can tie itself in knots if you don’t.
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 the installed tab and then click the remove button next to the extension you want to uninstall. It will require Brackets to close and re-open.
