What text editors are available?
In this article we highlight some things to think about when installing a text editor for web development.
Prerequisites: | You should already know about various software you need to build a website. |
---|---|
Objective: | Learn how to choose a text editor that best suits your needs as a web developer. |
Summary
A website consists mostly of text files, so for a fun, pleasant development experience you should choose your text editor wisely.
The sheer number of choices is a bit overwhelming, since a text editor is so basic to computer science (yes, web development is computer science). Ideally, you'd try as many editors as you can and get a feel for what suits your workflow. But we'll give you some pointers for getting started.
Here are the primary questions you should consider:
- Which OS (operating system) do I want to work with?
- What kind of technologies do I want to manipulate?
- What kind of basic features do I expect from my text editor?
- Do I want to add extra features to my text editor?
- Do I need support/help while using my text editor?
- Does my text editor's look-and-feel matter to me?
Notice we didn't mention price. Obviously, that matters too, but a product's cost has little connection with its quality or capability. There's a big chance you'll find a suitable text editor for free.
Here are some popular editors:
Editor | License | Price | OS | Support | Doc. | Extensible |
---|---|---|---|---|---|---|
Bluefish | GPL 3 | Free | Windows, Mac, Linux | Mailing list, wiki | Online Manual | Yes |
Brackets | MIT/BSD | Free | Windows, Mac, Linux | IRC | GitHub Wiki | Yes |
Nova | Closed source | $99 | Mac | Twitter, Forum, Online | eBook | Yes |
CodeLobster | Closed source | Free | Windows, Mac, Linux | Forum, Email | Online Manual | Yes |
Emacs | GPL 3 | Free | Windows, Mac, Linux | FAQ, Mailing list, News Group | Online Manual | Yes |
Espresso | Closed source | $99 | Mac | Online Manual | Yes | |
Gedit | GPL | Free | Windows, Mac, Linux | Discourse, IRC | Online Manual | Yes |
Kate | LGPL, GPL | Free | Windows, Mac, Linux | Mailing list, IRC | Online Manual | Yes |
Komodo Edit | MPL | Free | Windows, Mac, Linux | Forum | Online Manual | Yes |
Notepad++ | GPL | Free | Windows | Forum | Online Manual | Yes |
PSPad | Closed source | Free | Windows | FAQ, Forum | Online Help | Yes |
Sublime Text | Closed source | $70 | Windows, Mac, Linux | Forum | Official, Unofficial | Yes |
TextMate | Closed source | $50 | Mac | Twitter, IRC, Mailing list, Email | Online Manual, Wiki | Yes |
BBEdit | Closed source | Free | Mac | FAQ | Online Manual | No |
Vim | Specific open license | Free | Windows, Mac, Linux | Mailing list | Online Manual | Yes |
Visual Studio Code | Open Source under MIT license/ Specific license for product | Free | Windows, Mac, Linux | FAQ | Documentation | Yes |
Active Learning
In this active learning section, we would like you to try using and/or installing a text editor of your choice. Your computer may already be installed with one of the editors suggested above (e.g. Gedit if you use GNOME desktop, Kate if you use KDE etc.), if not then you should try installing one or more text editors of your choosing.
Try digging through the settings of your editor and read the manual or documentation to see what its capabilities are. In particular (if possible in your editor), try to:
- Change syntax highlighting settings and colors
- Play with indentation width, setting it to an appropriate setting for your needs
- Check autosave and session saving settings
- Configure any available plugins and investigate how to get new ones
- Change color schemes
- Adjust view settings and see how you can change the layout of the views
- Check what programming languages/technologies your editor supports
While you're learning the default settings of most text editors should be fine to use, but it is important to become familiar with your chosen tools, so you can select the best one for your usage. You will learn more about customizing your editors and tools as you gain experience, and more importantly you will learn what features are more useful to your purposes.
Dig deeper
Choice criteria
So, in more detail, what should you be thinking about when you choose a text editor?
Which OS (operating system) do I want to work with?
Of course it's your choice. However, some editors are only available for certain OSs, so if you like switching back and forth, that would narrow down the possibilities. Any text editor can get the job done, if it runs on your system, but a cross-platform editor eases migration from OS to OS.
So first find out which OS you're using, and then check if a given editor supports your OS. Most editors specify on their website whether they support Windows or Mac, though some editors only support certain versions. If you're running Ubuntu, your best bet is to search within the Ubuntu Software Center. In general, of course, the Linux/UNIX world is a pretty diverse place where different distros work with different, incompatible packaging systems. That means, if you've set your heart on an obscure text editor, you may have to compile it from source yourself (not for the faint-hearted).
What kind of technologies do I want to manipulate?
Generally speaking, any text editor can open any text file. That works great for writing notes to yourself, but when you're doing web development and writing in HTML, CSS, and JavaScript, you can produce some pretty large, complex files. Make it easier on yourself by choosing a text editor that understands the technologies you're working with. Many text editors help you out with features like:
- Syntax highlighting. Make your file more legible by color-coding keywords based on the technology you're using.
- Code completion. Save you time by auto-completing recurring structures (for example, automatically close HTML tags, or suggesting valid values for a given CSS property).
- Code snippets. As you saw when starting a new HTML document, many technologies use the same document structure over and over. Save yourself the hassle of retyping all this by using a code snippet to pre-fill your document.
Most text editors now support syntax highlighting, but not necessarily the other two features. Make sure in particular that your text editor supports highlighting for HTML, CSS, and JavaScript.
What kind of basic features do I expect from my text editor?
It depends on your needs and plans. These functionalities are often helpful:
- Search-and-replace, in one or multiple documents, based on regular expressions or other patterns as needed
- Quickly jump to a given line
- View two parts of a large document separately
- View HTML as it will look in the browser
- Select text in multiple places at once
- View your project's files and directories
- Format your code automatically with code beautifier
- Check spelling
- Auto-indent code based on indentation settings
Do I want to add extra features to my text editor?
An extensible editor comes with fewer built-in features, but can be extended based on your needs.
If you aren't sure which features you want, or your favorite editor lacks those features out of the box, look for an extensible editor. The best editors provide many plugins, and ideally a way to look for and install new plugins automatically.
If you like lots of features and your editor is slowing down because of all your plugins, try using an IDE (integrated development environment). An IDE provides many tools in one interface and it's a bit daunting for beginners, but always an option if your text editor feels too limited. Here are some popular IDEs:
Do I need support/help while using my text editor?
It's always good to know if you can get help or not when using software. For text editors, check for two different kinds of support:
- User-oriented content (FAQ, manual, online help)
- Discussion with developers and other users (forum, email, IRC)
Use the written documentation when you're learning how to use the editor. Get in touch with other users if you're troubleshooting while installing or using the editor.
Does my text editor's look-and-feel matter to me?
Well, that's a matter of taste, but some people like customizing every bit of the UI (user interface), from colors to button positions. Editors vary widely in flexibility, so check beforehand. It's not hard to find a text editor that can change color scheme, but if you want hefty customizing you may be better off with an IDE.
Install and set up
Installing a text editor is usually quite straightforward. The method varies based on your platform but it shouldn't be too hard:
- Windows. The developers will give you an
.exe
or.msi
file. Sometimes the software comes in a compressed archive like.zip
,.7z
, or.rar
, and in that case you'll need to install an additional program to extract the content from the archive. Windows supports.zip
by default. - Mac. On the editor's website you can download a
.dmg
file. Some text editors you can find directly in the Apple Store to make installation even simpler. - Linux. In the most popular distros you can start with your graphical package manager (Ubuntu Software Center, mintInstall, GNOME Software, &c.). You can often find a
.deb
or.rpm
file for prepackaged software, but most of the time you'll have to use your distro's repository server or, in worst case scenario, compile your editor from source. Take the time to carefully check the installation instructions on the text editor's website.
When you install a new text editor, your OS will probably continue to open text files with its default editor until you change the file association. These instructions will help you specify that your OS should open files in your preferred editor when you double-click them:
Next steps
Now that you have a good text editor, you could take some time to finalize your basic working environment, or, if you want to play with it right away, write your very first web page.