Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop
When I started Angular 2 development, I came across a huge number of tools, plugins, guide, starter kits, editors etc for Angular and suddenly I didn’t know where to start. After trying some of them I was finally able to curate a list of decent tools. Over the next few weeks, I am planning to post curated a list of the best editors, tools, plugins, extensions, UI kits, guides, etc – so stay tuned.
Angular 2 Ecosystem Review
1. Code Editors for Angular 2
...
More articles coming soon.
Code Editors for Angular 2
A Code Editor has been the basic primary tool for any kind of programming. It is responsible for boosting a developer’s efficiency as well as bringing it down. There are so many code editors available today and for the same reason, it is highly crucial to choose the right tool for right kind of development. I prefer using VS Code for Angular 2 development but each individual can have their own opinion. I have listed some popular code editors with their support for Angular 2 so that a programmer can choose what suits the best and use the tool effectively.
Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and OS X. It is free and open-source, and includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring.
- URL: code.visualstudio.com
- Github: Microsoft/vscode
- Documentation:
- Platform: Windows, Mac, Linux
- Features:
- Git commands built-in
- Extensible and customizable
- Huge language support
- Always-On IntelliSense
- Friendly Debugging
Extensions
- TSLint – Integrates the tslint linter for the TypeScript language into VS Code.
- Auto Import – Automatically finds, parses and provides code actions and code completion for all available imports. Works with TypeScript and TSX.
- TypeScript Snippets – This VS Code extension adds Angular (v2 or higher), TypeScript and HTML code snippets into your editor.
- Angular 2 Files – This extension allows quickly scaffold angular 2 file templates in VS Code project.
- Angular 2 Switcher – Easily navigate to typescript(.ts)|template(.html)|style(.scss/.sass/.less/.css) in Angular 2 project.
- Angular UI Bootstrap Snippets – Snippets for UI Bootstrap (Bootstrap components for AngularJS). Migrated from my Atom Package angular-bootstrap.
Sublime Text is a sophisticated text editor for code, markup and prose. It offers lot of community developed plugins for extending its functionality. Sublime Text has been all time favourite editor for developers.
- URL: sublimetext.com
- Github: SublimeText
- Documentation:
- Platform: Windows, Mac, Linux
- Licence: Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use.
- Features:
- Goto Anything
- Multiple Selections
- Command Palette
- Distraction Free Mode
- Split Editing
- Instant Project Switch
- Plugin API
- Customise Anything
- Cross Platform
Extensions
- TypeScript Plugin – The plugin uses an IO wrapper around the TypeScript language services to provide an enhanced Sublime Text experience when working with TypeScript code.
- Angular 2 Snippets – This package provides snippets and completions for Angular2. Sublime Text uses fuzzy searching for snippets/completions, therefore you can trigger either without having to write out the whole trigger.
- Angular2HTML Syntax – Angular2 HTML Syntax for SublimeText
Atom is a text editor that’s modern, approachable, yet hackable editor made for 21st century. Atom is widely used by developers for all major technologies. It has a huge active community hence there are always enhancements/plugins available for everything.
- URL: atom.io
- Github: atom
- Documentation:
- Platform: Windows, Mac, Linux
- Licence: Open-source
- Features:
- Cross-platform editing
- Built-in package manager
- Smart auto-completion
- File system browser
- Multiple panes
- Find and replace
Packages
- Angular 2 – A complete package for Angular 2 app development. [BETA]
- Angular 2 Snippets – This extension for Atom adds snippets for Angular 2 for TypeScript and HTML.
WebStorm is built on top of the open-source IntelliJ Platform, which JetBrains have been developing and perfecting for over 15 years. It offers the tight integration with VSC, Local History feature, has a vibrant plugin ecosystem, is completely configurable, and has much, much more to offer. WebStorm offers advanced support for AngularJS and TypeScript, and can provide you with core coding assistance.
- URL: jetbrains.com/webstorm/
- Documentation:
- License: Paid (US $129.00 for single user/first year)
- Platform: Windows, Mac, Linux
- Features:
- Intelligent Coding Assistance
- Support for Latest Technologies
- Version Control System
- Seamless Tool Integration
- Debugging, Tracing and Testing
- Built in Terminal
Extensions
The Angular IDE by Webclipse is built specifically for Angular. Simple for beginners; powerful for experts. Available as a stand-alone IDE or as part of our Eclipse plugin, Webclipse, or our robust Full Stack IDE, MyEclipse 2017.
- URL: genuitec.com/products/angular-ide
- Documentation:
- License:
- Free Version (Basic features included. All pro features can be used for 8 days a month)
- Pro Version – Paid (US $29.00 for one year)
- Platform: Windows, Mac, Linux
- Features:
- TypeScript 2.x validation and debugging
- HTML templates with validation and auto-complete
- Angular-CLI integration
- Optimized for developers to make the most of Angular
ALM project is known as next generation IDE just for TypeScript that helps developers to write code very easily for TypeScript projects. It can be installed with just a single npm command.
- URL: alm.tools/
- Github: alm-tools/alm
- Documentation:
- License: Open Source
- Platform: Windows, Mac, Linux
- Features:
- Light weight
- Made for TypeScript
- The singular purpose of removing all barriers of entry into TypeScript.
- The editor is an extension of the language, not the other way around
Brackets is a lightweight, yet powerful, modern text editor. It blend visual tools into the editor so you get the right amount of help when you want it without getting in the way of your creative process. You’ll enjoy writing code in Brackets.
- URL: brackets.io/
- Github: adobe/brackets
- Documentation:
- License: Open Source
- Platform: Windows, Mac, Linux
- Features:
- Inline Editors
- Live Preview
- Preprocessor Support
Extensions
Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as “vi” with most UNIX systems. Vim is loved by many developers for kinds of editing. Vim is rock stable and is continuously being developed to become even better.
- URL: vim.org
- Github: vim/vim
- Documentation:
- License: Open Source
- Platform: Mac, Linux
- Features:
- Persistent, multi-level undo tree
- Extensive plugin system
- Support for hundreds of programming languages and file formats
- Powerful search and replace
- Integrates with many tools
Extensions
If you feel I have missed any good editor for Angular 2 or for any other query, please feel free to contact at @icicletech
Friday Hug is a weekly round up of best articles, tutorials, analysis across the Web, hand curated by our Tech Team.
