Skip to Content

Atom text editor for UI5 development

November 6, 2015 | 1,902 Views |
 atomeditorui5
Follow

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

To report this post you need to login first.

7 Comments

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

    1. 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.

      (0) 
      1. 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… 😉

        (0) 
      2. Former Member

        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…

        (0) 

Leave a Reply