I had a fairly advanced draft on my local blog about the comparison I was making between Brackets and SublimeText3 , but today I had to change almost everything, because the few defects or lack of options that I found in Brackets can be overshadowed by using extensions.
Brackets has caused a sensation. Being an open-source code editor has given it an edge over other alternatives, and coming from Adobe , it's no wonder it's at least generating curiosity.
But anyway, let's get to the point. What I intend to do is compare Brackets and Sublime Text 3 ; I've been using the latter for some time now for various reasons.
How to get braces?
To download Brackets, simply go to the downloads page on their official website and download a .deb file . We've already covered the installation steps for Ubuntu and its derivatives here, but the method I showed for Arch Linux has since changed slightly.
Basically, what we need to do now in Arch Linux is the following:
- We download the .deb and unzip it.
- The folder is created for us brackets-sprint-29-LINUX64 which will have the file data.tar.gz indoors.
- We also unzip the file data.tar.gz and we have two folders left: opt / y usr /.
- We open a terminal and execute:
$ sudo cp -Rv opt / brackets / / opt / $ sudo cp usr / bin / brackets / usr / bin / $ sudo cp -Rv usr / share / doc / brackets / / usr / share / doc / $ sudo cp -R usr / share / applications / brackets.desktop / usr / share / applications / $ sudo cp usr / share / icons / hicolor / scalable / apps / brackets.svg / usr / share / icons / hicolor / scalable / apps /
If we had already done the installation in the way I showed you previously, we will have to execute in the terminal:
$ sudo rm -Rv /usr/lib/brackets
Now we need to modify or create the file /usr/share/applications/brackets.desktop so that it looks like this:
[Desktop Entry] Name = Brackets Type = Application Categories = Application Exec = / opt / brackets / Brackets% U Icon = brackets MimeType = text / html;
Anyway, the original file is inside the /opt/brackets folder . That's it; you can now run Brackets from the Menu. If you have any problems starting it, please read the previous article on how to manually install Brackets on Arch Linux.
How to get SublimeText3?
In the case of Sublime Text , we simply need to go to its official website and download the version corresponding to our architecture. Then we extract the downloaded file somewhere, and to make Sublime Text available from the Applications Menu, we create the file /usr/share/applications/sublimetext3.desktop and add the following to it:
[Desktop Entry] Version = 3.0 Type = Application Name = Sublime Text 3 GenericName = Text Editor Comment = Sophisticated text editor for code, markup and prose Exec = / home / elav / Linux / Packages / Development / SublimeText3 / sublime_text% F Terminal = false MimeType = text / plain; Icon = / home / elav / Linux / Packages / Development / SublimeText3 / Icon / 256x256 / sublime-text.png Categories = TextEditor; Development; StartupNotify = true Actions = Window; Document; [Desktop Action Window] Name = New Window Exec = / home / elav / Linux / Packages / Development / SublimeText3 / sublime_text -n OnlyShowIn = Unity; [Desktop Action Document] Name = New File Exec = / home / elav / Linux / Packages / Development / SublimeText3 / sublime_text --command new_file OnlyShowIn = Unity;
Of course, you need to change the path /home/elav/Linux/Packages/Development/ to the folder where you have Sublime Text 3 extracted. The .desktop file is also located within the Sublime folder.
Interface
The interface of both editors is very similar. A panel on the left with the Projects and open files, a menu at the top with the editor options, although in the case of Brackets, it will appear above the editing area.
One thing I like about Sublime Text is the MiniMap that appears on the right side of the editing area, which allows us to easily navigate the entire document. But as I mentioned at the beginning, Brackets also offers this functionality thanks to Extensions.
SublimeText also allows us to change the appearance of the editing area thanks to a series of styles that are already included by default, as well as set our user preferences and, most importantly, our keyboard shortcuts.
And guess what? Well, Brackets extensions are back , allowing us to do the same thing:
Unlimited
Sublime Text 3 starts up much faster than Brackets ; I'd say it's almost instantaneous. Brackets runs quickly, especially since the latest version (Spring 29), but it takes a few milliseconds to load a previously opened project.
With two files open in both editors, SublimeText 's resource consumption is slightly higher than Brackets ' , and this remains the case with the use of each.
Usability
At first glance, examining each menu, we realize that Sublime Text has many more options than Brackets . As I mentioned earlier, it offers more keyboard shortcuts and the ability to change and customize them by default. Both share most of them, such as commenting out a line using Ctrl + /.
SublimeText has tabs (Brackets achieves this with an extension, although it's not very polished) , which makes it much easier to move between our files without having to go to the side panel.
But Brackets has something that I loved and that makes it very, very productive.
In Brackets, when we're editing an HTML file and want to edit the CSS code of a tag, or the JS code, we don't have to open the .css or .js file. We just place the cursor over the tag to be edited and press Ctrl + E. And look what happens:
As you can see, an area is displayed that shows us the CSS code associated with that tag. There we can edit and save it without having to open the original .css.
In addition, it will be shown in all the .css files that the style is applied to said tag and in the line where the style is applied.
Another feature I like about SublimeText compared to Brackets is that when you hover over an opening or closing tag, it indicates whether it's at the beginning or end. SublimeText also allows you to collapse a parent tag and its contents.
Another feature of SublimeText that I like is the ability to organize text alphabetically, which is very useful when we want to keep our .css file well organized.
Autocomplete
Another advantage of Brackets is its auto-completion, which is much better than SublimeText for two reasons: It shows a suggestion like BlueFish does and has more auto-completion options (CSS properties and HTML tags).
However, Brackets doesn't automatically close curly braces { } by default, but we can easily fix this in the Menu » Edit » Auto-fill brackets . And that's it.
Extensions
Both editors have extensions, which can be installed relatively easily. In the case of Sublime Text , there's a great plugin called Package Control that allows you to install the rest of the extensions very easily.
The only problem that I find is that I don't know how to do it manually, that is, download the extension from the Internet in a separate file and not directly from the editor.
It's not that it can't be done, it's just simpler in Brackets . We just need to open the Extension Manager and we can see the extensions we have installed or those we can install:
Alternatively, you can go to the Extensions directory , download the .zip file , extract it, and place it in ~/.Brackets/extensions/user/ . Restart the editor, and you're done.
Online edition
This functionality is excellent although I do not use it at all, so I cannot give an objective criterion about it. In theory, using Chromium + Node.js, the changes we are making in our HTML and CSS files can be automatically displayed in the browser.
Brackets will open a live connection to your local browser and send it the changes to the CSS file as you type! That's how easy the guys at Brackets describe it.
Currently, Brackets only supports Live Development for CSS. Still, in the current version, changes to HTML and JavaScript files are automatically detected and reloaded in the browser when you save. We are currently working on adding support for Live Development of HTML and JavaScript. In addition, automatic updates are only possible in Google Chrome, but we hope to be able to bring this functionality to all major browsers soon.
Quick View
For those who haven't yet memorized the color equivalencies between HEX and RGB, Brackets allows you to quickly and easily see exactly which color is being used.
In both CSS and HTML, simply move the cursor over any color or gradient value and Brackets will automatically display a preview of it.
The same applies to images: simply hover your cursor over an image address in Brackets , and it will display a thumbnail view of it.
Conclusions
Although this has only been a brief review by both editors, which then is the best?
You may have noticed that I'm somewhat partial to Brackets , but that's only because it's open source and offers a faster way to edit CSS. However, it still has a long way to go to surpass Sublime Text , both in functionality and stability.
Brackets is very actively developed and improves with each new version, so I have high hopes for it. But there's no denying that Sublime Text has come a long way, and it shows when you use it. I'm aware that I don't even use half of what it offers.
The fact that Sublime Text requires a license isn't a problem; you can use it without one. It's an excellent editor, possibly the best I've used so far, but it all comes down to personal preference. For now, I use both, and that way I can see how Brackets develops , which shows great promise.