By Dennis Bruijn / @0x1ad2

a list of Atom plugins I can’t live without

I recently switched from Sublime Text 3 to Atom Editor, and I must say it sped up my development process especially the part of producing flawless front-end code.

What’s Atom Editor?

As stated on their homepage: Atom is a text editor that’s modern, approachable, yet hackable to the core — a tool you can customize to do anything but also use productively without ever touching a config file

Image

What made me switch to Atom Editor?

First of all, it’s backed by Github. Github is a successful company that focuses on developers needs regarding version control and product development.

Github has a lot of resources to put in the process of developing an application. It has the ability to create a stable product fast and improve it over time.

Second, it’s hackable to the core this allows us (developers) to build new packages for everything from theming and synchronization to the way we write characters on screen.

It’s also inspectable by the chrome inspector because it’s made with Electron a cross-platform framework to create desktop apps with JavaScript, HTML, and CSS also by Github

Image

The list

Minimap

Minimap provides you with a preview of the full source code; this is nice to gain an overview of the file you are editing.

Image

Minimap cursor line

It’s good to know where you are in your file, cursor line allows you to see where in your file you are. It moves with you if you move lines.

Image

Pigments

Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. It also highlights the colors within the file for example a stylesheet to make using colors a breeze.

Image

Emmet

Emmet allows you to easily generate HTML based on the Emmet syntax. For example you want to create an unordered list with three list items that each have a paragraph inside.

Image

Double tag

Double tag allows you to edit both the start and end HTML tags at the same time. This is extremely useful when editing big files with a lot of HTML.

Image

Linter

Linter allows you to lint your code, linters will generate warnings and errors based on real-time code analysis. You can install different Linters almost each language has one HTML, CSS, SCSS, JavaScript, TypeScript even some frameworks like Twitter Bootstrap.

Image

Beautify

Beautify allows you to beautify your HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, and SQL with one shortcut Ctrl-Alt-B or Cmd-Alt-B

Image

Auto close HTML

Auto close gives you the ability to auto close your HTML tags. This will also come in handy when editing big files with a lot of HTML.

Note: You don’t both Emmet and Auto close HTML, it’s already included in Emmet feature.

Image

Fuzzy finder

Fuzzy finder allows you to find and open files quickly with one shortcutCtrl-T or Cmd-T

Image Fuzzy finder is included by default you don’t have to install it

Color picker

Color picker allows you to pick colors within your SCSS, LESS and CSS It currently reads the following color formats HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4.

Image

Highlight selected

Highlight selected allows you to highlight your selected words throughout the file that you are editing. You can use Ctrl-U or Cmd-U to multi selected the words

Image

GIT diff

GIT diff marks lines in the editor gutter that have been added, edited, or deleted since the last commit.

Image GIT diff is included by default you don’t have to install it

Sort lines

Sort your lines in alphabetic order

Image

Last cursor position

Last cursor positions keeps a history of past cursor position to travel back to using Alt-minus(-)

Image

Code peek

Code peek allows you to quickly peek and edit functions contained in other files instead of having to open the file separately.

Image

Package sync

Package sync lets you synchronize packages installed between computers. This comes in handy if you are working on different working environments.

Image You can sync your snippets, keymap and other settings

Here is my packages.json file, copy it for quickly installing the packages mentioned above (and more).

Matthew Leonard was wondering how to use it so here’s a little guide

  • Installing the plugin trough package management
  • Creating a Github token with the right access
  • Create a Gist file
  • Set the tokens and last part of the URL from the Gist file in the package settings
  • Use Ctrl-Shift-P (or Cmd-Shift-P) and type sync to back-up and restore the packages

WakaTime

Because who don’t want to track their time per project? ☺️

WakaTime allows you to track your time per project, your programming languages used, logged in time and much more. All you have to do install the plugin and grab a API key from https://wakatime.com/

Image

A big thanks to all the package developers who make my life a lot easier!

JavaScript Development

Atom TypeScript

For everyone who’s using TypeScript for JavaScript development, I recommend installing Atom TypeScript. The only TypeScript plugin you will ever need

some of the features are

  • Autocomplete
  • Live error analysis
  • Type information on hover
  • Compile on save

Atom TernJS

TernJS provides JavaScript code intelligence for atom with Tern. Adds support for ES5, ES6 (JavaScript 2015), Node.js, jQuery & Angular. Extendable via plugins. Uses suggestion provider by autocomplete-plus.

Image

Extra’s

Here are some packages that I use for fun or doesn’t fit in the list

Activate power mode

Activate POWER MODE to write your code in style.

Image

Seti UI

A dark colored UI theme for Atom with custom file icons. I ❤ seti!

Image

Image

linter-write-good

Naive linter for English prose for developers who can’t write good and wanna learn to do other stuff good too ?

Image

Thank you for taking the time to reading this story! If you enjoyed reading this story, clap for me by clicking the ?? below so other people will see this here on Medium.

You can follow me on Twitter @0x1ad2 and feel free to tweet me anything!

Also, I work at Wehkamp.nl one of the biggest e-commerce companies of ??
We do have a Tech blog, check it out and subscribe if you want to read more stories like this one. Or look at our job offers if you are looking for a great job!