Choosing the editor you are going to use to code is not a simple decision. Fortunately, nowadays you have many alternatives available.
- Adding some particular package in atom text editor will help increase the working ability, easiness and efficiency of the editor. Both downloading and installing of a particular package in atom gets done in just few clicks and the best part is one can even create their own package according to the need. How to add a package in atom?
- A terminal package for Atom, complete with themes, API and more for PlatformIO IDE.
By far one of the most important packages on this list is the script package. This allows you to run scripts in the Atom editor using the 'command + i' keyboard shortcut. The code will run in a panel at the bottom of the text editor. 9) Getting started writing code in Python.
I have to say that in my beginnings as a Java developer I was always an Eclipse fan. I know many of you hate it, because of it's a heavy tool that consumes many system resources. But IMHO all its functionalities and programming aids it offers clearly compensate these problems.
After jumping to web development in general and WordPressplugin development in particular, I spent some time looking for alternatives to Eclipse. I tried Sublime for a while, but I had a lot of trouble maintaining a setup that worked without problems every time it had an update. I also used PHPStorm, and the truth is that the experience was good, being the closest alternative to Eclipse I found. But, unfortunately, its UI for Mac OS X did not convince me…
Finally I gave Atom a try, and I must say I'm quite happy with it! In fact, all my contributions to the development of our pluginNelio Content have been made from this editor, including all the Node.js code in the server side of Nelio Content that runs in Amazon's cloud.
If you do not know Atom, I recommend you to visit its website and take a look at it. From my point of view, it has the best package manager you can find today in a text editor. And to this day, Atom has not given me any headaches—it just works. And speaking of packages, here you have a list with the most interesting ones that I have installed and used in my developments. Let's review them!
Most Recommended Atom Packages
Remember, these are the most useful packages to me—maybe you will find others that you like more or serve you better. Anyway, I'm sure you will also find most of them useful.
file-icons
This simple package adds icons and colors to the files that we have in Atom according to their specific file type so that it is easier to identify them.
At a glance you will know the type of file in front of you. It seems silly, but once you try it you can not stop using it.
minimap
If you are a programmer, you will probably find yourself editing very long files. With minimap you can see a representation of the contents of the file on the right side of the code. This way you'll see at a glance where you are in the file without losing context.
Tadam 2 0 1. And best thing here is that you can complement it with the package minimap-git-diff, which marks on the mini map the places where you've made changes.
pigments
This package shows you the colors it finds within your files. That's particularly useful when editing CSS rules:
color-picker
With this package you can easily select the color you want to include in your CSS style. Just right click and select 'Color Picker' to open a color picker where you visually choose the color that best suits your needs. It is the best companion for the previous package.
highlight-selected
This package adds a functionality that (surprisingly) is not included by default in the core of Atom. Just double-click a word in the editor and then Atom will highlight that word and any other occurrences in the rest of the file.
If you're a developer, it's great to install it and see where variables or functions appear in the code.
goto-definition
An Eclipse functionality that I miss the most is to CTRL+click on a function, object, or class so that you can directly jump to its definition. Although it is not perfect, the best solution I have found in Atom is this package—I use every day to jump around my code!
You need to place the cursor over what you want to look for (the name of a function, for example) and do Alt+Cmd+Enter. This will either take you to the definition of said function or will open a floating dialog with all its occurrences in the project, so that you can decide where you want to jump to.
git-plus
This package integrates Git version control inside your Atom editor. This way you can do everything you do with Git from the terminal without the terminal.
I used to use it quite a lot, but I've been lately using the terminal counterpart. I'm more comfortable managing changes with Git directly from the command line instead of using this package in Atom, but I might give it a (second) try in the future).
git-time-machine
Another package that I have left apart but I still have installed is git-time-machine.
Given any file within a project controlled by Git, you can go back in time to see the changes you have made. It Includes an horizontal bar with the timeline showing the changes. Very useful when you want to see old modifications in your code.
merge-conflicts
When you use Git regularly and work with other developers, you've probably found yourself in situations where your code conflicts with HEAD.
Fixing these conflicts is complicated and you won't be able to upload your changes until you fix them. Fortunately, the merge-conflicts package provides you with assistance in this task, making the process much more visual and simple. Don't hesitate to try it.
todo-show
I bet you have your code plenty of comments pointing to stuff that should be improved or addressed in the future. But you never address them, because you forget about them. Well, luckily you can install the todo-show package, which opens a panel in Atom with all the comments it finds containing the words TODO, FIXME, etc.
This way, before launching your code to the public you can always quickly review it and see if you left something pending to fix.
linter
As a Java developer, I loved every time Eclipse was smarter than me and highlighted the errors it was detecting while I was programming code. It's an incredible functionality that reduces errors to the minimum expression.
In Atom, the equivalent that works best for me is linter. It's a package that adds control and visualization of errors in the editor itself. And even though it doesn't detect everything, it helps me a lot.
In addition to this basic linter package, my installation also includes the following linter extensions for Atom:
- linter-alex: controls that you write better. That's useful in your comments.
- linter-csslint: error detection in CSS files.
- linter-jscs: error detection in JavaScript files.
- linter-jsonlint: error detection in JSON files.
- linter-php: error detection in PHP files.
- linter-phpcs: error detection in PHP files using PHP_CodeSniffer (useful to follow WordPress style guides).
- linter-shellcheck: error detection in SHELL scripts.
- linter-swagger: error detection on Swagger files (used to define APIs).
- linter-write-good: error detection when you're writing English texts.
- linter-xmllint: error detection in XML files.
- minimap-linter: highlights linter-detected errors in the minimap.
atom-beautify
This package will make your files look more beautiful and more readable as it is responsible for controlling that the indentation is correct. That is, it checks that the lines of code are well ordered and start at the proper place. It is especially useful for following style guides in files that have multiple nested loops or functions that call other functions inside. It also supports most of the languages you can use today to code.
atom-ternjs
Finally, another functionality that today is not properly solved in editors like Atom is autocompletion. In addition to making you more efficient as a programmer, a good autocomplete functionality will avoid errors while you write your code. In my case, most of the code I usually write in Atom is JavaScript, so I installed the atom-ternjs package, which manages autocompletion. Not perfect, but better than nothing ?
Bonus: atom-2048
If you want to take a break for a while from work, here is a package that allows you to play the popular game 2048 within the editor ?
Final remarks
The Atom editor is my favorite code editor today. You have a lot of packages available and it's pretty stable. However, there are always things that could be improved. In particular, I still miss the possibility of having a panel with the list of functions that are defined within a file. This is something I've been missing since I left Eclipse, and I have not yet found an editor that solves it well. I recently found a package for Atom that 'works', but its quality is appalling.
If you also use Atom and you think that I have forgot some packages, leave me a comment. Let's complete the list together!
Featured image by Atom.
Atom is getting popular day by day amongst developers, Atom is a hackable text editor built by the folks at GitHub. Atom is a desktop application based on web technologies. Like other desktop apps, it has its own icon in the dock, native menus and dialogs, and full access to the file system. Atom is comprised of over 50 open-source packages that integrate around a minimal core. Our goal is a deeply extensible system that blurs the distinction between 'user' and 'developer'.
In this article we have chosen some 15 Useful Atom Packages for developers which make your editor more powerful and efficient. Following packages help you to organize messy code, preview of source code, color picker and number of other operations you can perform with them. Here are your 15 must-have Atom packages.
1. Color Picker
Color Picker is a useful package which enables you to pick colors, and it is as easy as a right-click and choosing ‘Color Picker'. Alternatively it can be done by pressingCMD/CTRL+SHIFT+C. Color Picker works if your cursor is on the text on CSS/SASS/LESS files that contain one of the following color formats: HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4, or color variable on SASS or LESS. It also has the ability to convert between the formats.
2. Minimap
Minimap lets you have a preview of the source code. You can set the position to be on the left or right, turn on/off code highlights, and more. Minimap even comes with some plugins to extend its functionality, such as color highlighter.
3. Emmet
Emmet allows you to work quickly when writing HTML, CSS, Sass / SCSS and LESS syntaxes. The main features of Emmet such as expanding abbreviations and wrapping with abbreviations, allow you to work quickly when writing HTML, CSS, Sass / SCSS and LESS syntaxes. The Cheat Sheet will helps you to quickly learn Emmet's abbreviation syntax.
4. Atom Pigments
Pigment is an Atom package to display colors in project and files. You can display the project's palette through the Pigments: Show Palette command from the command palette, You can search for all colors in every source files using the Pigments: Find Colors command from the command palette.
5. Beautify
Beautify will beautify your messy code neater, cleaner and more readable. It has great support for programming languages, such as HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C ++, C #, Objective-C, CoffeeScript, typescript, and SQL.
6. Vim Mode
This package provides vim modal control for Atom, ideally blending the best of vim and Atom. Use the Atom package manager, which can be found in the Settings view or run apm install vim-mode from the command line. Currently, vim-mode requires soft line wraps to be disabled, and has some issues with international keyboard layouts.
7. Conflicts
This package detects the conflict markers left by git merge and overlays a set of controls for resolving each and navigating among them. Additionally, it displays your progress through a merge. You can track your progress through a merge with per-file progress bars and a file list also you can save and stage your resolved version of each file as it's completed.
8. Linter
Linter is a base linter provider for the Hackable Atom Editor. It provides a top-level API to its consumer that allow them to visualize errors and other kind-of messages, easily. There are available linters for JavaScript, CoffeeScript, CSS / SASS / SCSS / LESS / STYLUS, Ruby, Python. In one language there are can be more one plugin available, such as JSHint, JSCS and JSXHint for JavaScript.
9. Gnippets
Gnippets is a GPLv3-licensed package that supplies snippets that can be used to comply with the GNU programming standards when writing C, as well as other snippets that can be used to license your program under the GNU GPL v3. Please note that the snippets in this package only work when working on a C source file.
10. File Icons
File Icons add icons to a filename based on the corresponding file type. It will add visual improvements when you open a file on tab or on tree view. The file icons are customizable: you can add your own icon and change the color through the LESS files in the packages/file-icons/styles directory.
11. JavaScript Snippets
JavaScript Snippets lets you quickly write a portion of JS source code. With defined abbreviation you don't need to write code word for word, for instance just type cl to make console.log and gi for getElementById.
12. Travis CI Status
Add Travis CI status of the project to the Atom status bar. The Travis CI build status for your repository will be indicated by the clock-arrow icon in the status bar. The icon will appear orange when it's requesting the build status, green if the build was successful and red if the build failed. The build status is updated when the project is first opened in Atom and from then on whenever the 'status' of the project repository changes. The handling of these events was borrowed from the git-view.coffee part of the status-bar package.
13. CSS Comb
CSS Comb makes your stylesheet code formatted consistently, looking neat and beautiful. Microsoft office. You can use pre-made sorting preferences based on Yandex, Zen, or CSSComb itself, or you can even use your own preference to make sorting rules.
14. Remote Edit
Remote Edit helps you to see and edit your remote files without leaving the editor or with the use of other ftp applications.
15. Git Plus
Atom Packages For Python
Git Plus allows you to work with Git without leaving Atom editor. Within the editor you are able to make a Git commit, checkout, push/pull, diff and other git commands.
