Appendix C. Editors and IDEs
Just like programmers are fussy about their choice of programming language, they are sometimes also very choosy about their choice of an editor or the IDE (Interactive Development Environment). Also, just like it's very difficult to let go of other habits, it's also very difficult to change the habits of sticking to the programming language and the editor/IDE one is used to. The primary reason for this is, of course, the comfort zone one is in while working with familiar tools and techniques. But, as with other things in life, sometimes the payoffs can be huge when one charts an unknown territory. So, I'll recommend you try one of the following editors/IDEs if it is not the one you are accustomed to. You might even come across some treasure!
When we talk of editors, typically the breadth of choices available in the *nix (Unix/Linux/Mac) world are far more than in the Windows world. So, let's start with some of the oldies in this league.
Emacs (available at http://www.gnu.org/software/emacs/) is the granddaddy of text editors and is probably one of the oldest of all. The beauty of Emacs, however, is that it is one of the most customizable editors out there, so much so that not only can you write code in almost all of the programming languages you can think of but also carry out other activities such as using it as a Twitter client, e-mail client, or a directory editor. Emacs has a major mode which tends to be language or task specific (such as Clojure, Ruby, Haskell, Python, and many more), but only one major mode can be active at any given time. A minor mode is an optional editing mode that alters the behavior of Emacs in some well-defined way.
Many minor modes can be active at any time, so for example, along with some major mode, the auto-indent minor mode can be active, or we can use the Paredit minor mode (which keeps the parentheses balanced) while working with S-expression based programming languages (such as Clojure, Lisp, and so on). Some of the major advantages of using Emacs are:
It restricts the usage of mouse to a bare minimum (or none at all) at most times because it has shortcut key combinations for any tasks imaginable. And yes, it is difficult to remember those shortcuts initially, but once you get used to them, your memory can easily recall them even if sometimes you've actually forgotten those. And excellent help is built inside the editor for most of the major/minor modes.
You'll seldom have to leave the editor because so many modes are available that you can practically do everything from inside the editor.
It is free, being the baby of Richard Stallman (RMS of the Free Software Foundation (available at http://www.fsf.org/) fame)
So, yes, the learning curve is steep and will definitely take some time, but if you learn how to use Emacs, you might not feel the need to use any other editor ever. It is also available for Windows too, so no excuses!
Vim (available at http://www.vim.org/) is the other heavyweight in this category and an old rival to Emacs. So if anyone is talking about Emacs or Vim, the name of the other will invariably crop up. The guiding philosophy behind Vim is again the use of keyboard exclusively, and the biggest advantage of Vim is that it is often available on servers to be used through SSH. So, for example, when you want to deploy something on AWS (Linux) machines, all you'll find on that machine is the omnipresent terminal (the command line) and Vim, so if you are not proficient with both of these, you are going to have a tough time and will most likely have to install a simpler editor like Nano (available at http://www.nano-editor.org/) to edit anything. Vim has an insert mode where the user enters text and a command mode to navigate and edit using keystrokes. Because of a dedicated command mode, Vim has more commands which consist of single keys rather than a key combination. Hence, one can edit faster when one has become accustomed to those commands. Again, Vim also has a steep learning curve but pays you rich dividends because it too supports most of the programming languages, and so you'll hardly need to think about other editors (not to mention that it is also free).
Sublime Text is cross-platform and more modern than Emacs or Vim, and so will appeal to the majority of users who are more accustomed to IDEs such as Visual Studio or Eclipse. Although it is not a free editor, it has a lot of plugins available through its Package Manager (available at https://packagecontrol.io/), which make it suitable for development in any programming language. It is also highly customizable with lots of themes (available at http://colorsublime.com/) and other goodies.
Visual Studio and Visual Studio Express
How can one talk of editors and not talk about the de facto standard in the .NET world—Visual Studio (VS, the paid one) and its free counterpart, the Visual Studio Express. The debugging support of VS is one of the best. Before you think about how VS is useful for web development, let me point you to a few extensions such as:
Web Essentials (available at http://vswebessentials.com/), which has support for HTML, CSS, JS, TypeScript, CoffeeScript, and so on
Node.js tools for Visual Studio (available at http://nodejstools.codeplex.com/), which has editing, IntelliSense, and NPM support
Package IntelliSense (available at https://visualstudiogallery.msdn.microsoft.com/65748cdb-4087-497e-a394-2e3449c8e61e), which has NPM and Bower package IntelliSense
Task Runner Explorer (available at https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708), which provides a task runner for Grunt and Gulp directly within VS
The earlier free versions of VS were called VS Express editions, but now they are called the VS Community (available at https://www.visualstudio.com/en-us/products/visual-studio-community-vs). It supports coding in C++, Python, and HTML5 (along with Microsoft languages) and for Node.js and JavaScript too. So, this IDE is an excellent choice for people who're already used to VS.
Eclipse (available at http://eclipse.org/) is one of the most popular editors for folks from the Java land. Eclipse has a huge community and so many extensions/plugins which can be found on the Eclipse market place (available at http://marketplace.eclipse.org/). These can be downloaded and installed from Eclipse without leaving the editor. It has a JavaScript Development Tools plugin (JSDT, available at https://eclipse.org/webtools/jsdt/) which helps in the development of JavaScript and web applications. Moreover, it also has plugins for many functional languages such as Erlang (available at http://erlide.org/), Haskell (available at http://eclipsefp.github.io/), Clojure (which is called Counterclockwise and is available at http://doc.ccw-ide.org/documentation.html), and so on, which make it an excellent choice for development in many programming languages.
Now, as this is a book on Angular, I want to talk about two more editors that have extra support for Angular code bases through external plugins. Those are Brackets, which is backed by Adobe, and WebStorm, which is by JetBrains.
Brackets (available at http://brackets.io/) is a free editor backed by Adobe and has a lot of interesting features such as Inline code editing (where all the CSS selectors that apply to an ID are shown in an inline window by pressing Command / Ctrl + E), Live preview (where if you make any changes to your HTML or CSS, you can instantly see those changes on screen), and so on. It too has a lot of useful extensions such as Brackets-Git (available at https://github.com/zaggino/brackets-git) which provides Git integration from Brackets, Beautify (available at https://github.com/drewhamlett/brackets-beautify) which formats HTML, CSS and JavaScript code, and many others for previewing Markdown, code folding, and so on. The extensions which help in Angular-related coding are shown in the following screenshot:
Note that the last one is already installed in my brackets, so the button is disabled; for other extensions, the Install button is enabled.
JetBrains (available at https://www.jetbrains.com/) is a well-known company, and they are the creators of the Java IDE called IntelliJ IDEA, the very famous Visual Studio extension called ReSharper (which makes refactoring a breeze), and other tools such as TeamCity which is a Continuous Integration and Deployment server. Now, most of their tools are paid ones (except TeamCity, which has a free version available), and they have one more ace IDE for JavaScript called WebStorm (available at https://www.jetbrains.com/webstorm/). It is a cross-platform editor and has support for most of the modern web technologies such as AngularJS, React, Meteor, ES6, Dart, TypeScript, Node.js, and many more. It has refactoring support for JS code which spans not just a single file but also multiple files.
You can visit Go to definition for declaration of functions and variables and find their usages with Find usages. Its AngularJS support includes:
AngularJS-aware code completion for ng directives, controller, and application names, and code insights for data bindings inside curly brace expressions {{}}
AngularJS-aware navigation between the name of controller in HTML and its definition is JavaScript between modules, controllers, and directives.
If you don't mind paying something, then WebStorm is one of the best IDEs out there for web and full-stack JS development.
