--- title: "10 Useful Atom Text Editor Packages for Web Developers" author: "Ellen Bauer" date: 2016-11-28 lang: en source: https://elmastudio.de/en/10-useful-atom-text-editor-packages-for-web-developers/ --- # 10 Useful Atom Text Editor Packages for Web Developers About three months ago I switched from using [Coda2](https://panic.com/coda/) as my text editor to the open source editor [Atom](https://atom.io/). I used Coda for several years and I was honestly a bit stuck in it. What I mean by that is that I used Coda every day, but without really optimizing my workflow any more. Since switched over to Atom (which is developed by GitHub), I have installed some of it's super practical community packages to optimize my daily workflow in the editor. And since I'm really happy that I chose Atom as my new editor, I want to share my list of the most helpful atomic packages I found so far in the following blog post. ## 1. Minimap ![atom-packages-01](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-01.jpg) With [Minimap](https://atom.io/packages/minimap) you will see a small preview of your entire file on the right side of your editor window. This way, you can easily keep track of your file and quickly scroll up and down the file. This is of course particularly helpful if you often work with very long files, e.g. stylesheets. ## 2. Project Manager ![atom-packages-02](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-02.jpg) In order to access your different projects easily, you can install the [Project Manager](https://atom.io/packages/project-manager) package. To save an open project folder, you can use the command "Project Manager: Save Project" in the Atom command palette. With the keyboard shortcuts **ctrl + cmd + p** (mac) or **alt + shift + P** (win & linux) you can then quickly access a list of your saved projects. ## 3. Emmet ![atom-packages-03](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-03.gif) [Emmet](https://docs.emmet.io/) is an abbreviation system for HTML and CSS, which helps you to write code much faster. And with a bit of practice it can really make your entire workflow a lot smoother and faster. In the beginning, you can look at the [Emmet cheatsheet](https://docs.emmet.io/cheat-sheet/) to learn the most important abbreviations. With the [Emmet package](https://atom.io/packages/emmet) for Atom, you can also use Emmet in the Atom editor. ## 4. Atom Alignment ![atom-packages-04](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-04.gif) To clean up your files and align all of the same elements in your code ob one clean line, the [Atom Alignment](https://atom.io/packages/atom-alignment) package is super helpful. Use the keyboard shortcuts **ctrl + cmd + a** (Mac) or **ctrl + alt + a** to quickly arrange items. ## 5. Highlight Selected ![atom-packages-05](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-05.gif) If you want to highlight all elements that are the same as the currently selected item, you can install the popular [Highlight Selected](https://atom.io/packages/highlight-selected) Atom package. To see an overview of your selected items in your Minimap, you can additionally add the [Minimap Highlight Selected](https://atom.io/packages/minimap-highlight-selected) package. ## 6. Color Picker ![atom-packages-06](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-06.jpg) Coda2 offers a color picker by default. In Atom you can use the [Color Picker](https://atom.io/packages/color-picker) package to easily select color values in the editor using a color picker. In the package settings, you can determine whether you want to use RGB or hex values. ## 7. Pigments ![atom-packages-07](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-07.jpg) Another useful package when working with colors is [Pigments](https://atom.io/packages/pigments). After installing the package, all color values are marked in their color. This way it's easy to see what color you used in your CSS without remembering the color value. For a project with lots of color values, this can be very useful. In addition you can also see a list of all the colors used in one project. ## 8. Open Recent Files/Folders ![atom-packages-08](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-08.jpg) To get a list of recently opened files is also very helpful. Coda 2 offers this by default, so I installed the [Open Recent Files / Folders](https://atom.io/packages/open-recent) package to also have this option in Atom. ## 9. File Icons ![atom-packages-09](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-09.jpg) Another helpful tool to make working with multiple file types in a project folder easier is [File Icons](https://atom.io/packages/file-icons). Without the package, all the icons are displayed in one color and with a standard design. File Icons offers colored, more detailed icons for each file type. ## 10. Autocomplete WordPress Hooks ![atom-packages-10](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-10.gif) For all of you, who work with WordPress [Autocomplete WordPress Hooks](https://atom.io/packages/autocomplete-wordpress-hooks) is another helpful package. It makes it much easier to write WordPress filters and hooks. ## How to synchronize your Atom settings If you want to use your Atom settings also on another computer, you can sync your settings using a gist. To do this, you must install the [Sync Settings for Atom](https://atom.io/packages/sync-settings) package and follow the instructions under the package settings. You will need a [GitHub account](https://github.com/) to save your settings. ## Further package recommendations from the community While preparing this blog post, I have asked around on Twitter about your Atom package recommendations and I received some very helpful tips (Thank you!). Here are a few tweets with additional Atom package recommendations from the Twitter community: > [@ellenbauer](https://twitter.com/ellenbauer) Package Sync Settings let's you conveniently sync and backup your [@AtomEditor](https://twitter.com/AtomEditor) settings. [https://t.co/uw2meXONqj](https://t.co/uw2meXONqj) > > *— Bego Mario Garde (@pixolin) 25. November 2016* > [@ellenbauer](https://twitter.com/ellenbauer) I've made a gist: [https://t.co/EkMYzW5Dnx](https://t.co/EkMYzW5Dnx) > > *— Claudio Schwarz (@purzlbaum) 25. November 2016* > [@ellenbauer](https://twitter.com/ellenbauer) [@AtomEditor](https://twitter.com/AtomEditor) I can recommend editorconfig for consistent indentation. Also I'm using a lot of [#javascript](https://twitter.com/hashtag/javascript?src=hash) related packages. [pic.twitter.com/z1XROqGhQA](https://t.co/z1XROqGhQA) > > *— Lars Graubner (@larsgraubner) [25. November 2016](https://twitter.com/larsgraubner/status/802087122643644416)* > [@ellenbauer](https://twitter.com/ellenbauer) [@AtomEditor](https://twitter.com/AtomEditor) emmet, platformio-ide-terminal,project manager > > *— Luca Bertaiola (@luglio7) 25. November 2016* Which Atom packages do you use to improve your workflow? Just write me your recommendation in a comment below. I would love to hear from you.