Atom text editor for UI5 development

[elmar_kuesters]

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