Skip to Content
Author's profile photo Elmar Kuesters

Atom text editor for UI5 development

Introduction to Atom

Atom is a free text editor that is published under the MIT license. By installing selected packages you can modify the editor to fits your needs.

Useful packages for UI5 development

  • Project Manager
    • simple project manager which can be opened via shortcut CTRL+CMD+p on a Mac
  • Color picker
    • supports color picker via right click with various formats (HEX, RGB, HSL, …)
    • shows actual color as background color in the CSS file
  • linter + linter-eslint
    • With these plugins you can integrate eslint checks directly into the editor. E.g. every time you save a javascript file the eslint checks are run and the result is directly displayed inside the editor. This helps to prevent a lot of small coding mistakes and to enforce common standards when working together with other developers.
    • ESLint can be configured with a .eslintrc file you add to your project. A good starting point is to use the .eslintrc file from the OpenUI5 sources
  • atom-beautify
    • This plugin provides code formatter for HTML, XML, JavaScript, CSS and many more file formats
    • Unfortunately the formatting for XML sucks.
    • JS Beautify can be i configured in a way that it matches your ESLint settings.
  • svg-preview
    • this plugin shows a visual representation of an SVG file
  • Minimap + Plugins
    • Minimap is a plugin that renders a small representation of the file on the right side of the editor window. Minimap can be enhanced with additional plugins.
  • DocBlockr
    • create easily documentation sections in your code
    • press Enter or Tab after /** in Java Script code and a template documentation is created for you
  • merge-conflicts
    • allows you to merge git conflicts directly in atom
    • if you open a file with merge conflicts in Atom, you can then press ALT+m d to open this plugin
    • to do more advanced resolutions like “ours then theirs”, you can right click on the colored chunks

Export / import packages to Atom

Export your installed packages into a file in your home directory

apm list --bare --installed --no-dev > ~/atom_packages.txt

Import all packages from a file to Atom

apm install --packages-file ~/atom_packages.txt

This blog post was created in cooperation with Steffen Froehlich

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Jason Scott
      Jason Scott

      I've been using Atom for a while now but without code completion on OpenUI5/SAPUI5 I'm not satisfied with it.

      Author's profile photo Former Member
      Former Member

      Hi Jason,

      I don't think code completion is a disqualifier for a good text editor. For me it is more important to easily and quickly write/edit code. When you work with a framework or library for a longer time you won't need code completion because you already know key functions or attributes. And when you don't have a clue you mostly have to look at the documentation. In my opinion ATOM is a great text editor even without code completion.

      Author's profile photo Robin van het Hof
      Robin van het Hof

      I think what Jason meant was not necessarily code-completion as in Ctrl-Space type of completion, but also awareness of what parameters (and parameter types) should be used for a particular framework method.

      For quick writing of a simple test application, I stick to Atom too. But for any application bigger than two files, I quickly resort to an IDE which provides me more context awareness.

      However, in the end it's all about developer preferences -- I know some who write awesome JS code using *ahem* VI or Emacs... 😉

      Author's profile photo Jason Scott
      Jason Scott

      Don't get me wrong... Atom and its plugin ecosystem is awesome... I just miss have some context awareness as robin mentions below... If you're not in the UI5 api's everyday then it is a huge help.

      suhaas S Live reload is fantastic. I haven't tried brackets yet... But you can have live reload with any editor. Just use grunt or gulp tooling...

      Author's profile photo Jan Penninkhof
      Jan Penninkhof
      Author's profile photo Former Member
      Former Member

      I am using Brackets, Live Preview is a very nice future.

      Author's profile photo Steffen Froehlich
      Steffen Froehlich

      Hi suhaas S

      there are also various live preview plugins (HTML, SVG, GeoData, markdown,...) for Atom available:

      Otherwise when you look for a live preview of your app, I'd suggest to use Grunt, Gulp or browsersync (also available as plugin for Gulp and Grunt).