Tutorial on the basics of NextJS for building a website.
Create your first Atom package
Introduction to Atom
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.
Generate your first package
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
Package Generator ->
Generate Atom Package.
In order to generate your package, you can choose the language between
When the command is executed, Atom will open a new window into your package project, by default named
We will now see in details what's inside our package project directory:
├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── keymaps │ └── my-package.json <- Key shortcuts registered by your package ├── lib │ ├── my-package-view.js │ └── my-package.js <- Entry point of your package ├── menus │ └── my-package.json <- Menus declaration of your package into Atom application ├── package.json <- Description and library dependencies of your package ├── spec <- Tests directory (Jasmine) of your package │ ├── my-package-spec.js │ └── my-package-view-spec.js └── styles <- Stylesheets used by your package └── my-package.less
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
This file exports a default object which contains a
subscriptions property and also
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.
Add settings for your package
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 (
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
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":
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:
Run Package Specs.
Publish your package
Our package is now ready to be deployed! 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:
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.
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.