Full-Stack Engine

Recommended Atom extensions for Angular 2/4

I've been working on some personal projects using Angular 2 and started listing some handy extensions in Atom Editor to work with Angular 2, Typescript, Git and HTML.
As a simple rule of thumb for choosing an Atom package from the many available in the community, you might look at the number of downloads; the popularity often means an excellent quality package.

For Angular 2, I recommend this course from Mosh Hamedani in Udemy to start with Angular 2 and Typescript: Angular 2 with TypeScript for Beginners.

If you need to start a new angular 4 project quickly with back-end and database integration ready, don't miss my post on creating a project with angular 4 and sails.js

atom-typescript

atom-typescript is an essential package to work with Angular 2/4. These are the features listed on their website:

  • Autocomplete
  • Live error analysis
  • Type information on hover
  • Compile on save
  • Project Context Support (tsconfig.json)
  • Project Build Support
  • package.json Support
  • Goto Declaration
  • Find References
  • Block comment and uncomment
  • Rename refactoring
  • Common Snippets

emmet

Emmet as a project is a toolkit that works as a plug-in for several favorite text editors, like Sublime Text, Eclipse, Brackets and of course Atom.

It provides abbreviations for HTML auto-completion and intellisense inspired in CSS selectors, which makes the coding of HTML code much faster and comfortable.

emmet

atom-beautify

Beautify is a utility to ident and provide a superior format to the code in several different programming languages, like HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more.

beautify

autoclose-html

autoclose-html is a simple package that does a single task, closing tags in HTML markup. However, as simple as it sounds as if something is missing in a plain Atom installation and makes your life easier when writing web content.

autoclose--1-

autocomplete-modules

A handy package, not only for Angular 4 but module loading in general. It looks from every package in the node_modules directory and suggests the list of matching package names as you write an import or require statement.

autocomplete

git-plus

At last, but not least, we have git-plus, a package for making the git tasks, like add, commit, check-out, push, and others, as easy as using ctrl+shift+p and typing the corresponding git command.

git-plus--1-

Extra

If you use Linux as a regular development OS, you might want to use the command line inside Atom for convenience.

terminal-fusion

A "terminal" package for Atom on Linux.

terminal

Author image
Costa Rica
Passionate Software Developer with full-stack development experience.