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
- 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.
- 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.
- 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
I've been using Atom for a while now but without code completion on OpenUI5/SAPUI5 I'm not satisfied with it.
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.
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... 😉
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...
You may want to have a look at this code completion project: GitHub - TimoSta/tern-openui5: Autocomplete for the OpenUI5 framework for your favorite code editor, powered by Tern.
I am using Brackets, Live Preview is a very nice future.
Hi suhaas S
there are also various live preview plugins (HTML, SVG, GeoData, markdown,...) for Atom available: https://atom.io/packages/search?q=live+preview
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).
Cheers,
Steffen