Skip to Content

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

7 Comments
You must be Logged on to comment or reply to a post.