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 .

Expert Angularjs Developers to develop, optimize & support your product.

Get the top Angularjs Development Company to design & develop elegant Angular Web App

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.

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: Offical Documentation Setup Sublime Text 3 for Angular 2

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.

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: Official documentation Using external tools Angular workflow in WebStorm

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

Angular 2 TypeScript Live Templates - This extension for adds Angular 2 code snippets to Webstorm

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: Official 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: Official 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: Official Documentation

License: Open Source

Platform: Windows, Mac, Linux

Features: Inline Editors Live Preview Preprocessor Support



Extensions

AngularJS for Brackets - AngularJS extension for Brackets by the AngularUI team

Brackets TypeScript - TypeScript Support for Brackets

Angular Snippets Collection - A pre-made list of Angular.js JavaScript and HTML templates.

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: Vim Docs Vim Configuration for TypeScript and Angular2 Development

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

Angular 2 TypeScript Snippets for Vim - This package contains Snipmate snippets for Angular 2 for TypeScript and HTML.

Typescript Syntax for Vim - Syntax file and other settings for TypeScript.

YouCompleteMe - A code-completion engine for Vim

If you feel I have missed any good editor for Angular 2 or for any other query, please feel free to contact at @icicletech

Published in web-development, javascript | Tagged with javascript, web-development, editors, angular-2, programming

You maybe interested in