Angular 2 Ecosystem Review: Top Angular Code Editors

by on

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.

Angular Code editors

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.

1. Visual Studio Code

Visual Studio Code

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.

2. Sublime Text

Sublime Text

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

3. Atom Editor

Atom

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.

4. Webstorm

WebStorm Editor

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.

Extensions

5. Angular IDE

Angular IDE

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

6. ALM IDE

ALM IDE

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

7. Brackets

Adobe Brackets

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.

Extensions

8. Vim Editor

Vim Editor

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.

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

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

CATEGORIES
web-development
javascript
ruby
ruby-on-rails
tutorials
startups
products
events
devops
mobile

TAGS
web-development
javascript
frameworks
ruby
open-source
tutorials
ruby-on-rails
front-end
reactjs
startups

MORE

RSS

X

Talk to us, that's always a good idea!