As an experienced open source developer and coding mentor, I install Brackets as the code editor of choice for new developers getting started with web development on Linux.
In this comprehensive guide, let‘s look at how to install, configure, customize and use Brackets productively on Ubuntu:
Overview of Brackets
Brackets is a powerful open-source code editor developed by Adobe Inc specifically for web design and development. Here are some of its standout features:
- Live Preview: See HTML/CSS changes instantly in browser without save
- Inline Editors: Directly manipulate CSS/JS within HTML files
- File Icons: Quickly identify file types like HTML, JS, CSS, images
- Themes & Color Schemes: Personalize interface and syntax highlighting
- Extensibility: Extend functionality via community extensions and plugins
- Web Technologies: Build with HTML, CSS, JavaScript natively
- Open Source: Free to use and modify under MIT license
These capabilities, paired with Brackets‘ clean and intuitive UI, make it a very versatile code editor for building websites.
In my experience mentoring new coders, Brackets has one of the easiest learning curves. Its live preview and real-time code editing help new developers visualize and understand web development concepts faster.
Compared to other popular code editors, here is how Brackets stacks up:
| Brackets | VS Code | Atom | Sublime | |
|---|---|---|---|---|
| Live Preview | Yes | Extensions | Packages | Packages |
| Inline Editors | Yes | Extensions | Packages | Packages |
| Open Source | Yes | Yes | Yes | No |
| Themes/Icons | Yes | Yes | Yes | Yes |
| Extensions | Yes | Yes | Yes | Yes |
| Lightweight | Yes | Moderate | Yes | Yes |
| Beginner-friendly | Yes | Moderate | Yes | Steep |
As visible above, Brackets is optimized specifically for web development with good out-of-the-box support for HTML, CSS and JS. VS Code and Atom though more feature-rich, pack so many developer tools which may overwhelm beginners.
Okay, so now that we‘ve understood Brackets and how well it is suited for web design, let‘s look at how to get it installed on Ubuntu 20.04 LTS.
Install Brackets Code Editor on Ubuntu
The Brackets team officially provides .deb packages to install on Debian/Ubuntu systems. There are a few ways to install it:
1. Install Brackets via Snap
Snaps allow quick installation of apps and their dependencies as self-contained packages. To install the latest Brackets snap:
sudo snap install brackets --classic 
The --classic flag is required to give Brackets access to local ~/.config folder to store extensions and preferences.
2. Install via APT Repository
Whilst snaps offer latest releases, Ubuntu archives contain older but well-tested versions:
sudo apt update
sudo apt install bracketsThis will install Brackets from main Ubuntu repositories.
3. Manual Download of Deb Package
For bleeding edge builds, you can grab .deb installers for 64-bit systems from https://github.com/adobe/brackets/releases:
# Grab the latest *.deb package
wget https://github.com/adobe/brackets/releases/download/release-1.14/Brackets.Release.1.14.64-bit.deb
# Install the package
sudo apt install ./Brackets.Release.1.14.64-bit.deb
I personally prefer using Snaps for quick updates and avoiding system conflicts. But feel free to choose the method that suits your needs.
With Brackets code editor installed, let‘s look at how to use it for web development.
Getting Started with Brackets
When you first open Brackets, you will see a basic webpage loaded as index.html demonstrating its features.
Use keyboard shortcut F1 to toggle the sidebar and F2 for the file explorer pane:
As you can observe, the interface has 3 main components:
- Sidebar: For extensions, search, git and themes
- File Explorer: To open files and folder structure
- Code Editor: Main area to write HTML/CSS/JS code
Let‘s open a file to being editing:
- Click the
Open Fileicon in top left explorer pane - Select any HTML file or open entire project folder
- Brackets will auto-detect and highlight files like CSS, JS, images
Now click inside index.html and press keyboard shortcut F5 to open live preview:
As you start typing HTML or CSS code, changes will live update in the browser preview without needing to save constantly. This tight feedback loop makes Brackets great for faster UI development.
Next, right click on the HTML tag and select "Edit tag" to invoke inline CSS/JS editors without leaving your HTML structure:
These are just some of the cool editing features that accelerate development time.
To customize Brackets, click the extensions icon in sidebar and browse plugins like:
- Themes – Jetbrains Darcula, Monokai
- File Icons – Works with file explorer
- Emmet – For fast HTML expansion
- Beautify – To format messy code
- Minimap – Code navigation aid
- Git/SVN – Version control
Choose extensions suiting your coding style and project needs.
Sample Web Development Workflows
As a full-stack developer, here are some of my standard workflows leveraging Brackets for web projects:
Static Website Building
For converting designs to static HTML pages, Brackets expedites the process with its live preview and CSS manipulation tools. Just open PSD mockups, write semantic HTML5 markup, use inline editor to style elements and see changes in real-time.
WordPress Development
When building WordPress themes and plugins, I edit PHP files and templates in Brackets while having a separate tab open for live preview. Tweaking PHP, HTML and CSS is faster without constantly switching contexts.
Frontend JavaScript SPAs
For frontend projects using React, Vue or vanilla JavaScript, having the browser preview side-by-side reduces compile cycles. We can edit JS logic as well as CSS stylesheets in Brackets while seeing updated UI immediately.
Integrations with Sass, NPM, Webpack etc
Finally for using preprocessors like Sass or module bundlers like Webpack, integrating their CLIs in Brackets task runners is straightforward. We can run our npm scripts on current project tree easily.
As visible from above examples, Brackets fits nicely into various web development workflows. The context-sensitive editing cuts out unnecessary distractions.
Using Brackets Efficiently on Linux
To leverage Brackets to its full potential for web development on Ubuntu, keep these tips in mind:
Optimal System Resources
Brackets is pretty lightweight editor. For average projects, 2GB RAM and 2 CPU cores are decent. Increase resources for large codebases.
Adjust Linux File Limits
Tweak number of open files limit to allow monitoring many files:
sudo vim /etc/security/limits.conf
* - nofile 50000Exclude Large Folders
If indexing certain folders slows Brackets, right click and select "Exclude folder from Project"
Setup Folder as Project
Use File > Save Project As to save current folder structure as project file for fast reopen.
Split Editors
Drag tabs to detach into separate split editors for side-by-side editing.
Fullscreen Mode
Hit F11 to enter distraction free writing mode hiding all UI components.
Emmet for Fast Coding
Use Emmet extension for high speed HTML generation with CSS class autocompletes.
Mastering these tips and tricks will bolster your productivity as a web developer using Brackets on Linux environments.
Debugging Issues with Brackets
In rare cases, you may encounter issues running Brackets properly on Ubuntu. Here is some troubleshooting advice:
- Check installed dependencies if crashes on launch
- Remove problematic extensions interfering with base editor
- Review system resource limits and increase if necessary
- Compare running extensions with list on wiki for incompatibilities
- Reset user preferences to isolate settings issues
rm -rf ~/.config/brackets - Report unresolved bugs blocking usage on Brackets GitHub
As open source software, community contributions help drive Brackets development and stability on varied platforms.
Updating, Backing Up and Uninstalling
Updating
- Use
sudo snap refresh brackets --classicto update Snap install - Run
sudo apt update && sudo apt upgradeto get newest APT version - Download latest .deb package for manual upgrades
Backing Up Configuration
cp -R ~/.config/brackets brackets-config-backupUninstalling
sudo snap remove brackets
sudo apt remove bracketsTake scheduled backups of Brackets extensions and settings before performing any upgrades. Clean uninstalls are also recommended before doing reinstalls of fresh versions.
Final Thoughts
In closing, Brackets brings a focused toolset aimed specifically at web designers and frontend developers. Its versatility via extensions, ease of use through live previews and inline editors, paired with active open source development, make Brackets my go-to recommendation for new programmers getting started with web languages on Linux.
I hope you found this detailed guide useful in installing, customizing and unleashing the full power of Brackets code editor on your Ubuntu desktop. Let me know if you have any other questions!
