- Atom Packages For Javascript Development Framework
- Atom Packages For Javascript Development Activity
- Atom Packages For Javascript Development For Beginners
Feb 21, 2017 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. A strong contender for the best free JavaScript IDE. Atom is an IDE built by GitHub and has a great deal of support from Facebook. It's a simplistic yet mighty text editor. It's free, open-source, and has the best GitHub integration. Atom has capabilities for easy editing and project browsing in one single window. JavaScript code intelligence for atom with Tern. Adds support for ES5, ES6, ES7, Node.js, jQuery, Angular and more.
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.
Atom Packages For Javascript Development Framework
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. 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
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.
Atom is an open-source text editor (mostly used by developers){:rel='nofollow'} which is multi-platform and developed by GitHub company. It is based on Electron, the Github-developed framework, which allows developers to build native desktop applications for any operating systems by writing Javascript code.
The main interesting feature of Atom is that it also has a great package management tool and packages are also written in Javascript so it's quite easy for anyone to create one. This article aims to talk about it. Finally, its community is also active as it already has a lot of available packages: 5 285 at this time. You can browse all packages by going to the following address: https://atom.io/packages.
However, if you cannot find a package that fits your needs you can start creating your own and we will see how simple it is.
In order to create your own package, don't worry, you will not start from scratch. Indeed, we will use the Package Generator command which is brought to us by Atom core. To do that, you will just have to navigate into Packages -> Package Generator -> Generate Atom Package.
In order to generate your package, you can choose the language between Javascript and Coffeescript . This article will use Javascript.
When the command is executed, Atom will open a new window into your package project, by default named my-package.
We will now see in details what's inside our package project directory:
The first element to add to your package is the package.json file which has to contain all information of your package such as its name, version, license type, keywords that will enable you to find your package into Atom registry and also your package dependancies.
Please also note that there is a section called activationCommands which allows to define the executed command when your package is loaded.
Next, we have the keymaps/my-package.json file which allows you to define shortcuts into your package very easily. Here is the default example:
Next, we will go into your package entry point. It is located into lib/my-package.js file. This file exports a default object which contains a subscriptions property and also activate() and deactivate() methods.
Atom Packages For Javascript Development Activity
During package activation (inside activate() method), we will register a CompositeDisposable type object inside our subscriptions property and that will allow us to add and maybe later remove some commands offered by our package:
Now that our command is registered, we can test it by simply typing the following words, into the Atom command palette: My Package: Toggle. This command will execute the code contained in the toggle() method of the class and will display a little modal at the top of the window. You can add as many commands as you want and I really encourage you to decouple your code.
The Config component allows your package to have some settings.
To add a new setting, you just have to define a config property into your package's class which is an object containing each settings definition, as follows:
Atom settings allow multiple setting types (boolean , color , integer , string , …) so it can fit your needs on setting values by your users.
Once it is added, if you reload your package, you will see your package settings appearing into Atom settings:
In order to retrieve the value (or default value) defined by a user for a given setting in your code, you just have to use the following line:
So you are now ready to develop your package. We will have a quick overview of some interesting components that Atom brings to you and allows you to use in your package.
TextEditor: Interact with the text editor
With the TextEditor component, you will be able to insert some text into user's text editor, to save the current file, to go back and forth the history, to move the cursor into editor, to copy/paste into clipboard, to play with line indentation, to scroll, and to do so much more…
Here are some examples to insert text in a specific position and to save the file automatically:
ViewRegistry & View: Create and display your own window
These components allow you to create views (modals / windows) inside Atom and display them.
You have an example of a modal View into the default package:
NotificationManager & Notification: Alert your users with notifications
Your package can also display a variety of notifications from 'success' to 'fatal error':
GitRepository
This one is also really interesting: indeed, you can access all the git properties of the current git repository that is used. This way, you will be able to access the current branch name, the repository remote URL and also see if a file is considered as a new or modified file. Let's see it in action:
And more things to discover…
We just made a review of the components that I played with but I invite you to read more on the following link if you want to go further: https://atom.io/docs/api/latest/AtomEnvironment.
Test your package with specs
Our package is now developed but we don't have to forget about the tests. To do that, Atom uses Jasmine.
Your default package already has a prepared test file:
Jasmine specs tests are written in the following way:
Atom is an open-source text editor (mostly used by developers){:rel='nofollow'} which is multi-platform and developed by GitHub company. It is based on Electron, the Github-developed framework, which allows developers to build native desktop applications for any operating systems by writing Javascript code.
The main interesting feature of Atom is that it also has a great package management tool and packages are also written in Javascript so it's quite easy for anyone to create one. This article aims to talk about it. Finally, its community is also active as it already has a lot of available packages: 5 285 at this time. You can browse all packages by going to the following address: https://atom.io/packages.
However, if you cannot find a package that fits your needs you can start creating your own and we will see how simple it is.
In order to create your own package, don't worry, you will not start from scratch. Indeed, we will use the Package Generator command which is brought to us by Atom core. To do that, you will just have to navigate into Packages -> Package Generator -> Generate Atom Package.
In order to generate your package, you can choose the language between Javascript and Coffeescript . This article will use Javascript.
When the command is executed, Atom will open a new window into your package project, by default named my-package.
We will now see in details what's inside our package project directory:
The first element to add to your package is the package.json file which has to contain all information of your package such as its name, version, license type, keywords that will enable you to find your package into Atom registry and also your package dependancies.
Please also note that there is a section called activationCommands which allows to define the executed command when your package is loaded.
Next, we have the keymaps/my-package.json file which allows you to define shortcuts into your package very easily. Here is the default example:
Next, we will go into your package entry point. It is located into lib/my-package.js file. This file exports a default object which contains a subscriptions property and also activate() and deactivate() methods.
Atom Packages For Javascript Development Activity
During package activation (inside activate() method), we will register a CompositeDisposable type object inside our subscriptions property and that will allow us to add and maybe later remove some commands offered by our package:
Now that our command is registered, we can test it by simply typing the following words, into the Atom command palette: My Package: Toggle. This command will execute the code contained in the toggle() method of the class and will display a little modal at the top of the window. You can add as many commands as you want and I really encourage you to decouple your code.
The Config component allows your package to have some settings.
To add a new setting, you just have to define a config property into your package's class which is an object containing each settings definition, as follows:
Atom settings allow multiple setting types (boolean , color , integer , string , …) so it can fit your needs on setting values by your users.
Once it is added, if you reload your package, you will see your package settings appearing into Atom settings:
In order to retrieve the value (or default value) defined by a user for a given setting in your code, you just have to use the following line:
So you are now ready to develop your package. We will have a quick overview of some interesting components that Atom brings to you and allows you to use in your package.
TextEditor: Interact with the text editor
With the TextEditor component, you will be able to insert some text into user's text editor, to save the current file, to go back and forth the history, to move the cursor into editor, to copy/paste into clipboard, to play with line indentation, to scroll, and to do so much more…
Here are some examples to insert text in a specific position and to save the file automatically:
ViewRegistry & View: Create and display your own window
These components allow you to create views (modals / windows) inside Atom and display them.
You have an example of a modal View into the default package:
NotificationManager & Notification: Alert your users with notifications
Your package can also display a variety of notifications from 'success' to 'fatal error':
GitRepository
This one is also really interesting: indeed, you can access all the git properties of the current git repository that is used. This way, you will be able to access the current branch name, the repository remote URL and also see if a file is considered as a new or modified file. Let's see it in action:
And more things to discover…
We just made a review of the components that I played with but I invite you to read more on the following link if you want to go further: https://atom.io/docs/api/latest/AtomEnvironment.
Test your package with specs
Our package is now developed but we don't have to forget about the tests. To do that, Atom uses Jasmine.
Your default package already has a prepared test file:
Jasmine specs tests are written in the following way:
describe(): A Jasmine test suite starts with a 'describe' function which takes a name as the first argument and a function as the second,it(): A specification is added by using this function, 'it' has to be contained into a specification,expect(): This one is an assertion, when we expect something to happen.
This is now your turn to play with Jasmine and test your package logic. In order to run the specs tests, you just have to navigate into the following menu: View -> Packages -> Run Package Specs.
Our package is now ready to be deployed! Top android emulator. Let's send it.
To do that, we will use the apm CLI tool which comes with Atom when installing it.
After pushing your code into a Github repository, simply go into your package directory and type the following command:
This command will be in charge of creating the new version tag into repository and publish this version into the Atom registry. Congratulations, your package is now published and available on the following URL: https://atom.io/packages/!
The final step is to ensure that your package will continue to work in the future when you or your contributors will add new features but also when Atom releases a new beta version. To do that, you can use Travis-CI on your repository with the following configuration:
I personally think that this is a little revolution to allow developers to make their own editor and bring the features they want. Music track editor.
Atom Packages For Javascript Development For Beginners
Moreover, the Atom API is already very rich and very simple to use and this is certainly the main reason why the community offers a large number of packages. To conclude, as for all libraries, it is not useful to reinvent the wheel by creating already existing packages. The idea is to add features if they don't already exists, in order to enrich your user experience.
